• Publicidad (ayudanos a mantener el Foro haciendo un click sobre la misma)
  • Cuixer, una forma de administrar páginas web que nunca viste!

 Tema solucionado Refresh de graficas ExtJS 4

Foros generales de ayuda Ext 4.0.

Ext.foro.Nuevo
Mensajes: 2
Registrado: 12 Feb 2012, 21:28
NotaPublicado: 12 Feb 2012, 21:56
Saludos compañeros, acabo de iniciar hace poco con este maravilloso framework y espero poder contribuir en el foro alguna vez, por el momento solicito de su ayuda.

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(),
         });
      });
Para no ver esta publicidad, debes ser usuario del Foro.
Publicidad (ayudanos a mantener el Foro haciendo un click sobre la misma)


Cuixer, una forma de administrar páginas web que nunca viste!


Ext.foro.Nuevo
Mensajes: 2
Registrado: 12 Feb 2012, 21:28
NotaPublicado: 13 Feb 2012, 23:58
Saludos compañeros al que le sirva ya pude dar solucion, lo que intentaba hacer anteriormente estaba muy mal, ya que mi objeto store lo intentaba crea nuevamente, pues esto se puede evitar con una simpe rutina que tiene el mismo objeto store y es de gran ayuda ya que los controles que tienen definido el store se actualizan automaticamente.
Si bien es cierto hay muchos ejemplos de auto refresh pero estos parten de un Array el cual lo asignan al store mediante su propiedad data, este ejemplo que les comparto lo hace a partir de un web service de php ojala les sea de ayuda.
Código: Seleccionar todo
Ext.onReady(function() {
         var chart;
         var store = new Ext.data.Store({
            fields: [
               {
                  name: 'sucursal',
                  type: 'auto'
               },
               {
                  name: 'reportes',
                  type: 'auto'
               }
            ],
            proxy: {
               type: 'ajax',
               url : 'graphics.php',
               reader: {
                  type: 'json',
                  root: 'root'
               }
            },
            autoLoad: true
         });
         
         function refreshData(){
            store.load();
         }
         //------------------------------------
         var task = {
            run: refreshData,
            interval: 10000 //entre 1000 para segundos
         }
         //------------------------------------
         var runner = new Ext.util.TaskRunner();
         runner.start(task);
         
         //------------------------------------
         chart = new Ext.chart.Chart({
            width: 800,
            height: 600,
            animate: true,
            store: store,
            renderTo: Ext.getBody(),
            shadow: true,
            axes:[{
                  type: 'Numeric',
                  position: 'left',
                  fields: ['reportes'],
                  minimum: 0,
                  title: 'Reportes'
               },{
                  type: 'Category',
                  fields: ['sucursal'],
                  position: 'bottom',
                  title: 'Sucursales'
               }],
            series: [{
                     type: 'column',
                     axis: 'bottom',
                     highlight: true,
                     label: {
                        display: 'insideEnd',
                        field: 'reportes',
                        color: '#333',
                        'text-anchor': 'middle'
                     },
                     title: 'Convertidores',
                     xField: 'sucursal',
                     yField: 'reportes'
                  }]
         });
         //--------------------------------------------------
      }); //------------------------------------ Final Onready
:P

Volver a Ext 4.0: Ayuda





  • Publicidad (ayudanos a mantener el Foro haciendo un click sobre la misma)
  • Cuixer, una forma de administrar páginas web que nunca viste!