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