PDA

View Full Version : Stacked Bar Chart help



marman
14 Mar 2011, 5:19 AM
I am having two issues with my stacked bar chart and was hoping someone could help point out where i am going wrong.


The scale of the chart is several orders of magnitude off. The dataset is the same as what i have in my grid below the chart
How can i make the legend display "friendly" labels, like: "No Join Data" rather than the field from my dataset: noJoinData




var myPageSize = 7; // server script should only send back 25 items at a time

//--create the data store
var myStore = new Ext.data.Store({
model: 'CipSummary'
,pageSize: myPageSize
});


var panel1 = Ext.create('widget.panel', {
width: 700,
height: 350,
title: 'Last 7 Days',
renderTo: 'cipSummary-chart',
layout: 'fit',
items: {
xtype: 'chart',
animate: true,
shadow: true,
store: myStore,
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
position: 'bottom',
//fields: ['numNoJoinData', 'numNoUpdatedData', 'numUnexpectedError','numNullResponse' ,'numSent' ,'numFailed' ,'numNullMsgResult' ,'numNoCipFound'],
fields: ['numNoJoinData', 'numNoUpdatedData', 'numUnexpectedError','numNullResponse', 'numSent', 'numFailed','numNullMsgResult'],
title: false,
grid: true,
label: { renderer: Ext.util.Format.numberRenderer('0,0') },
}, {
type: 'Category',
position: 'left',
fields: ['dayId'],
title: false
}],
series: [{
type: 'bar',
axis: 'bottom',
gutter: 80,
xField: 'dayId',
yField: ['numNoJoinData', 'numNoUpdatedData', 'numUnexpectedError','numNullResponse', 'numSent', 'numFailed','numNullMsgResult'],
stacked: true,
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function(storeItem, item){
//this.setTitle( String(item.value[1]) );
}
}
}]
}
});


//--manually load local data
myStore.loadPage(1);

robertvonk
29 Jul 2011, 11:09 AM
Did you manage to customize the text displayed in the legend? I'm searching for this also

edspencer
29 Jul 2011, 5:15 PM
Sending our charting gurus this way for some help

philogb
1 Aug 2011, 8:55 AM
Hi,

Thanks for the report. Could you provide us with the exact json/store data you're using to create the chart? I'm trying to reproduce the example and for now I will try to use something that matches what's shown in the grid, but I would really appreciate if you could give me the exact dataset for the example.

Thanks!

philogb
1 Aug 2011, 9:18 AM
The axes are working for me. I'm not sure if this is because I'm working on a newer build or because the data from the example is different. Could you try this use-case and tell me whether it works for you too?

The complete code of the example is:



Ext.require('Ext.chart.*');
Ext.require('Ext.data.*');
Ext.require('Ext.layout.container.Fit');

Ext.onReady(function() {

var model = [{
"numNoJoinData": 216,
"numNoUpdatedData": 0,
"numUnexpectedError": 0,
"numNullResponse": 0,
"numSent": 0,
"numFailed": 0,
"numNullMsgResult": 0,
"dayId": 20110310
}, {
"numNoJoinData": 1656,
"numNoUpdatedData": 0,
"numUnexpectedError": 0,
"numNullResponse": 0,
"numSent": 0,
"numFailed": 0,
"numNullMsgResult": 0,
"dayId": 20110311
}];

//--create the data store
var myStore = new Ext.data.Store({
fields: ['numNoJoinData', 'numNoUpdatedData', 'numUnexpectedError','numNullResponse', 'numSent', 'numFailed','numNullMsgResult']
});

myStore.loadData(model);


var panel1 = Ext.create('widget.panel', {
width: 700,
height: 350,
title: 'Last 7 Days',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
animate: true,
shadow: true,
store: myStore,
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['numNoJoinData', 'numNoUpdatedData', 'numUnexpectedError','numNullResponse', 'numSent', 'numFailed','numNullMsgResult'],
title: false,
grid: true,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
}, {
type: 'Category',
position: 'left',
fields: ['dayId'],
title: false
}],
series: [{
type: 'bar',
axis: 'bottom',
gutter: 80,
xField: 'dayId',
yField: ['numNoJoinData', 'numNoUpdatedData', 'numUnexpectedError','numNullResponse', 'numSent', 'numFailed','numNullMsgResult'],
stacked: true,
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function(storeItem, item){
//this.setTitle( String(item.value[1]) );
}
}
}]
}
});
});




I hope this helps,

philogb
1 Aug 2011, 9:25 AM
You can also use set human readable names in the legend by using the title property in the series configuration object:



series: [{
type: 'bar',
axis: 'bottom',
gutter: 80,
xField: 'dayId',
yField: ['numNoJoinData', 'numNoUpdatedData', 'numUnexpectedError','numNullResponse', 'numSent', 'numFailed','numNullMsgResult'],
title: ['No Join Data', 'No Updates', 'Unexpected Errors','Null Response', 'Sent', 'Failed','Null MsgResult'],
stacked: true,
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function(storeItem, item){
//this.setTitle( String(item.value[1]) );
}
}
}]


I hope this helps,

sluboch
18 Aug 2011, 10:49 AM
Did you find an answer to this problem? I am having the same problem. I posted it into a new thread, but my stacked bar chart height is twice the size that it should be. I tried it in 4.0.1 and 4.0.2a with the same results.

Also, how do you put your code in the scrolling box?