PDA

View Full Version : EXTJS4 stacked column chart : How do we change the color of each segment in the stack



ananthk
30 Jun 2013, 8:52 AM
Hi,

I am trying to write a rendering function in EXTJS4 that needs to change the color of the segment of the stacked column chart. The color specification for each segnment is not working in the stacked column chart. Any help will be appreciated.

Thanks



Data model
Ext.define('IngestMetrics', {
extend: 'Ext.data.Model',
fields: ['X', 'Y1', 'Y2']
});
var chartPanel = {
xtype: 'panel',
id: 'CHARTPANEL',

height: 80,
width:200,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'chart',
flex: 1,
id: 'Barchart',
animate: true,
shadow: true,
store: store,
background: {
fill: '#FFD700'
},
// legend: {
// position: 'right'
// },
axes: [{
type: 'Numeric',
position: 'left',
fields: ['Y1', 'Y2'],
title: false,
grid: true,
hidden: true
// minorTickSteps :10,
// majorTickSteps: 10,
// label: {
// renderer: Ext.util.Format.numberRenderer('0.00')
// }
// title: 'Packet Loss -Mean and Variance '
//roundToDecimal: false

}, {
type: 'Category',
position: 'bottom',
fields: ['X'],
hidden: true

//title: 'CCSD'
}
],
series: [
{
type: 'column',
axis: 'left',
gutter: 10,

style: {
width: 10
//<-- Specify you Column width here
},
xField: 'title',
yField: ['Y1', 'Y2'],
stacked: true,
listeners: {


renderer : function(sprite, record, attr, index, store, col){

// var color = colorpalette[index];
// for ( var i=0; i <= display_fields.length; i++ ){
// series_colors[i] = color;
// }
var uid = Ext.Object.getAt(record.data, col+1)[0];
alert('here is the uid' +uid);
return (uid == 'Y2')? Ext.apply(attr, { fill: '#f00' }) : attr;
//return Ext.apply(attr, { fill: color });
}
},

tips: {
trackMouse: true,
renderer: function(storeItem, item, sprite, record, attr, index, store) {
this.setWidth(100);
this.setHeight(50);
var label = item.value[1] == storeItem.data.Y1 ? 'Y1' : 'Y2';
this.setTitle(label + '<br />' + item.value[1]);

}
}
}
]
}
]
};


Ext.create('Ext.panel.Panel', {
//title: 'Hello',
width: 200,
height: 80,
renderTo: "niprGraph",
items: [chartPanel
]
});
});

slemmon
2 Jul 2013, 1:59 PM
You might take a look at how this example employes a renderer:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/charts/BarRenderer.js

The renderer is applied to the series itself.

*Wrapping your code in codeblocks will improve readability and potentially community response.