1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    6
    Vote Rating
    0
    LukeBeer is on a distinguished road

      0  

    Default Answered: ExtJS 4.0 - Bar chart using proxy type ajax

    Answered: ExtJS 4.0 - Bar chart using proxy type ajax


    Hi All,

    I'm very new to ExtJS and I'm trying to develop some POC apps using v4, one of these is a bar chart, loading data from ajax (php script).

    The error I am getting is: 'this.model.prototype is undefined', underneath the error in FireBug shows 'alias:"series.bar".

    A live example can be found at http://pillock.net/wb/

    Code below:

    stats.php:

    Code:
    [ {"callcentre": "callcenter@example.com","calls": 1} ]
    data.js:

    Code:
    Ext.require(['Ext.data.*']);
    
    Ext.define('CallCentreStore', {
        extend: 'Ext.data.Model',
        fields: ['callcentre', 'calls']
    });
    
    var callCentreStore = Ext.create('Ext.data.Store', {
        model: 'CallCentreStore',
        proxy: {
            type: 'ajax',
            url : 'stats.php',
        }
    });
    
    callCentreStore.load();
    bar.js

    Code:
    Ext.require('Ext.chart.*');
    Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
    
    Ext.onReady(function () {
        Ext.chart.theme.White = Ext.extend(Ext.chart.theme.Base, {
            constructor: function() {
               Ext.chart.theme.White.superclass.constructor.call(this, {
                   axis: {
                       stroke: 'rgb(8,69,148)',
                       'stroke-width': 1
                   },
                   axisLabel: {
                       fill: 'rgb(8,69,148)',
                       font: '12px Arial',
                       'font-family': '"Arial',
                       spacing: 2,
                       padding: 5,
                       renderer: function(v) { return v; }
                   },
                   axisTitle: {
                      font: 'bold 18px Arial'
                   }
               });
            }
        });
    
        var win = Ext.create('Ext.Window', {
            width: 800,
            height: 600,
            minHeight: 400,
            minWidth: 550,
            hidden: false,
            maximizable: true,
            title: 'Call Centre Wallboard POC.',
            renderTo: Ext.getBody(),
            layout: 'fit',
            items: {
                id: 'chartCmp',
                xtype: 'chart',
                animate: true,
                shadow: true,
                store: CallCentreStore,
                axes: [{
                    type: 'Numeric',
                    position: 'bottom',
                    fields: ['calls'],
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    title: 'Calls in queue.',
                    grid: true,
                    minimum: 0
                }, {
                    type: 'Category',
                    position: 'left',
                    fields: ['callcentre'],
                    title: 'Call Centre ID'
                }],
                theme: 'White',
                background: {
                  gradient: {
                    id: 'backgroundGradient',
                    angle: 45,
                    stops: {
                      0: {
                        color: '#ffffff'
                      },
                      100: {
                        color: '#eaf1f8'
                      }
                    }
                  }
                },
                series: [{
                    type: 'bar',
                    axis: 'bottom',
                    highlight: true,
                    tips: {
                      trackMouse: true,
                      width: 140,
                      height: 28,
                      renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('callcentre') + ': ' + storeItem.get('calls'));
                      }
                    },
                    label: {
                      display: 'insideEnd',
                        field: 'calls',
                        renderer: Ext.util.Format.numberRenderer('0'),
                        orientation: 'horizontal',
                        color: '#333',
                      'text-anchor': 'middle'
                    },
                    xField: 'callcentre',
                    yField: ['calls']
                }]
            }
        });
    });

  2. See if this helps:

    Code:
    var interval = setInterval(function() {
        store.load(); // reload store, or other action
    }, 1000); // refresh every sec
    Regards,
    Scott.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,011
    Answers
    668
    Vote Rating
    460
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Is this still an issue? In looking at your demo, I did not see any console errors.

    Several comments:
    Code:
    -You have an extra comma in your store.url property
    -I would move the proxy to your model if you are going to define it
    -Add: type: 'json' to your store
    -remove id: 'chartCmp', we recommend not using hard code id's unless you really need to
    -add: idProperty: 'id' to your model // where id is your unique field id
    Regards,
    Scott

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    6
    Vote Rating
    0
    LukeBeer is on a distinguished road

      0  

    Default


    Thanks for the reply - I've been using static typed data source rather than Ajax for development.

    I've decided to use jsonp for flexability

    My code for the data store (data.js) is now:

    Code:
        Ext.define('ccQueue', {
            extend: 'Ext.data.Model',
            idProperty: 'callcentre',
            fields: ['callcentre', 'calls']
        });
    
        var CallCentreStore = Ext.create('Ext.data.Store', {
            model: 'ccQueue',
            proxy: {
                type: 'jsonp',
                url: 'http://localhost/wb/stats.php'
            }
        });
    
        CallCentreStore.load();
    http://localhost/wb/stats.php when called, outputs with header 'application/x-json':

    (as described: http://docs.sencha.com/ext-js/4-0/#!...ta.proxy.JsonP)

    Code:
    [ {"callcentre":"cc1@example.com","calls":0}{"callcentre":"cc2@example.com","calls":1} ]
    Without the [ ] around the json, I get json errors so the script is being called however with the [ ] around it, I get no bars or lables in the chart and no errors in the console.

    How should my json look in this case? I'm struggling to find the correct format from the docs.

    To generate, I'm using this;

    PHP Code:
            public function getQueuesAsJSON() {
                
    $_ccList $this->getCCList();
                foreach (
    $_ccList as $_ccId) {
                    
    $this->setCcId($_ccId);
                    
    $_ccQueue = array(
                        
    'callcentre' => $this->getCcId(),
                        
    'calls' => $this->getQueueCount()
                    );
                    
    $_jsonOutput .= '[' json_encode($_ccQueue) . ']';
                }
                return 
    $_jsonOutput;
            } 
    Regarding your suggestions, I've removed the broken store, not sure on moving the proxy to my model though (I'm doing it as per docs). I've removed the id 'chartCmp' and added idProperty: 'callcentre' as suggested.

    Many thanks for the help,

    Luke.

  5. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    6
    Vote Rating
    0
    LukeBeer is on a distinguished road

      0  

    Default


    Resolved, my json was incorrect.

    Amended to:

    Code:
    [{"callcentre":"cc1@example.com","calls":0},{"callcentre":"cc2@example.com","calls":4},]

  6. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,011
    Answers
    668
    Vote Rating
    460
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thank you for the follow-up.

    Regards,
    Scott.

  7. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    6
    Vote Rating
    0
    LukeBeer is on a distinguished road

      0  

    Default


    No problem, just in case it helps others in the future.

    Another question however, I'm struggling to get to the bottom of how I reload/redraw the graph every second to get updated data.

    I've found: http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Updater but I'm using v4, could you point me in the right direction and perhaps a snippet of code to get me started on getting the graph to redraw every second?

    I'm currently using maximized: true and a very clunky meta refresh to work around it....

    Many thanks

  8. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,011
    Answers
    668
    Vote Rating
    460
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    See if this helps:

    Code:
    var interval = setInterval(function() {
        store.load(); // reload store, or other action
    }, 1000); // refresh every sec
    Regards,
    Scott.

  9. #8
    Sencha User
    Join Date
    Feb 2012
    Posts
    6
    Vote Rating
    0
    LukeBeer is on a distinguished road

      0  

    Default


    Works perfectly, many thanks!

Thread Participants: 1

Tags for this Thread