PDA

View Full Version : How to enable callouts for Pie chart



webdreamerkid
4 Oct 2013, 1:09 AM
Hi

How can I enable callouts for pie chart? I included the following piece of code (just a snapshot), but it doesn't work.



series: [
{
listeners: {
'labelOverflow': function (label, item) {
item.useCallout = true;
}
},
// Example to return as soon as styling arrives for callouts
callouts: {
renderer: function (callout, storeItem) {
callout.label.setAttributes({
text: storeItem.get('name')
}, true);
},
filter: function () {
return false;
},
box: {
//no config here.
},
lines: {
'stroke-width': 2,
offsetFromViz: 20
},
label: {
font: 'italic 14px Arial'
},
styles: {
font: '14px Arial'
}
}
}
]

greg.barry
11 Oct 2013, 12:20 PM
This feature was recently added in ExtJS 4.2.2.

You can create your callouts like this:



Ext.onReady(function() {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [{
'name': 'Mg1gM',
'data': 10
}, {
'name': 'Mg2gM',
'data': 12
}, {
'name': 'Mg3gM',
'data': 95
}, {
'name': 'Mg4gM',
'data': 40
}, {
'name': 'Mg5gM',
'data': 10
}, {
'name': 'Mg6gM',
'data': 100
}, {
'name': 'Mg7gM',
'data': 27
}]
});

var total = 0;

store.each(function(rec) {
total += rec.get('data');
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 1200,
height: 800,
margin: 50,
insetPadding: 180, // leave space for labels above and below the pie chart
style: {
border: "1px solid red"
},
animate: true,
store: store,
legend: {
position: 'right'
},
series: [{
type: 'pie',
angleField: 'data',
showInLegend: true,
donut: 30,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 40
}
},
label: {
field: 'name',
font: '48px Arial',
color: 'blue', // hex color | css color name | TBD:auto (same color as the pie slice)
contrast: true,
padding: 50,
display: 'outside', // inside | outside | rotate | TBD:rotateAuto (rotate if enough room, otherwise outside)
calloutLine: {
width: 8,
// color: 'black',
// length: 40
}
}
}]
});
});


Thanks!
Greg