PDA

View Full Version : chart not loading with JSON?



crxtech
4 May 2009, 11:56 AM
I've taken the carts example and changed it to use JSON, however with JSON it doesn't load and gives me the error "Record is undefined".

Here is my ds:

var cstore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url:'JSON/logGraphJSON.cfm'
}),
reader: new Ext.data.JsonReader({
root: 'data'
}, Ext.data.Record.create([
{name: 'Country_actions'},
{name: 'Country_Name'}
])
)
});
cstore.load();
and what is loaded:

({success: true, data:[{Country_actions:117,Country_Name:"BENIN"},{Country_actions:1,Country_Name:"PAKISTAN"
},{Country_actions:348,Country_Name:"ETHIOPIA"},{Country_actions:14,Country_Name:"SEAPRO REGIONAL OFFICE"
},{Country_actions:2,Country_Name:"GUATEMALA"},{Country_actions:108,Country_Name:"LIBERIA"}]})

but if I paste the JSON in the JS like this it works fine:

var cstore = new Ext.data.JsonStore({
fields:['Country_actions', 'Country_Name'],
data:[
{Country_actions:117,Country_Name:"BENIN"},
{Country_actions:1,Country_Name:"PAKISTAN"},
{Country_actions:348,Country_Name:"ETHIOPIA"},
{Country_actions:14,Country_Name:"SEAPRO"},
{Country_actions:2,Country_Name:"GUATEMALA"},
{Country_actions:108,Country_Name:"LIBERIA"}
]
});

Anyone see what is wrong with my JSON or DS?

carol.ext
5 May 2009, 5:35 AM
Store: JsonStore creates a JsonReader for you using the config options passed in, but does NOT using the reader you created. So, the reader that the JsonStore creates does not know about the record you passed to the reader you created. Easiest fix there is to use Ext.data.Store rather than JsonStore.

JSON: You do not have a root 'data' in your data. Take a look at the example in the JsonReader API (http://extjs.com/deploy/ext-3.0-rc1.1/docs/?class=Ext.data.JsonReader).

crxtech
5 May 2009, 5:47 AM
I also noticed that the charts example only works in FF, it randomly works in IE 8 and in chrome I get a warning the the plugin isn't responding and the charts don't load...

crxtech
5 May 2009, 5:54 AM
JSON: You do not have a root 'data' in your data. Take a look at the example in the JsonReader API (http://extjs.com/deploy/ext-3.0-rc1.1/docs/?class=Ext.data.JsonReader).

What do you mean I don't have a root 'data' in my data?
({success: true, data:[{

Animal
5 May 2009, 6:17 AM
Just use Ext.data.Store.

crxtech
5 May 2009, 6:45 AM
using Ext.data.Store worked, thanks

carol.ext
5 May 2009, 7:52 AM
What do you mean I don't have a root 'data' in my data?
({success: true, data:[{

Sorry, my bad. I was looking at the wrong thing, when you included JSON in your store.

jamilforext
18 May 2009, 4:39 PM
using Ext.data.Store worked, thanks
can you post a working chart working with data.Store

shane_china
18 May 2009, 5:34 PM
({success: true, data:[{

I thought may be the reason is the "(", without the "(" left and the ")" right then try it.

jamilforext
19 May 2009, 2:51 AM
Ext.onReady(function(){

//This portion of code works and I just copied the output of my scoredata.php file after which is data:[{...}]
var store = new Ext.data.JsonStore({
fields:['label', 'total'],
data:[{"label":"A", "total":"7"},{"label":"B","total":"3"},{"label":"C","total":"4"}]
});

//This portion od code doesnt work ????
/*var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:'scoredata.php' (http://extjs.com/forum/'scoredata.php')
}),
reader: new Ext.data.JsonReader({
root: 'data'
}, Ext.data.Record.create([
{name: 'label'},
{name: 'total'}
])
)
});*/
//store.load();
new Ext.Panel({
title: '',
renderTo: 'container',
width:500,
height:300,
layout:'fit',
items: {
xtype: 'columnchart',
store: store,
xField: 'label',
yField: 'total',

}
});

});]

ektanit
19 May 2009, 8:38 AM
Hi, can you suggest me any help for my problem

http://extjs.com/forum/showthread.php?t=68919

I even tried to use a simple store and then create a JSON reader. MY JSON Response for a HashMap looks like



{"firstchart":{"chartData":{"BLACKRCK":2983,"GSAM2":542},"message":"Successfully retrieved chart data","success":true}}
I want to display a column chart which will have two columns as seen from the data above.

Here is my store and chart configuration



var firstchartstore = new Ext.data.Store(
{
reader: new Ext.data.JsonReader({
root: 'firstchart.chartData'},
Ext.data.Record.create([
{name: 'name'},
{name: 'lots'}
])
)
});

var piecht = new Ext.Panel({
iconCls:'chart',
title: 'Bar chart - Client Vs Lots for trade data ',
frame:true,
//renderTo: document.body,
width:500,
height:300,
layout:'fit',

items: {
xtype: 'columnchart',
store: firstchartstore,
xField: 'name',
series: [{
type: 'column',
displayName: 'Maximum number of Lots',
yField: 'lots',
style: {
image:'bar.gif',
mode: 'stretch',
color:0x99BBE8
}
}],
url:'../../resources/charts.swf'
}
});