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

Gowthami Gattineni picture Gowthami Gattineni · Jul 24, 2013 · Viewed 9k times · Source

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

Answer

Viswa picture Viswa · Jul 25, 2013

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
        });
       }
   }