no y axis when y values all the same

[fransham]

Hi Sencha Devs,

I'm using extjs4.1 and having trouble with generating a graph where all of the values in the store have the same y value. Whenever I create a graph like this, the Y axis is not rendered. (Though the data points seem to be in the correct locations).

Here's some sample code:

Ext.require([
    'Ext.data.Model',
    'Ext.data.Store',
    'Ext.chart.*'
]);


Ext.onReady(function() {


    Ext.define('Stat', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'date', type: 'int' },
            { name: 'stat', type: 'int' }
        ]
    });
    
    var store = Ext.create('Ext.data.Store', {
        model: 'Stat',
        autoSync: true,
        proxy: {
            type: 'memory',
            reader: {
                type: 'json'
            }
        },
        data: [ 
            {stat: 1, date: 1350910683}, 
            {stat: 1, date: 1350910684},
            {stat: 1, date: 1350910685},  
            {stat: 1, date: 1350910686},  
            {stat: 1, date: 1350910687},  
            {stat: 1, date: 1350910688},  
            {stat: 1, date: 1350910689}
        ]
    });
    
    Ext.create('Ext.chart.Chart', {
        xtype: 'chart',
        height: 350,
        width: 400,
        store: store,
        shadow: true,
        title: "test graph",
        renderTo: Ext.getBody(),
        axes: [{
            title: 'stat',
            type: 'Numeric',
            position: 'left',
            fields: ['stat']
        },{
            type: 'Numeric',
            position: 'bottom',
            fields: ['date'],
            title: 'Time',
            label: {
                renderer: function(value) {
                    var date = Ext.Date.parse(Math.floor(value), "U");
                    return Ext.Date.format(date, "H:i:s") + "\n" + Ext.Date.format(date, "M j") ;
                }
            }
        }],
        series: [{
            type: 'line',
            fill: false,
            axis: ['left', 'bottom'],
            xField: 'date',
            yField: 'stat',
            highlight: {
                size: 7,
                radius: 7
            },
            markerConfig: {
                radius: 4,
                size: 4
            }
        }]
    });


});

And the resulting graph looks like this:

no_y_axis.PNG

If I change only one value in my store: (i.e. change the last record to a 2 instead of a 1)

   var store = Ext.create('Ext.data.Store', {
        model: 'Stat',
        autoSync: true,
        proxy: {
            type: 'memory',
            reader: {
                type: 'json'
            }
        },
        data: [ 
            {stat: 1, date: 1350910683}, 
            {stat: 1, date: 1350910684},
            {stat: 1, date: 1350910685},  
            {stat: 1, date: 1350910686},  
            {stat: 1, date: 1350910687},  
            {stat: 1, date: 1350910688},  
            {stat: 2, date: 1350910689}
        ]
    });

Then the y axis renders properly, as shown below:

y_axis.PNG

Is this a known issue? Is there any known workaround to this problem? We build graphs with many different data ranges, so manually specifying max/min is tricky. Thanks for any insight anyone can provide!

Kyle

[mitchellsimoens]

Are you using 4.1.0 or 4.1.1?

[fransham]

I'm using extjs4.1.0 in this example, although I've since downloaded 4.1.1. I'll try re-running with the new load and post the result.

[fransham]

I just updated to 4.1.1a and my test application seems to be working. I'll update our main software with the new build. Thanks for the info!