PDA

View Full Version : Pie Chart does not show anything



ektanit
29 Apr 2009, 8:05 AM
I am having problems in generating the pie chart. Can someone check the code and advise where I am going wrong. This is what I am trying to achieve. When I click on Display Chart button, the request is sent to the server which executes a stored procedure and returns the summarized data of an object say flowers to the store. I then use this store to show the data on the chart. each flower is characterised having same color, type For ex flowers with red color , rose are 10 in total. Flowers with yellow color and sunflower are 20 in total. So I would like to have two pies in the pie chart showing a distribution of 10 and 20.




new Ext.Button({
text: 'Display Chart',
renderTo: 'chartButton',
handler: function() {
LoadAndShowChart();
}

});

var chartstore = new Ext.data.JsonStore(
{
url: '/ext/testServlet',
root: 'chart.data',
baseParams: {'action': 'fetchChartData'},
fields: [
,{name: 'color', type: 'string'}
,{name: 'lots', type: 'int'}
,{name: 'type, type: 'string'}
]
});



var piecht = new Ext.Panel({
iconCls:'chart',
title: 'ExtJS.com',
frame:true,
width:600,
height:300,
layout:'fit',
items: {
xtype: 'piechart',
store: chartstore
},
url:'../../resources/charts.swf'
});

function LoadAndShowChart(combovalue,clientcombo){
piecht.render(document.getElementById('pchart'));
chartstore.load();
}

Animal
29 Apr 2009, 9:29 AM
Has the store loaded? When you examine it in Firebug, does it have any Records in it?

Or does it fire a loadexception?

ektanit
29 Apr 2009, 9:36 AM
It loads successfully but I do not see anything on the chart. I clearly see two records in Firebug but nothing on the chart.

I have a doubt here. How does the pie chart that it has to show lots on its surface. Is there something I am missing in the config.

Animal
29 Apr 2009, 10:37 AM
In your chart config, try

dataField: 'lots'

ektanit
29 Apr 2009, 10:52 AM
I tried Animal but still does not work. Line chart works so well with the same datasource but the pie chart is just not showing anything.




/*var piecht = new Ext.Panel({
iconCls:'chart',
title: 'ExtJS.com',
frame:true,
width:600,
height:300,
layout:'fit',
items: {
xtype: 'linechart',
store: chartstore,
xField: 'type',
yField: 'lots',
},
url:'../../resources/charts.swf'
});
*/
var piecht = new Ext.Panel({
iconCls:'chart',
title: 'ExtJS.com',
frame:true,
width:600,
height:300,
layout:'fit',
items: {
xtype: 'piechart',
store: chartstore,
dataField: 'lots'
},
url:'../../resources/charts.swf'
});

ektanit
29 Apr 2009, 1:54 PM
I noticed very few items that the pie chart does show up and then wipes out. This happened may be 1 in 50 times. It is something strange and I am not able to figure the error out. I even put an alert to the callback method on loadSuccessful for the datastore and the alert shows up everytime. Please , can anyone help. On the contrary there are no problems seen while generating the line chart.




chartstore.on('load', loadChartSuccessful);
function loadChartSuccessful(store, recordArray, options) {
alert('Loaded');
}

ektanit
30 Apr 2009, 6:11 AM
Any help on this please. This is just not working and I really do not understand how to debug this more.

ruchika
30 Apr 2009, 7:24 AM
Hi,

Me too getting the same problem. Using mozilla i can see that the data is present in the datastore but it is not reflecting in the chart.

crxtech
4 May 2009, 7:35 AM
fields: [
,{name: 'color', type: 'string'}
,{name: 'lots', type: 'int'}
,{name: 'type', type: 'string'}
]


You are missing the single quote I added in red, not sure if that will help or not...

crysfel
7 May 2009, 8:19 AM
I just do this:



var data = [['Ext JS',115000],['jQuery',250100],['Prototype',150000],['mootools',75000],['YUI',95000],['Dojo',20000],['Sizzle',15000]];

var store = new Ext.data.ArrayStore({
fields:[{name:'framework'},{name:'users', type:'float'}]
});
store.loadData(data);

var pieChart = new Ext.chart.PieChart({
store: store,
url:'../ext-3.0-rc1/resources/charts.swf',
dataField: 'users' // <-- this is very important!!
});


var win = new Ext.Window({
title: 'Pie chart example',
width:450,
height:300,
bodyStyle: 'background-color:#fff',
items:[pieChart]
});

win.show();

this works like a charm

ruchika
10 Jun 2009, 1:40 AM
Hi,
I tried the example as mentioned below and it works fine with hardcoded data but doesnt show any output when i fetch data at runtime. Please let me know if there is anything wrong in my code. I am able to see the data loading to the store using mozilla.


var pieCht = new Ext.chart.PieChart({
store: firstchartstore,
xtype: 'piechart',
url:'../../resources/charts.swf' (http://extjs.com/forum/'../../resources/charts.swf'),
dataField: 'value' // <-- this is very important!!
});

var exChart = new Ext.Panel({
iconCls:'chart',
title: 'Pie Chart Example',
frame:true,
width:500,
height:300,
layout:'fit',
items:[pieCht]
});

function LoadAndShow(){
exChart.render(document.getElementById('Chart'));
var urlStr = '/ext/testServlet?action=listValues';
Ext.Ajax.request({
url: urlStr,
success: function(response) {
var data = splitResponse( response);
firstchartstore.loadData(data);
}
});
}

chraZ
15 Jan 2010, 4:33 AM
Hi,

i've got the same problem. I think the problem is in the method "onRender" of Ext.FlashComponent. After calling "swfobject.embedSWF" "this.swf" will be set, but sometimes the value is the html div element and not the flash object.

My solution is to reset this.swf in the event handler for "swfReady" event, see below.

Hope it will help.


Ext.override(Ext.chart.Chart, {
onSwfReady : function(isReset){
this.swf = Ext.getDom(this.id);

Ext.chart.Chart.superclass.onSwfReady.call(this, isReset);
this.swf.setType(this.type);

if(this.chartStyle){
this.setStyles(Ext.apply({}, this.extraStyle, this.chartStyle));
}

if(this.categoryNames){
this.setCategoryNames(this.categoryNames);
}

if(this.tipRenderer){
this.setTipRenderer(this.tipRenderer);
}
if(!isReset){
this.bindStore(this.store, true);
}
this.refresh.defer(10, this);
}
});