Code:
<!DOCTYPE html>
<html>
<head>
<title>BarSeries Renderer with multiple YFields</title>
<link rel="stylesheet" href="../resources/css/ext-all.css" />
<script src="../ext-all-dev.js"></script>
<script>
Ext.chart.series.Bar.override({
renderShadows: function(i, barAttr, baseAttrs, bounds) {
var me = this,
chart = me.chart,
surface = chart.surface,
animate = chart.animate,
stacked = me.stacked,
shadowGroups = me.shadowGroups,
shadowAttributes = me.shadowAttributes,
shadowGroupsLn = shadowGroups.length,
store = chart.getChartStore(),
column = me.column,
items = me.items,
shadows = [],
zero = bounds.zero,
shadowIndex, shadowBarAttr, shadow, totalDim, totalNegDim, j, rendererAttributes;
if ((stacked && (i % bounds.groupBarsLen === 0)) || !stacked) {
j = i / bounds.groupBarsLen;
//create shadows
for (shadowIndex = 0; shadowIndex < shadowGroupsLn; shadowIndex++) {
shadowBarAttr = Ext.apply({}, shadowAttributes[shadowIndex]);
shadow = shadowGroups[shadowIndex].getAt(stacked ? j : i);
Ext.copyTo(shadowBarAttr, barAttr, 'x,y,width,height');
if (!shadow) {
shadow = surface.add(Ext.apply({
type: 'rect',
group: shadowGroups[shadowIndex]
}, Ext.apply({}, baseAttrs, shadowBarAttr)));
}
if (stacked) {
totalDim = items[i].totalDim;
totalNegDim = items[i].totalNegDim;
if (column) {
shadowBarAttr.y = zero + totalNegDim - totalDim - 1;
shadowBarAttr.height = totalDim;
}
else {
shadowBarAttr.x = zero - totalNegDim;
shadowBarAttr.width = totalDim;
}
}
rendererAttributes = me.renderer(shadow, store.getAt(j), shadowBarAttr, i, store, true); // passed true as the last argument to determine it is a shadow or not in a Renderer call
rendererAttributes.hidden = !!barAttr.hidden;
if (animate) {
me.onAnimate(shadow, { to: rendererAttributes });
}
else {
shadow.setAttributes(rendererAttributes, true);
}
shadows.push(shadow);
}
}
return shadows;
}
});
</script>
<script>
var barRenderer = function(sprite, record, attr, index, store, isShadow) {
var barIndex,
data,
series = this;
if (!isShadow) {
barIndex = index % series.yField.length;
record = store.getAt(Math.floor(index / series.yField.length));
switch (barIndex) {
case 0: data = record.get(series.yField[0]); break;
case 1: data = record.get(series.yField[1]); break;
}
if (data < 0) {
attr.fill = "rgb(255, 0, 0)";
} else {
attr.fill = "rgb(0, 255, 0)";
}
}
return attr;
};
Ext.onReady(function () {
Ext.create("Ext.panel.Panel", {
renderTo: Ext.getBody(),
height: 300,
width: 400,
layout: "fit",
title: "Bar Renderer",
items: [{
xtype: "chart",
axes: [{
position: "bottom",
fields: ["Data1", "Data2"],
type: "Numeric",
minimum: -100.0
}, {
position: "left",
fields: ["Name"],
type: "Category"
}],
series: [{
type: "bar",
xField: "X",
yField: ["Data1", "Data2"],
axis: "bottom",
renderer: barRenderer
}],
store: {
fields: [ "Name", "Data1", "Data2"],
data: [{
"Name": "Category 1",
"Data1": -10,
"Data2": 100
}, {
"Name": "Category 2",
"Data1": 20,
"Data2": -90
}, {
"Name": "Category 3",
"Data1": -30,
"Data2": 80
}]
}
}]
});
});
</script>
</head>
<body>
</body>
</html>
It produces the following chart. The colors are set up on the fly. If the data is less than 0, it is red, otherwise - green.
Posting Permissions
Reply With Quote
