PDA

View Full Version : Sencha touch charts - need help with pie legend



some1special
8 Nov 2011, 11:33 PM
Hi,
i've been having trouble with showing legend of a pie chart.

Long story short, after i dinamicly fill the store with data, the pie chart is shown correctly, but the legend is empty.

Do i need to update the pie chart? load the store again?

Any help would be appreciated

AndreaCammarata
9 Nov 2011, 1:09 AM
Moving this post to the Sencha Touch Charts forum.

mitchellsimoens
9 Nov 2011, 5:52 AM
Code would help

some1special
11 Nov 2011, 2:34 PM
Ok, this is the part where chart is drawn



//create a panel to put the chart in
chartPanelPie = new Ext.chart.Chart({
//bind the chart to a stylesheet
//theme: 'Demo',
store: prepaid_totals_chart_store,
shadow: false,
animate: true,
//set padding for the top, bottom and left parts
//of the chart.
insetPadding: { top: 20, bottom: 20, left: 20, right: 20 },
//configure the legend.
legend: {
position: { portrait: 'top', landscape: 'left' },
labelFont: '10px Helvetica, Arial, sans-serif' // To be moved to SCSS
},
//describe the actual pie series.
series: [{
type: 'pie',
field: 'data1',
//set as donut chart.
donut: 0,
showInLegend: true,
highlight: false,
//when labels overflow the pie slice, set to use a callout.
listeners: {
'labelOverflow': function(label, item) {
item.useCallout = true;
}
},
//set the callouts configuration
callouts: {
//this method gets called each time a callout is placed.
renderer: function(callout, storeItem) {
callout.label.setAttributes({
text: storeItem.get('name')
}, true);
},
//for each element, this function decides wether to create a
//callout for it or not.
filter: function() {
return false;
},
//styling of the callout sprites, the callout box, lines and
//label.
box: {
//no config here.
},
lines: {
'stroke-width': 2,
offsetFromViz: 20
},
label: {
font: 'italic 10px Arial'
},
styles: {
font: '14px Arial'
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});


then i call i function get_prep_tot(); which gets the data from the server

and the function looks like this


function get_prep_tot(){
Ext.regModel("PrepaidTotals", {
fields : [
{name: 'u_class', type: 'string'},
{name: 'u_type', type: 'string'},
{name: 'current_users', type: 'int'},
{name: 'status', type: 'int'},
{name: 'difference', type: 'int'}
]
});
Ext.regModel("PrepaidTotalsChart", {
fields : [
{name: 'name', type: 'string'},
{name: 'data1', type: 'int'}
]
});


prepaid_totals_store = new Ext.data.Store({model : "PrepaidTotals",data : []});
prepaid_totals_chart_store = new Ext.data.Store({model : "PrepaidTotalsChart",data : []});

Ext.util.JSONP.request({
url : myurl,
callbackKey : 'callback',
params : {
action: 'pp_is_total',
uuid: myUUID,
uniquefy: Math.random()
},
callback : function(data) {
elements = data.elements;
charts = data.chart;
for(var i in elements){
if(elements[i]['CURRENT_USERS']>0){
prepaid_totals_store.add({'u_class':elements[i]['U_CLASS'],'u_type':elements[i]['U_TYPE'],'current_users':elements[i]['CURRENT_USERS'],'status':elements[i]['STATUS'],'difference':elements[i]['DIFFERENCE']});
}
}
for(var j in charts){
if(charts[j]['CU']>0){
prepaid_totals_chart_store.add({'name':charts[j]['USER_CLASS'],'data1':charts[j]['CU']});
}
}
handle_mask(80,'Drawing charts',1);
}
});

prepaid_totals_grid = new Ext.ux.TouchGridPanel({
fullscreen : true,
id : 'grid_prepaid_totals',
store : prepaid_totals_store,
multiSelect : false,
colModel : [{
header : "Class",
mapping : "u_class",
style : "text-align: left;padding-left:10px;",
flex : 2
},{
header : "Type",
mapping : "u_type",
style : "text-align: right;padding-right:5px;",
flex : 2,
},{
header : "Current",
mapping : "current_users",
style : "text-align: right;"
},{
header : "",
mapping : "status",
style : "text-align: center;",
renderer : function(val) {
var arrow = "";
if (val == -1){ arrow="<img src=\"img/down_arrow.png\">"; }
if (val == 0){ arrow="<img src=\"img/equal.png\">"; }
if (val == 1){ arrow="<img src=\"img/up_arrow.png\">"; }
return arrow;
}
},{
header : "Change",
mapping : "difference",
style : "text-align: right;"
}]
});


}