Tengo la necesidad de realizar una actualizacion asynchrona de datos y mostrarlos en un una grafica (Ext.chart.Chart), al dibujar la grafica y llenar el store por primera vez no tengo problema, pero al momento de actualizat el store no logro hacer que la grafica muestre los datos.
Por lo que eh leido creo que tiene que ver con data.push pero realmente no se que es eso.
de ante mano agradezco su apoyo. y les dejo mi codigo.
- Código: Seleccionar todo
Ext.onReady(function() {
var store = null;
store = new Ext.data.Store({
id:'graphicStore',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'graphics.php',
reader: {
type: 'json',
root: 'root',
totalProperty: 'total'
}
},
fields: [
{
name: 'sucursal',
type: 'auto'
},
{
name: 'reportes',
type: 'auto'
}
]
});
var graphic = null;
var initComponent = function(){
Ext.define('Reportes', {
extend: 'Ext.data.Model',
fields: [
{name: 'sucursal', type: 'string'},
{name: 'reportes', type: 'string'}
]
});
store = Ext.create('Ext.data.Store', {
model: 'Reportes',
proxy: {
type: 'ajax',
url : 'graphics.php',
reader: {
type: 'json',
root: 'root'
}
},
autoLoad: true
});
//Aqui es donde me quede, se que la data se actualiza pero no logro hacer que se actualice la grafica
//Ext.MessageBox.alert('Contenido Request', store);
}
var task = {
run: initComponent,
interval: 5000 //intervalo de 5 segundos
}
var runner = new Ext.util.TaskRunner();
runner.start(task);
graphic = Ext.create('Ext.chart.Chart', {
title: 'Reportes por ciudad',
store: store,
width: 900,
height: 400,
animate: true,
shadow: true,
insetPadding: 20,
theme: 'Category2',
region: 'center',
axes: [{
type: 'Category',
fields: ['sucursal'],
position: 'bottom',
title: 'Sucursales'
},
{
type: 'Numeric',
fields: ['reportes'],
position: 'left',
title: 'Reportes'
}
],
series: [{
type: 'column',
label: {
display: 'insideEnd',
field: 'reportes',
color: '#333',
'text-anchor': 'middle'
},
title: 'Convertidores',
xField: 'sucursal',
yField: [
'reportes'
]
}],
renderTo: Ext.getBody(),
});
});

