PDA

View Full Version : Problems using Pie Chart



dschreck
11 May 2014, 11:36 PM
Hello,

I'm new on ExtJS and I'm trying to display a pie chart inside my application but I'm facing some difficulties, maybe you guys can help ?

First of all here is the code I'm using:



Ext.define('DCW.InextPieChart', {
extend: 'Ext.chart.Chart',
alias: ['widget.inextpiechart'],
constructor: function(config) {

var me = this;

/** Definition of a single model for all barChart inputs */
var model = Ext.define('ChartModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'value', type: 'numeric'},
{ name: 'code', type: 'string'}
]
});

var store = new Ext.data.Store({
autoLoad: true,
model: model,
data: [
{ 'code': 'metric one', 'value': 10 },
{ 'code': 'metric two', 'value': 7 },
{ 'code': 'metric three', 'value': 5 },
{ 'code': 'metric four', 'value': 2 },
{ 'code': 'metric five', 'value': 15 }
]
});

// Set display mode boolean fields
Ext.apply(me, {

autoSize: true,
renderTo: config.id,
animate: true,
store: store,
legend: {
position: 'right',
visible: true
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'value',
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('value');
});
this.setTitle(storeItem.get('code') + ': ' + Math.round(storeItem.get('value') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
display: 'rotate',
field: 'code',
contrast: true,
font: '15px Arial'
}
}]
});
// Call superclass constructors
me.callParent([config]);
}
});



Using this, I'm facing the following issues:


- The slices does not animate on hover
- The Tips are not displayed
- The slices DOES animate when hovering in the legend, but not towards the outside.
- The legend is displayed on top of the slice



48978



Can you guys indicates me what I'm doing wrong ?

Regards,

David S.

Gary Schlosberg
13 May 2014, 5:01 PM
Seems to work OK in this doc example.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.chart.series.Pie

In which version of ExtJS are you seeing this?

dschreck
13 May 2014, 10:25 PM
Hello,

I am using the version 4.2.2.1144.

I'm extending the Chart class, as I have done with the BarChart (with success).
Basically What I've used as config/parameters were the same as in the example except for the
'renderTo' that refers the the 'div' id instead of Ext.getBody() and that I must use "autoSize: true" because if I do not use it, nothing is displayed.

Regards,

David

dschreck
14 May 2014, 1:34 AM
I've finally manage to display everything as I wanted to: instead of extending Chart, I now extends Panel and put the PieChart into it.