PDA

View Full Version : how to Hide Zero value labels in Piechart



srinivasan1987
24 Dec 2012, 5:14 AM
Hi all,

Below is the pie chart creation code.I want to hide the Zero values label so that i can avoid the overlapping of labels in chart. But i seen solution from Sencha forum.But i cant implement that in my chart. Any one help in this ? ....

ExtJs Code:

Ext.define('StatusTypes', {{
extend: 'Ext.data.Model',
fields: [
{{ name: 'StatusType', type: 'string' }},
{{ name: 'StatusTypeCount', type: 'int' }}
],
groupField: 'StatusTypeCount'
}}
);

var StatusTypeStore = Ext.create('Ext.data.Store', {{
model: 'StatusTypes',
data: [
{{ StatusType: "OK", StatusTypeCount: {8} }},
{{ StatusType: "WARNING", StatusTypeCount: {0} }},
{{ StatusType: "BREACHED", StatusTypeCount: {0} }},
{{ StatusType: "ERROR", StatusTypeCount: {0} }}
]
}}
);


var SimplePieChart =
Ext.create('Ext.chart.Chart',
{{xtype: 'chart',
id: 'chartCmp',
animate: true,
store: StatusTypeStore,
shadow: true,
legend: {{position: 'right'}},
insetPadding: 30,
theme: 'Base:gradients',
series: [{{type: 'pie',
field: 'StatusTypeCount',
showInLegend: true,
donut: false,
label: {{field: 'StatusType',
display: 'rotate',
contrast: true,
font: '12px Arial',
}}
,
tips: {{trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {{//calculate percentage.
var total = 0;
StatusTypeStore.each(function(rec) {{total += rec.get('StatusTypeCount');}});
this.setTitle(storeItem.get('StatusType') + ': ' + Math.round(storeItem.get('StatusTypeCount') / total * 100) + '%');
}}
}}
,
highlight: {{ segment: {{margin: 25}}}}


}}]
}}
);

http://www.sencha.com/forum/clear.gif (http://www.sencha.com/forum/editpost.php?p=924060&do=editpost)

mitchellsimoens
26 Dec 2012, 8:40 AM
Your code is not valid JavaScript. Please fix the syntax, wrap in BBCode CODE tags and then I can try to use your code to see what is going on that you want changed.

srinivasan1987
26 Dec 2012, 10:21 PM
Hi mitchell,

Below is the Pie chart code which is under BBCode format.

Ext.define('StatusTypes', {
extend: 'Ext.data.Model',
fields: [
{ name: 'StatusType', type: 'string' },
{ name: 'StatusTypeCount', type: 'int' }
],
groupField: 'StatusTypeCount'
}
);

var StatusTypeStore=Ext.create('Ext.data.Store', {
model: 'StatusTypes',
data: [
{ StatusType: "OK", StatusTypeCount: {8} },
{ StatusType: "WARNING", StatusTypeCount: {0} },
{ StatusType: "BREACHED", StatusTypeCount: {0} },
{ StatusType: "ERROR", StatusTypeCount: {0} }
]
}
);


var SimplePieChart =
Ext.create('Ext.chart.Chart',
{xtype: 'chart',
id: 'chartCmp',
animate: true,
store: StatusTypeStore,
shadow: true,
legend: {position: 'right'},
insetPadding: 30,
theme: 'Base:gradients',
series: [{type: 'pie',
field: 'StatusTypeCount',
showInLegend: true,
donut: false,
label: {field: 'StatusType',
display: 'rotate',
contrast: true,
font: '12px Arial',
}
,
tips: {trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {//calculate percentage.
var total=0;
StatusTypeStore.each(function(rec) {total += rec.get('StatusTypeCount');});
this.setTitle(storeItem.get('StatusType') + ': ' + Math.round(storeItem.get('StatusTypeCount') / total * 100) + '%');
}
}
,
highlight: { segment: {margin: 25}}


}]
}
);