PDA

View Full Version : Bar chart problem with external store



kalya
3 Nov 2011, 1:36 AM
Hi guys! I have the problem: when i use fixed data for the store everything works fine, but when i am trying to get data via proxy - does nothing. Here is my code for the store and cahrt



var store = new Ext.data.Store( {
fields: ['name','data1'],
proxy: {
type: 'ajax',
url: data_url,
reader: 'json' },
autoLoad:true });


var chart = {
xtype: "chart", theme: "Stats", store: store, width: 300, height: 500, animate: true,
axes: [
{ type: "Category", position: 'left', title: "Places", fields: [ "name" ] },
{ type: "Numeric", position: 'bottom', title: "CTR", fields: [ "data1" ], grid: true, minimum: 0 } ],
series: [
{type: "bar", axis: "bottom", xField: "name", yField: ["data1"],
tips: { trackMouse: true, width: 140, height: 28,
renderer: function(storeItem) { this.setTitle(storeItem.get('data1') + ' data1') } } } ] };

return chart;
json return
[ {"name":"banner_1","data1":0.15}, {"name":"banner_2","data1":0.12}]

Please guys help me! I've been stucked with this for 3 days

mitchellsimoens
3 Nov 2011, 6:10 AM
Have you checked out the examples? I made the custom bar chart to work with your data.

kalya
3 Nov 2011, 6:12 AM
Sure I read it. But in the example is used fixed json data. In such case my charts are working, but when i change it to proxy, it stop working! this is the point

mitchellsimoens
3 Nov 2011, 6:16 AM
Sure I read it. But in the example is used fixed json data. In such case my charts are working, but when i change it to proxy, it stop working! this is the point

I changed the store to run off a php script and it worked for me.

kalya
3 Nov 2011, 6:17 AM
could you give a me a link please??

mitchellsimoens
3 Nov 2011, 6:23 AM
could you give a me a link please??


var store = Ext.create('Ext.data.Store', {
autoLoad : true,
fields : ['name', 'data1'],

proxy : {
type : 'ajax',
url : 'data.php',
reader : {
type : 'json
}
}
});

kalya
3 Nov 2011, 6:25 AM
my code above is the same, and my charts are not working. php script return valid json string. What's wrong? i dont know how to make it work. I tried everthing i found but nothing is working

mitchellsimoens
3 Nov 2011, 6:28 AM
Are you getting an error? Maybe that renderer is not defined on your category axis?

kalya
3 Nov 2011, 6:31 AM
no error. i defined series with renderer

series: [{ type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('data1') + ': ' + storeItem.get('data2') + ' views');
}
},
xField: 'data1',
yField: ['data2']
}]

fschaeffer
3 Nov 2011, 10:10 PM
Please compare both JSON returns if they are exactly the same. I once had a similar issue where the proxy returned my numeric values encoded as string. This yielded to a not shown bar chart. When I changed the field definition to int in the model everything was working again.

kn21069
9 Nov 2011, 2:28 PM
Just like mitchellsimoens, I was able to use the external data provided just fine. However, I wasn't able to get the code to work with the return to bring up the chart. Instead, you might be looking to put the chart into a panel or window as it's item.

Also, I was not able to get the chart to work with the theme config. Once I took it out it worked just fine. Here's how I got it to work, and this may be what you're looking for.

app.js

var store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['name', 'data1'],

proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json'
}
}
});


var chart = {
xtype: 'chart',
store: store,
width: 300,
height: 500,
animate: true,
axes: [{
type: 'Category',
position: 'left',
title: 'Places',
fields: ['name']
}, {
type: 'Numeric',
position: 'bottom',
title: 'CTR',
fields: ['data1'],
grid: true,
minimum: 0
}],
series: [{
type: 'bar',
axis: 'bottom',
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem) {
this.setTitle(storeItem.get('data1') + ' data1')
}
},
xField: 'name',
yField: ['data1']
}]
};

Ext.create('Ext.panel.Panel', {
width: 300,
height: 500,
renderTo: Ext.getBody(),
layout: 'fit',
items: [chart]
});

data.json

[
{"name": "banner_1", "data1": 0.15},
{"name": "banner_2", "data1": 0.12}
]

Like this the chart can be called up in the item of windows, panels, etc pretty easily.
Hopefully this helps out.