PDA

View Full Version : StackedBarChart - how do I overlay data points?



antonye
14 May 2010, 3:37 AM
Hi - first post, be gentle!

I'm very new to ExtJS so forgive my ignorance, but we have a requirement to create a chart that looks something like this:

20510

The idea is that for each horizontal bar there needs to be a green section which is variable so we supply 3 values - the width of the first red section, the green section then the end red section. So I have used a StackedBarChart to achieve this, removing some of the labels and changed formatting, to achieve this:

20509

That gives me my base template, where I now need to plot in a single data point (the black circle in the requirements pic at the top).

So my question is: what is the best approach for this? Can I overlay another set of data (my black dots) onto this StackedBarChart? Can you point me to some examples? Am I heading in the wrong direction?

Because the green areas can move, I need to build this dynamically so I can't use template images or anything (too messy as well!).

Any help appreciated!

Here's the source of the above, FYI...



var dataDummyCharacteristics = [
['Smoothing', 60, 40, 0],
['Liquidity', 30, 40, 30],
['Withdrawal Penalties', 0, 20, 80],
['Downside Protection', 60, 40, 0],
['Active Management', 0, 20, 80]
];

//we create the Store that will manipulate the information
var storeSummary = new Ext.data.ArrayStore({
fields:[{name:'Characteristic'},{name:'Low', type:'float'},{name:'Medium', type:'float'},{name:'High', type:'float'}]
});
storeSummary.loadData(dataDummyCharacteristics);

// create Bar Chart
var chartBar = new Ext.chart.StackedBarChart({
store: storeSummary,
yField: 'Characteristic',
xAxis: new Ext.chart.NumericAxis({
stackingEnabled: true,
maximum: 100,
minimum: 0,
majorUnit: 25,
minorUnit: 0,
labelRenderer : function(val){
return'';
}
}),
series: [{
xField: 'Low',
displayName: 'Low',
style: { color: '#900000', size: 25}
},{
xField: 'Medium',
displayName: 'Medium',
style: { color: '#80C080', size: 25}
},{
xField: 'High',
displayName: 'High',
style: { color: '#900000', size: 25}
}]
});

17 May 2010, 11:09 AM
Feel free to use the following example from my book:

Though you will need to set the line size to zero.

http://extjsinaction.com/examples/chapter10/10.5_ColumnChart_Stacked.html

antonye
25 May 2010, 2:44 AM
Feel free to use the following example from my book:

Though you will need to set the line size to zero.

http://extjsinaction.com/examples/chapter10/10.5_ColumnChart_Stacked.html

Thanks very much, that was very helpful!
With a little bit of fiddling I've managed to achieve the exact effect I need:

20643

To do this, I added the additional data points (the black blobs) as additional data ("score") in the data series, and then applied it to the graph as a "type: 'line'" as suggested. Then I set the "lineAlpha" style setting to Zero so that it does not show the trend line which joins up the data points.

Just FYI, the resulting code is as below:




var dataDummyCharacteristics =[
['Smoothing',60,40,0,65],
['Liquidity',30,40,30,55],
['Withdrawal Penalties',0,20,80,70],
['Downside Protection',60,40,0,35],
['Active Management',0,20,80,18]
];



//we create the Store that will manipulate the information
var storeSummary =new Ext.data.ArrayStore({
fields:[
{name:'Characteristic'},
{name:'Low', type:'float'},
{name:'Medium', type:'float'},
{name:'High', type:'float'},
{name:'Score', type:'float'},
]
});
storeSummary.loadData(dataDummyCharacteristics);


// create Bar Chart

var chartBar =new Ext.chart.StackedBarChart({

store: storeSummary,


yField:'Characteristic',
xAxis: new Ext.chart.NumericAxis({



stackingEnabled: true,



maximum: 100,



minimum: 0,



majorUnit: 25,



minorUnit: 0,



labelRenderer: function(val){



return'';
}
}),
series:[{



xField: 'Low',



displayName: 'Low',



style:{ color:'#900000', size:25}



},{
xField: 'Medium',



displayName: 'Medium',



style:{ color:'#80C080', size:25}



},{
xField: 'High',



displayName: 'High',



style:{ color:'#900000', size:25}



},{
type: 'line',



xField: 'Score',



displayName: 'Score',



style:{ color:'#000000', size:20, lineAlpha:0}



}]
});