The tricky part of the stacked bar chart is the ability to get the segment, category, and value back from the users’ interaction with the bar. Two out of three are easy, and covered well in the documentation, however, the third item, the segment of the category is a little more difficult to access. The following method below expands on my first post which was largely a hunch and needed further exploration to avoid any ‘hard coded’ values being used to determine the segment; fortunately this is a totally dynamic solution.
You will need a function for finding the index of an Array based on a value. I used the following function found on Kumar S’s blog [http://www.guyfromchennai.com/?p=26]….
Array.prototype.findIndex = function(value){
var ctr = "";
for (var i=0; i < this.length; i++) {
// use === to check for Matches. ie., identical (===), ;
if (this[i] == value) {
return i;
}
}
return ctr;
};
And Steve Hansell’s capitalization method. [http://stackoverflow.com/users/171490/steve-hansell]
String.prototype.capitalize = function() { return this.charAt(0).toUpperCase() + this.slice(1); }
Now using the Extjs stacked bar chart example that can be found in the folder ‘examples/charts/’ when you download Extjs 4, so that we can all start on the same page implement the following steps to change this to a stacked bar with access to all of the elements in the chart, including segments.
You will notice that the axis code is the following:
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['comedy', 'action', 'drama', 'thriller'],
title: false,
grid: true,
label: {
renderer: function(v) {
return String(v).replace(/000000$/, 'M');
}
},
roundToDecimal: false
}, {
type: 'Category',
position: 'left',
fields: ['year'],
title: false
}],
Here you can see that the film genres are all in an array and placed inside the fields property of axis. The first step is to take the fields and place them in an array outside of the chart object so for this example we will insert the line below above the chart object.
var display_fields = ['comedy', 'action', 'drama', 'thriller'];
Next we will need an array to hold all of the colors that are generated when the chart is rendered, since they will match the legend and are easily accessible, this is the only sure way to determine what segment the users mouse is over without some challenging x,y calculations on the chart space itself. Of course, this array should have the same length as the display_fields array, so go ahead and place the code below under the array you just created.
var series_colors = new Array( display_fields.length );
No on to the series section of the code, you should see the same genre array in the series yField property, replace this with the display_field array. Now we need to add a listener that will fire after the chart is rendered and populate the array of colors with the colors that Ext has assigned to the segments of the bar. We will use the method getLegendColor() so that we don’t have to know or care what the color is beforehand. The code for this listener is below:
listeners: {
afterrender : function(){
for ( i=0; i <= display_fields.length; i++ )
{
series_colors[i] = this.getLegendColor(i);
}
}
},
To gethe association between the segment name and the color just add the following function under the seriesColors array definition.
function return_segment(color){
var tidx = series_colors.findIndex(color);
return display_fields[tidx];
}
Finally, we want to do something with the new functionality right? So we will display the segment name in the tooltip as follows:
tips: {
trackMouse: true,
width: 165,
height: 48,
renderer: function(storeItem, item) {
this.update( '<b>' + return_segment(item.attr.fill).capitalize() + '</b> - ' + String(item.value[1] / 1000000) + ' M');
}
}
