Monday, September 7, 2015

Sample ExtJS Line Chart

In this line chart sample I have used two fields 'over' and 'score' in the model named 'CricketScore'. Added some default scores in the store. Both values are numeric. The store has been assigned to the chart store property. The two fields are pointed to the position left and bottom in the axes array section in the chart. In the series array section I have mentioned the chart type and the x, y fields.

In the fiddle demo, I have included ExtJS 4.2.0 in the Frameworks and Extension section and in the External resources section added the following CSS Url,
http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css
Namespace
 
Ext.require([
    'Ext.chart.Chart'
]);
Model
Ext.define('CricketScore', {
    extend: 'Ext.data.Model',
    fields: ['over', 'score']
});
Store
var store = Ext.create('Ext.data.Store', {
    model: 'CricketScore',
    data: [
        { over: 5, score: 35 },
        { over: 10, score: 75 },
        { over: 15, score: 110 },
        { over: 20, score: 135 },
        { over: 25, score: 171 },
        { over: 30, score: 200 },
        { over: 35, score: 225 },
        { over: 40, score: 240 },
        { over: 45, score: 285 },
        { over: 50, score: 345 },
    ]
});
Chart Component
Ext.create('Ext.chart.Chart', {
   renderTo: Ext.getBody(),
   width: 400,
   height: 300,
   theme: 'Red',
   store: store,
   axes: [
        {
            title: 'Over',
            type: 'Numeric',
            position: 'left',
            fields: ['over'],
            minimum: 1,
            maximum: 50
        },
        {
            title: 'Score',
            type: 'Numeric',
            position: 'bottom',
            fields: ['score']
        }
    ],
    
      series: [
        {
            type: 'line',
            xField: 'score',
            yField: 'over'
        }
    ]
});
Result
Demo Click here to view in Jsfiddle