PDA

View Full Version : Chart Reload Data Error



jkraft04
29 Sep 2011, 8:14 AM
I am able to display a chart in an Ext Window. I have a button on the tool bar of the window to update the data of the chart. No matter what I try when attempting to reload the data I get the message which says, "... is not a function". In the example below it says mychart.loadData is not a function. Please help. Thanks




var storeConfig = {
autoLoad: true,
fields: ['total', 'title'],
proxy: {
type: 'ajax',
url: '/dashboard/inbound/json',
actionMethods: {
read: 'POST'
},
reader: {
type: 'json',
root: ''
},
extraParams: {
date: '6/29/2011'
}
}
};
var store1 = new Ext.data.JsonStore(storeConfig);
Ext.onReady(function () {

var mychart = Ext.create('Ext.chart.Chart',{
xtype: 'chart',
id: 'myChart',
animate: true,
style: 'background:#fff',
shadow: false,
store: store1,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['total'],
title: false,
grid: true
//roundToDecimal: false
}, {
type: 'Category',
position: 'bottom',
fields: ['title'],
title: 'Shipment Status'
}
],
series: [{
type: 'column',
axis: 'left',
gutter: 80,
xField: 'title',
yField: ['total'],
//color renderer
stacked: true
}]
});

var storeConfigb = {
autoLoad: true,
fields: ['total', 'title'],
proxy: {
type: 'ajax',
url: '/dashboard/inbound/json',
actionMethods: {
read: 'POST'
},
reader: {
type: 'json',
root: ''
},
extraParams: {
date: '6/22/2011'
}
}
};

var win = Ext.create('Ext.Window', {
width: 800,
height: 400,
hidden: false,
maximizable: false,
title: 'Shipment Status',
renderTo: 'chart_div',
layout: 'fit',
tbar: [{
text: 'Update Chart Data',
handler: function() {

mychart.loadData(storeConfigb);
}
}],
items: [
mychart
]
});
});

jay@moduscreate.com
29 Sep 2011, 11:14 AM
First, you should try store1.loadData(REAL DATA).

Next, myChart.loadData is not a function. The store is responsible for loading the data. you're trying to force the chart to ingest a store configuration object. That's not going to work ;)

jkraft04
29 Sep 2011, 11:40 AM
Thanks, changed it to store1 with REAL DATA and it worked fine. But how do I pull the data via ajax? Is there a better way than a storeconfig. I tried store1.loadData(storeConfigb) and that gives me an error: "record.get not a function; rec = record.get(fields[i]);" It is on line 42651 of ext-all-debug.js.

In my php file I have the following:



$json_data = array();
foreach($days as $d){
$json_data[] = array('total' => $total, 'title' => $d);
}
echo json_encode($json_data);

jkraft04
3 Oct 2011, 10:28 AM
After much research I found a solution to reload the store of a chart using ajax. I built a quick function.



function reload_store(store,url,params){
Ext.require('Ext.data.Connection');
Ext.Ajax.request({
url: url, //var url = 'example.com';
params: params, //var params = { date: '10/03/2011' };
success: function(response){
var text = response.responseText;
// process server response here
store.loadData(Ext.decode(text));
}
});
}

skirtle
3 Oct 2011, 5:14 PM
The store can do that all for you. For remote data use load() rather than loadData():

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-load

You'll also need an Ajax proxy configured:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-cfg-proxy

jkraft04
4 Oct 2011, 7:32 AM
Thank you skirtle for your help. That looks so much better. :) So here is what I came up with:



var proxy = new Ext.data.Proxy({
type: 'ajax',
url: 'example.com',
actionMethods: {
read: 'POST'
},
reader: {
type: 'json',
root: ''
},
params: {
date: '10/04/2011',
type: ''
}
});

store.load(proxy);