PDA

View Full Version : Showing multiple field values in Pie label and legend



Achim74
18 Sep 2011, 12:10 PM
Hi there !

I have a Pie chart with a store. The store contains two fields "machine" and "total". The pie chart shows fine. The "machine" field ist displayed in the label and the legend.

But I would like to show someting like: "Machine [machine] has [total] projects" in the legend. Therefore I need both fields from the store (something like in my example the renderer for the tips). Is that possible? Hope I described it well..

Thank you in forward.

Greetings
Achim

Here is my code:



Ext.define('Machine', {
extend: 'Ext.data.Model',
fields: ['id', 'machine', 'total']
});

//The Store contains the AjaxProxy as an inline configuration
var StatisticChartStore = Ext.create('Ext.data.Store', {
model: 'Machine',
proxy: {
type: 'ajax',
url : '/stats/machine'
}
});

StatisticChartStore.load();

var donut = false,
panel1 = Ext.create('widget.panel', {
width: 800,
height: 600,
renderTo: "chart1",
layout: 'fit',
items: {
xtype: 'chart',
id: 'chartCmp',
animate: true,
store: StatisticChartStore,
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [
{
type: 'pie',
field: 'total',
dataField: 'total',
categoryField: 'machine',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('machine') + ': ' + storeItem.get('total') + ' projects');
}


},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'machine',
display: 'rotate',
contrast: true,
font: '18px Arial',
renderer: function(v) {
//console.log(v);
return v;
}
}
}
]

}
});
});

Achim74
20 Sep 2011, 10:57 AM
No ideas? I would like to do it without changing the data source. Of course I could also output a manual list but that is not so nice. In the legend you see the according colors.

donnerchen
26 Sep 2011, 12:07 PM
Didn't test it but this override should work:


Ext.override(Ext.chart.series.Pie,
{

initialize: function() {
var me = this,
store = me.chart.substore || me.chart.store;
//Add yFields to be used in Legend.js
me.yField = [];
if (me.label.field) {
store.each(function(rec) {
var myString = 'Machine '+rec.get(me.label.fieldMachine)+' has '+rec.get(me.label.fieldCount)+' projects';
me.yField.push(myString);
});
}
}
});


this is for sure a dirty workaround and really ugly, be aware of using it with another charts/legends.
A cleaner way to do this would be a new field in your model i.e. legendText, which gets from the backend the formated string, this field you would pass to the label object.




label: { field: 'legendText', }

skirtle
27 Sep 2011, 1:14 AM
As far as I can tell the field specified in the label section will be used for both the label and the legend but the renderer is only applied to the label, which is a bit irritating. I don't see any way to customize the legend items.

I think I'd do this by adding an extra field with a convert function to generate it from the other fields. There's no need to return it from the server.