Monday, September 7, 2015

Sample ExtJs Column Chart

In this column chart, I have used the same model, store and require section that I used in my previous sample Sample ExtJS Line Chart. So check it out before continue this sample.

Chart Component
 
Ext.create('Ext.chart.Chart', {
   renderTo: Ext.getBody(),
   width: 400,
   height: 300,
   theme: 'Green',
   store: store,
   animate: true
    axes: [
        {
            title: 'Score',
            type: 'Numeric',
            position: 'left',
            fields: ['score'],
            minimum: 0,
            maximum: 400
        },
        {
            title: 'Over',
            type: 'Numeric',
            position: 'bottom',
            fields: ['over']
        }
    ],
    
      series: [
        {
            type: 'column',
            axis: 'left',
            xField: 'over',
            yField: 'score'
        }
    ]
});
Result
Demo Click here to view in Jsfiddle

No comments:

Post a Comment