PDA

View Full Version : Legend for a ColumnChart



crysfel
15 Sep 2009, 9:42 AM
Hi folks :D

Im playing around with charts, and it is really awesome!! but i have a question, how can i display a "friendly" legend in the column chart for each "serie"?

right now i have this:



//the Store
var store = new Ext.data.JsonStore({
fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
data: [
{year: 2004, comedy: 39000000, action: 53890000, drama: 38450000, thriller: 32060000},
{year: 2005, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000},
{year: 2006, comedy: 56703000, action: 38900000, drama: 12650000, thriller: 21000000},
{year: 2007, comedy: 42100000, action: 50410000, drama: 25780000, thriller: 23040000},
{year: 2008, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000}
]
});

//later...

new Window....

//the important code
items: {
xtype:'columnchart',
store: store,
xField: 'year',
series:[
{yField:'comedy'},
{yField:'action'},
{yField:'drama'},
{yField:'thriller'}
],
yAxis: new Ext.chart.NumericAxis({
displayName:'Money',
labelRenderer: Ext.util.Format.usMoney
}),
xAxis: new Ext.chart.CategoryAxis({
displayName:'Year',
labelRenderer: customFormat
}),
extraStyle:{
legend:{ //the legend!!
display: 'bottom',
padding: 5,
font:{
family: 'Tahoma',
size: 13
}
}
}

}
//...


http://www.extjs.com/forum/attachment.php?attachmentid=16217&stc=1&d=1253036176

As you can see in the above image the legend is at the bottom of the panel, but if you notice the label is a number for each color, so my question is:

how can i change that number for something more friendly? (something like "commedy", "action",...)

Thanks in advance!!

crysfel
17 Sep 2009, 3:54 AM
I have been reading the YUI documentation and i found the "legendLabelFunction" property:


legendLabelFunction - String
The string representation of a globally-accessible function that may be called by the SWF to format the labels of a Chart's legend.


http://developer.yahoo.com/yui/docs/YAHOO.widget.Chart.html#config_legendLabelFunction

but this doesn't work :(

crysfel
21 Sep 2009, 8:51 AM
I finally did it :D just define the "displayName" property for each item in the "series" array ;)

here is my code:



Ext.chart.Chart.CHART_URL = 'ext-3.0.0/resources/charts.swf';

Ext.onReady(function(){
var store = new Ext.data.JsonStore({
fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
data: [
{year: 2004, comedy: 39000000, action: 53890000, drama: 38450000, thriller: 32060000},
{year: 2005, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000},
{year: 2006, comedy: 56703000, action: 38900000, drama: 12650000, thriller: 21000000},
{year: 2007, comedy: 42100000, action: 50410000, drama: 25780000, thriller: 23040000},
{year: 2008, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000}
]
});

var win = new Ext.Window({
title: 'Char series example',
width:550,
height:350,
layout:'fit',
items: {
xtype:'columnchart',
store: store,
xField: 'year',
series:[
{yField:'comedy',displayName:'Comedy'},
{yField:'action',displayName:'Action'},
{yField:'drama',displayName:'Drama'},
{yField:'thriller',displayName:'Thriller'}
],
yAxis: new Ext.chart.NumericAxis({
displayName:'Money',
labelRenderer: Ext.util.Format.usMoney
}),
xAxis: new Ext.chart.CategoryAxis({
displayName:'Aņo',
labelRenderer: customFormat
}),
extraStyle: {
legend: {
display: 'bottom'
}
}
}
});

win.show();

function customFormat(value){
return 'Aņo: '+value;
}
});

gabbay
4 May 2010, 8:26 AM
Hi guys.... I did something like this, but now, I need do change the values from displayName dynamicaly using JS, how can I do it??