PDA

View Full Version : Stacked Bar Chart with dinamic coloring



eamorese
23 Mar 2015, 12:17 PM
Hello everyone!
I hope someone can help me on this one.

I needed to color my bars depending on data of my store.
Take Sencha Stacked Bar Chart example:
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/charts/StackedBar.html

In my example, the store would be like this:



var store = Ext.create('Ext.data.JsonStore', {
fields: ['year', 'views1', 'type1', 'views2', 'type2'],
data: [
{year: 2005, views1: 34000000, type1: 1, views2: 18450000, type2: 2},
{year: 2006, views1: 56703000, type1: 2, views2: 12650000, type2: 3},
{year: 2007, views1: 42100000, type1: 2, views2: 25780000, type2: 3},
{year: 2008, views1: 38910000, type1: 4, views2: 24810000, type2: 1}
]
});


On the chart, I would plot only the number of views (views1 and views2), and depending on their type (type1 for views1 / type2 for views2) I would fill the bar with the right color.

Is that possible?
I would appreciate any insight!

It would maybe go in this direction, but please, I'm not used to manipulating ext objects, so ignore this idea if its not in the right path:



var chart = Ext.create('Ext.chart.Chart',{
xtype: 'chart',
animate: true,
shadow: true,
store: store,
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['views1, 'views2'],
title: false,
grid: true,
label: {
renderer: function(v) {
return String(v).replace(/(.)00000$/, '.$1M');
}
}
}, {
type: 'Category',
position: 'left',
fields: ['year'],
title: false
}],
series: [{
type: 'bar',
axis: 'bottom',
gutter: 80,
xField: 'year',
yField: ['views1, 'views2'],
stacked: true,
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(String(item.value[1] / 1000000) + 'M');
}
},
renderer: function(sprite, record, attr, index, store) {
var color = ???????? use type1 and type2 ?????????????????
return Ext.apply(attr, {fill: color});
}
}]
});




Thanks!

Gary Schlosberg
6 Apr 2015, 9:27 AM
Your data should be at record.data to make conditions on rendering.
https://fiddle.sencha.com/#fiddle/krm