how to give dynamic axes minimum and maximum values to chart from store sencha touch

Question

I am using xtype:chart and this is my axes.

   axes: [{
      type: 'numeric',
      minimum: 0,
      position: 'left',
      fields: ['2011', '2012', '2013'],
      title: 'Sales',
      minorTickSteps: 1,
      grid: {
              odd: {
                      opacity: 1,
                      fill: '#ddd',
              }
      },
      style: {
              axisLine: false,
              estStepSize: 20,
              stroke: '#ddd',
              'stroke-width': 0.5
      },
      minimum: 0,
      maximum: 1000
  }, {
      type: 'category',
      position: 'bottom',
      fields: ['name'],
      title: 'Month of the Year',
      style: {
              estStepSize: 1,
              stroke: '#999'
      }
 }]

Here is my problem, minimum and maximum values varying a lot between different users.Like the chart does not showup if I give minimum -0 and maximum as 10000 for some users..and for some other chart does not show if I make 0 -1000, so I want to change that minimum and maximum values from the store before the chart is loaded. is there any possibility of doing that ?? I request an example .Thank you

Viswa · Accepted Answer · 2013-07-25T06:32:31.247

6

No need to set minimum and maximum because it will be set by sencha based on data

If you still want to do then can do that by listening to initialize event of chart

Lets say, this is axes

axes: [{
        type: 'numeric',
        position: 'left',
        fields: ['data1'],
        title: {
            text: 'Sample Values',
            fontSize: 15
        },
        grid: true,
        minimum: 0
    }, {
        type: 'category',
        position: 'bottom',
        fields: ['name'],
        title: {
            text: 'Sample Values',
            fontSize: 15
        }
    }],

And initialize listener

    listeners : {
        initialize : function( me, eOpts ) {
            Ext.getStore('chartstore').load({
                callback: function(records, operation, success) {
                var data = records[0].data;
                 var axes = me.getAxes();
                 var SampleValuesAxis =  axes[0];
                    SampleValuesAxis.setMinimum(data.minimum);
                    SampleValuesAxis.setMaximum(data.maximum);
            },
            scope: this
        });
       }
   }

edited Jul 25 '13 at 06:32

answered Jul 25 '13 at 06:21

Viswa

3,211
5
34
65

Thank you,I am still having a problem, if the lines are step and fill ,they are working fine but if it is smooth the lines are not showing up ..smooth: true does not work for me and it is working fine if I give fill: true or step: true .. may I know where I am going wrong – Gowthami Gattineni Jul 25 '13 at 14:33
There are 3 lines (2011,2012,2013) in that chart.. three lines are showing up very well and smooth also working for me.. which line not showing up for you? – Viswa Jul 25 '13 at 17:34
for me fill works fine 2013 line... and for 2011 and 2012 only dots showing not the lines .. – Gowthami Gattineni Jul 25 '13 at 17:55
are you testing in chrome ? – Viswa Jul 25 '13 at 18:07
yeah ..it doesnt work on chrome,iOS simulator and firefox either – Gowthami Gattineni Jul 25 '13 at 18:09

score 1 · Answer 2 · answered Jul 25 '13 at 05:44

1

If you don't set any value for minimum and maximum, Ext will adjust the axis to the data each time the store is loaded.

answered Jul 25 '13 at 05:44

rixo

23,815
4
63
68

how to give dynamic axes minimum and maximum values to chart from store sencha touch

2 Answers2

Linked