PDA

View Full Version : Display conflict between chart Pie and chart column/line



apple-geek
19 Apr 2012, 9:09 AM
Hello!

I have defined a comboBox who contains a list of charts.
The action of its "select" event is to create a chart and to add this chart in a panel.
In the list, there are pie chart, line chart and column chart.
My first problem is after displaying a pie chart, it seems that the action of combo box is disabled. I can no longer display any other chart.
My second problem is after displaying a column or a line chart, I can no longer display any pie chart.
Here is my codes of comboBox action:

}
self.comboCheck=function (panel,index ){
var chartNom=self.chartNom[index];
var type=self.chartConfig[chartNom]["Type"];
var x=self.chartConfig[chartNom]["X"];
var y=self.chartConfig[chartNom]["Y"];
var color=self.chartConfig[chartNom]["Color"];


switch (type){


case "line":

var chart= new Ext.chart.LineChart({
id:'chart',
store: self.store,
xField: x,
xAxis: new Ext.chart.CategoryAxis({
title: x }
yField: y,
listeners: {
itemclick: function(o){
var rec = self.store.getAt(o.index
);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get(x));
}
}
});
break;


case 'column':

var chart= new Ext.chart.ColumnChart({
id:'chart',
store: self.store,
xField: x,
xAxis: new Ext.chart.CategoryAxis({
title: x
}),
yField: y,
extraStyle:{
xAxis:{
labelRotation:50 },
padding: 20,
border: {
color: "yellow",
size: 2
},
font: {
name: "Verdana",
color: 0x995566,
size: 12
}
},
listeners: {
itemclick: function(o){
var rec = self.store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get(x));
}} });
break;


case 'pie':

var dataPie=[];
var categoryFields=self.store.collect(x);
var dataFields=self.store.collect(y);
for(i=0;i<categoryFields.length;i++){
var item={};
item['X']=categoryFields[i];
item['Y']=dataFields[i];
dataPie.push(item);
}
var storecharte=new Ext.data.JsonStore({
fields: ['X', 'Y'],
data:dataPie
});
var chart=new Ext.chart.PieChart({
store:storecharte,
dataField:"Y",
categoryField:"X",
extraStyle:{
legend: {
display: 'bottom',
padding: 5,
font: {
family: 'Tahoma',
size: 13
}
}}});
break;
}
panel.add(chart);
}




Thanks for your help !!

scottmartin
24 Apr 2012, 9:00 AM
I did not see any reference to your combo, so I am unable to determine why it is disabled after selection. Perhaps you can trace through your code and see if there is a reason?

As for the chart, I would suspect that you may be having a problem after the first load because you are hard coding the 'id' for your charts. Please comment this out and see if this helps.

id: 'chart'

Regards,
Scott.

apple-geek
25 Apr 2012, 1:01 AM
Thanks a lot !!! It is exactly the problem of ID, because I destroy the chart of ID "chart" before display an other chart in the same panel. Thanks a lot !!