Scatter Chart: Data isn't populating correctly (X/Y Axis all zeros?)

Question

Basically, my store's data is loading correctly, but for some reason, the data isn't being plotted properly on the chart.

I used console.log to determine the store is populated properly. When I inspect element on the chart, I see that Dom elements for "circle" are being drawn, but not placed properly on the chart; they're hidden.

HOWEVER, I added a renderer to the series chart, and all of a sudden it started plotting circles, except they are all directly in the middle of the chart. If I inspect element on that, it appears the X & Y sprite properties are all 0. So they are showing on screen, but not being placed in the correct spot.

Basically the way this works is the screen renders, a user makes a couple selections on what they want to see, the store is loaded, and once the store is loaded, I run chart.redraw(). But nothing is plotted correctly. Here's the appropriate classes.

I will note, the "date" field that is returned, comes back from the server as a unix time stamp. The appropriate dates show up in the X-Axis labels, but the data value points within the chart aren't plotted correctly.

MODEL

Ext.define('RH.model.analytics.SitePenalty', {
    extend : 'Ext.data.Model',
    idProperty: 'date',
    fields : [
        {name: 'change', type: 'float'},
        {name: 'date', type: 'date', dateFormat: 'timestamp'}
    ]
});

STORE

Ext.define('RH.store.analytics.SitePenalty', {
    extend: 'Ext.data.Store',
    storeId: 'sitePenaltyStore',
    model: 'RH.model.analytics.SitePenalty',
    sorters: [{
        property: 'date',
        direction: 'ASC'
    }],
    autoLoad: false,
    proxy: {
        type: 'ajax',
        url: '/analytics/penalty',
        reader: {
            type: 'json',
            root: 'data'
        }
    }
});

CHART

Ext.define('RH.view.analytics.PenaltyChart', {
    extend: 'Ext.chart.Chart',
    alias: 'widget.rh-analytics-penaltychart',
    requires: ['Ext.chart.series.Scatter', 'Ext.chart.axis.Numeric', 'Ext.chart.axis.Category', 'RH.store.analytics.SitePenalty'],
    title: 'Traffic Change',
    style: 'background:#fff',
    animate: true,
    shadow: true,
    store: 'sitePenaltyStore',
    axes: [{
        type: 'Numeric',
        position: 'left',
        fields: ['change'],
        /*label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
        },*/
        title: 'Traffic Change (%)',
        grid: true
    }, {
        type: 'Category',
        position: 'bottom',
        fields: ['date'],
        title: 'Date'
    }],
    series: [{
        type: 'scatter',
        xField: 'date',
        yField: 'change',
        axis: 'left',
        markerConfig: {
            radius: 5,
            size: 5
        },
        //When this is in place, all circles are drawn on top of each other in center 
        //of chart. When this renderer is missing, nothing is drawn on screen
        renderer: function (sprite, record, attributes, index, store) {
            console.log(sprite);
            console.log(record);

        }
    }]
});

**PLEASE NOTE **

In the above renderer method (one example): sprite.x = 0 sprite.y = 0 attributes.translate.x = 40296794232628.14 attributes.translate.y = 240.58000000000004

Should those attributes.translate values be applied to the sprite values? I've never had to do this manually, but wondering if something is broken causing those values to not be applied. Also, I don't even know if sprite.x & sprite.y SHOULDN'T be zeros always. Just guessing here.

CONTROLLER SNIPPET

Ext.getStore('sitePenaltyStore').load({
    scope: this,
    params: {'acctId': acctId, 'propertyId': propertyId, 'viewId': viewId},
    callback: function() {
        //Double checked here, data is loading into store just fine
        console.log(Ext.getStore('sitePenaltyStore'));
        this.getPenaltyChart().redraw();
    }
});

Answer 1

Turns out, that for dates, the Category & Time axis just don't work right. So what I had to do is use a numeric axis, and use the label renderer to format the unix time stamp to a date.

This isn't a great solution for everyone, but since my other axis "change" has a max value of 1.0 (using percentages), I could make a simple if statement. If the number is large enough, it's probably a date.

The data now plots properly on the chart.

axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['change'],
            /*label: {
             renderer: Ext.util.Format.numberRenderer('0,0')
             },*/
            title: 'Traffic Change (%)',
            grid: true
        }, {
            type: 'Numeric',
            position: 'bottom',
            fields: ['date'],
            title: 'Date',
            label: {
                renderer: function(v) {
                    if (v > 100) {
                        var date = new Date(v * 1000);
                        var newTime = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate();
                        return newTime;
                    }
                    return v;
                }
            }
        }],