PDA

View Full Version : Pie Chart Legend is only showing chart title



brazen
16 Jul 2012, 12:32 PM
The pie chart legend is showing the same text for every category, specifically whatever text I put in the chart title. How can I get the legend to correctly show the category name? Also, you'll notice the labels are not centered, but I don't really care for my purposes. I don't want the labels; I just added them to demonstrate the problem.

37204



series: [
{
type: 'pie',
label: {
field: 'category',
display: 'rotate',
contrast: true,
font: '12px Arial'
},
showInLegend: true,
title: 'Blood Glucose Summary',
angleField: 'percent',
colorSet: [
'#FF840F',
'#FFAE61',
'#65A227',
'#E27771',
'#EB2B1F'
]
}
],
legend: {
boxStrokeWidth: 0,
position: 'right'
}


it appears this may be related to recent changes to ExtJS. This seems to be a recurring issue with ExtJS 4.1 For one, even your demos aren't using the current syntax (for example, on the pie chart demo you are still using the 'field' attribute which apparently no longer exists; it's now 'angleField'). Second, all the great examples littered on this site, SO and the rest of the web no longer work (e.g. to assign custom colors to a pie chart you now use 'colorSet' instead of 'styles'). It's been a frustrating experience trying to prototype our application with documentation/samples that are no longer applicable.

scottmartin
17 Jul 2012, 2:07 PM
Please send a working example so we can review, as I do not see this behavior.

As for the field .. per the API:


field : String
Alias for angleField.

Scott.

EAHC-IT
20 Sep 2012, 3:24 AM
Hello,

I have the same behaviour...
If I set the title property of the serie (Ext.chart.series.Pie), the legend use that value to display for each.
If not set, the legend show the "field" property of the label object (Ext.chart.series.Series)

Regards
ps: extjs 4.1.1

dhorions
20 Jan 2014, 2:50 AM
This still seems to be the case in 4.2.2 :



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


Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 350,
animate: true,
store: store,
theme: 'Base:gradients',
legend : {},
series: [{
type: 'pie',
angleField: 'data',
showInLegend: true,
title:'test',
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'
}
}]
});

palakurthivishal
21 Jan 2014, 3:06 AM
Hello dhorions,
Don't assign a value to title attribute and check if it works. Like this,

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




Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 350,
animate: true,
store: store,
theme: 'Base:gradients',
legend : {},
series: [{
type: 'pie',
angleField: 'data',
showInLegend: true,
//title:'test',
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');
});
debugger;
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'
}
}]
});

dhorions
21 Jan 2014, 3:19 AM
I realize it works if you don't set a title attribute.
The issue is that it does not work when the title attribute is set. To me that looks like undesired behavior.

Not setting a title is a workaround I can live with, but it's not ideal.