EXT JS 4 Line Chart Displays Data Incorrectly

Question

My problem is extremely similar to the one described in this SO question, but not quite the same.

I'm dynamically populating a chart from the database with a timestamp and a integer value that should display on a line chart. The chart displays the data incorrectly. For instance, this data set has 3 items with y = 1, y = 5, y = 1 matched with the corresponding X value timestamps below.

This chart has two items with y=1 and y =1 at the timestamps indicated on the X axis. Problem is, the chart duplicated itself twice here. Not sure what's going on.

As you can see, the highlighted element indicates the point should graph at y = 5, not y = 1.5ish. The far left point should also start at y = 1, not y = 0. I've been reading documentation, forums, and SO all day and am quite flummoxed. I've even rewritten the silly thing twice now to follow "good" examples and that doesn't seem to help either.

The model code,

  Ext.define('ROOT.model.dataset', {
    extend: 'Ext.data.Model',
    alias: 'event',
    fields: ['count', 'time'],

    constructor: function (config) {
        this.callParent(arguments);
        Ext.apply(this, config);
    }
});

The graph code,

Ext.define('Root.view.ChartPanel', {
    extend: 'Ext.panel.Panel',
    title: 'Event Metrics',

    initComponent: function () {
        Ext.apply(this, {
            store: new Ext.data.SimpleStore({fields: [
            {name: 'count', type: 'int'},
            {name: 'time', type: 'string'}
            ]})
        });
        this.callParent(arguments);

        //CREATE CHART
        this.barChart = Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 700,
            height: 500,
            animate: false,
            store: this.store,

            axes: [
                {
                    type: 'Numeric',
                    position: 'left',
                    fields: ['count'],
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    title: 'Count',
                    grid: true,
                    adjustMaximumByMajorUnit: false,
                   adjustMinimumByMajorUnit: false,
                    minorTickSteps: 5,
                    majorTickSteps: 3,
                    minimum: 0
                },
                {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['time'],
                    title: 'Date'
                }
            ],

            series: [
                {
                    type: 'line',
                    axis: ['left', 'bottom'],
                    highlight: true,
                    tips: {
                        trackMouse: true,
                        width: 175,
                        height: 20,
                        renderer: function(storeItem, item) {
                            this.setTitle(storeItem.get('time') + ': ' + storeItem.get('count'));
                        }
                    },
                  /*  label: {
                        display: 'insideEnd',
                        field: 'count',
                        renderer: Ext.util.Format.numberRenderer('0'),
                        orientation: 'horizontal',
                        color: '#333',
                        'text-anchor': 'middle',
                        constrast: true
                    },*/
                    xField: 'time',
                    yField: ['count'],
                    markerConfig: {
                        type: 'cross',
                        size: 4,
                        radius: 4,
                        'stroke-width': 0
                    }
                }   
            ]
        });
        this.add(this.barChart);
    }, //end init



    refreshEventChart: function (data) {
        this.clear();
        this.store.loadData(data);
        this.barChart.redraw();
    },

    clear: function() {
        this.store.removeAll();
        this.barChart.surface.removeAll();
    }
});

Any help figuring this out would be greatly appreciated!

Answer 1

I had the same problem and after applying your solution to my php code with JSON_NUMERIC_CHECK

json_encode($response, JSON_NUMERIC_CHECK );

the problem still wasn't resolved.

I am dynamically generating my line graph and have to input the maximum step value when I do. I discovered that If the maximum is set less than 5 the step will break, if the value is 5 or greater the step looks just fine.

  axes: [{
            type: 'Numeric',
            minimum: 0,                
            maximum: maxValue,                     
            position: 'left',
            fields:  vs ,
            grid: true,
            title: 'Visitors',
            label: {
               renderer: Ext.util.Format.numberRenderer('0,0'),
                font: '10px Arial'
            }

hope this helps someone else.
Link to image of example where maxValue is set to 4 and 5 http://swimmingturtle.com/temp/lt5_max.png

Answer 2

I've discovered the problem. It turns out my data provider wasn't converting a value from a string to an integer when I requested the data--hence the seemingly wonky chart. After modifying the data provider to ensure the count field always produces an integer, when coming from the server, the charts started working fine.