PDA

View Full Version : Data stores for pie chart



JonasTG
1 Apr 2011, 1:38 AM
Hello,

I'm trying to establish a xml as a data source for a circular graph but I have some problems. First of all, I noticed that the pie chart does not render correctly on different browsers (IE8, FF, Chrome), to fix it is necesary to specify the height attribute!!

The major problem is related to the data source, from Ext Designer I created a XmlStore, which loads the xml info (correctky from Ext Designer), but bounding the xmlstore to the pie chart, it doesn't render correctly.

I've done three tests. The first, with a datasource hardcoded, then with a json store and finally to the model that ext designer generates, but the latter doesn't work. It is more correct to use the first model? or is it a bug?

Here is the xml model:

<ROWSET>
<stats>
<state>'OK'</state>
<total>129</total>
</stats>
<stats>
<state>'Errors'</state>
<total>61</total>
</stats>
</ROWSET>

And here is the example code:

var recordSG = Ext.data.Record.create([
{name: 'state', mapping: 'state'},
{name: 'total', mapping: 'total'}
]);

var readerSG = new Ext.data.XmlReader({
record: "stats",
id: "state"
}, recordSG);

var storeSG = new Ext.data.Store({
url: 'data/grafica.xml',
autoLoad: true,
reader: readerSG
});

var storeSG_json = new Ext.data.JsonStore({
fields: ['state', 'total'],
data: [
{
state: 'OK',
total: 129
},{
state: 'Eventos esperados',
total: 61
},{
state: 'Erróneos',
total: 17
},{
state: 'Inc. horario',
total: 8
},{
state: 'Espera ref. ext.',
total: 12
},{
state: 'Rslto. por sistema',
total: 26
}]
});

var storeSG_xml = new Ext.extend(Ext.data.XmlStore, {
constructor: function(cfg) {
cfg = cfg || {};
StoreGrafica.superclass.constructor.call(this, Ext.apply({
storeId: 'varStoreGrafica',
url: 'data/grafica.xml',
autoLoad: true,
record: 'stats',
autoSave: false,
idPath: 'total',
fields: [
{
name: 'state',
mapping: 'state'
},
{
name: 'total',
mapping: 'total'
}
]
}, cfg));
}
});

MyContainerUi = Ext.extend(Ext.Container, {
width: 400,
height: 400,
id: 'container',
title: 'prueba',
style: 'background-color: Red; border: 1px solid Black;',
initComponent: function() {
this.items = [
{
store: storeSG, //storeSG -> works!, storeSG_json -> works!, storeSG_xml -> doesn't work!!!
xtype: 'piechart',
title: 'data',
dataField: 'total',
categoryField: 'state',
//extra styles get applied to the chart defaults
extraStyle:
{
legend:
{
display: 'left',
padding: 1,
font:
{
family: 'Tahoma',
size: 12
}
}
}
}
];
MyContainerUi.superclass.initComponent.call(this);
}
});

JonasTG
3 Apr 2011, 11:41 PM
nothing ¿?