1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    9
    Vote Rating
    0
    kpython is on a distinguished road

      0  

    Default Unanswered: Waiting data from the store before rendering a chart

    Unanswered: Waiting data from the store before rendering a chart


    Hi everybody,

    I'm trying to draw a chart with data which come from a store. This store contain a proxy retrieving data from a json file.

    My problem is very simple:
    Loading data from this json file takes a little time. So I have to wait that every data are received before drawing the chart. How can I do that ?

    Here is my store :
    Code:
    Ext.define('iSmart.store.DayConsumption', {    extend: 'Ext.data.Store',
        requires: 'iSmart.model.Consumption',
        config:{
            model: 'iSmart.model.Consumption',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'data/dayConsumption.json',
                reader: {
                    type: 'json'
                }
            },
            listeners: {
                load: function(){
                    console.log(this.getCount());
                }
            }
        }
    });
    And here is my view:

    Code:
    Ext.define("iSmart.view.Day", {    requires: [
            'iSmart.store.DayConsumption'
        ],
        extend: 'Ext.Panel',
        xtype: 'dayView',
        alias: "widget.day",
        stores: ['DayConsumption'],
        
        initialize: function () {
            this.callParent(arguments);
            console.log('Loading data from the store...');
            var DayConsumptionStore = Ext.getStore('DayConsumption');
            console.log('Number of consumption: ' + DayConsumptionStore.getCount());
        },
    
    
        config: {
            layout: 'fit',
            //iconCls: 'time',
            title: 'Tag',
            items: [{
                xtype: 'toolbar',
                docked: "top",
                items: [{
                    xtype: 'label',
                    html: 'Total'
                },{
                    xtype: 'spacer'
                },{
                    xtype: 'label',
                    html: dateFormated
                },{
                    xtype: 'spacer'
                }]
            },{
                xtype: 'chart',
                store: 'DayConsumption',            
                axes: [
                    {
                        // y-axsis
                        type: 'numeric',
                        position: 'left',
                        grid: true,
                        title: 'Durschnittsleistung [kW]'
                    }, 
                    {
                        // x-axis
                        type: 'category',
                        position: 'bottom'
                    }
                ],
                series: [{
                    type: 'line',
                    xField: 'hour',
                    yField: 'averagePower',
                    title: 'Heute',
                    style: {
                        step: true,
                        stroke: "#086fb2",
                        fillOpacity: 0.6,
                        miterLimit: 3,
                        lineCap: 'miter',
                        lineWidth: 2
                    }
                }]
            }]
        }
    });
    Currently the chart shows no data..
    Thanks a lot in advance for your help !

  2. #2
    Sencha User
    Join Date
    Dec 2012
    Posts
    9
    Vote Rating
    0
    kpython is on a distinguished road

      0  

    Default


    Does anyone knows how I could redraw my chart from the listener I have in my Store ?
    Or any other solution ?

    I really don't know how to integrate that in my MVC app