PDA

View Full Version : hide pie chart slices with 0 value



jdaum
11 Jun 2012, 7:56 PM
Hi,

is there an option or trick to hide Pie chart slices that have a value <= 0? I have a fixed set of colours to assign to my slices, so if any data is 0, I need to still deliver the data back from the store. Also, I want the Legend to contain the data.

Thanks for any pointers.

Kind Regards,

Jochen

scottmartin
12 Jun 2012, 9:01 AM
Can you provide more info on what you want to happen when the value is <= 0.
When happens now vs what you want.

When I set to 0,null,undefined .. I still see the label (albeit just a label) and it is in the legend.

Scott.

jdaum
12 Jun 2012, 2:37 PM
Hi,

I wasn't specific enough. I have no slice, because the value is 0, but the slice label is still there. Here is my config:


Ext.create('Ext.chart.Chart', {
height: 430,
width: 430,

series: [{
type: 'pie',
angleField: 'value',
colorSet: ["#afc51a","#f4b12f","#c00f18"],
label: {
field: 'name',
display: 'rotate',
contrast: true
},
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
store.each(function(rec) {
total += rec.get('value');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('value') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
},
animate: true

}],

store: store,

renderTo: 'graph'
});

})


See my pie chart below. If Green=0 i need to somehow hide that label.

Thanks for your help.
36171

scottmartin
15 Jun 2012, 6:37 PM
Please try the following:



var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data': 0 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 10 }
]
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 350,
animate: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'data',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
},
renderer: function(sprite, record, attributes, index, store){
console.log(record);
if (record.data.data === 0) { record.data.name = ''; }
}
}]
});?


Regards,
Scott.

jdaum
20 Jun 2012, 3:39 PM
Hi Scott,

this soluition does remove the labels when the value is 0, but it also somehow stops the chart from being redrawn.

For example, one set of data shows the first Pie chart.

When I then filter for something that is only going to return Red, the labels are removed, but the chart is still the same.

Only when I reload the page with the same filters, I get the fully red chart.

My reload code is here:


Ext.get('filterChart').on('click', function() {

store.getProxy().extraParams = Ext.Object.fromQueryString(
Ext.Element.serializeForm(Ext.get('filter'))
);

store.load();
});


I tried to add in Ext.get('Chart').drawSeries(); in there, which hasn't helped.

michaelsanford
8 Jul 2013, 12:54 PM
In case this also becomes an issue for viewers of this thread: one should also return the `attributes` object from the renderer.

More information here: http://www.sencha.com/forum/showthread.php?267350-Adding-renderer-to-pie-chart-obliterates-shadow