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’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.