ExtJS 4.0 - Bar chart using proxy type ajax

[LukeBeer]

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:

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

data.js:

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

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']
            }]
        }
    });
});

[scottmartin]

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

Several comments:

-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

[LukeBeer]

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:

    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)

[ {"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;

        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.

[LukeBeer]

Resolved, my json was incorrect.

Amended to:

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

[scottmartin]

Thank you for the follow-up.

Regards,
Scott.

[LukeBeer]

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

[scottmartin]

See if this helps:

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

Regards,
Scott.

[LukeBeer]

Works perfectly, many thanks!