ExtJS Line Chart Example

Problem

You want to display a line chart.

Solution

Use the Ext.chart.Chart.

Ext.onReady(function() {
    Ext.define('PopulationPoint', {
        extend: 'Ext.data.Model',
        fields: ['state', 'population']
    });

   var store = Ext.create('Ext.data.Store', {
    model: 'PopulationPoint',
    data: [{ state:"Alabama", population: 4802740},
           { state:"Alaska", population: 722718},
           { state:"Arizona", population: 6482505},
           { state:"Arkansas", population: 2937979},
           { state:"California", population: 37691912},
           { state:"Colorado", population: 5116796},
           { state:"Connecticut", population: 3580709},
           { state:"Delaware", population: 907135},
           { state:"DC", population: 617996},
           { state:"Florida", population: 19057542},
           { state:"Georgia", population: 9815210},
           { state:"Hawaii", population: 1374810},
           { state:"Idaho", population: 1584985},
           { state:"Illinois", population: 12869257},
           { state:"Indiana", population: 6516922},
           { state:"Iowa", population: 3062309},
           { state:"Kansas", population: 2871238},
           { state:"Kentucky", population: 4369356},
           { state:"Louisiana", population: 4574836},
           { state:"Maine", population: 1328188},
           { state:"Maryland", population: 5828289},
           { state:"Massachusetts", population: 6587536},
           { state:"Michigan", population: 9876187},
           { state:"Minnesota", population: 5344861},
           { state:"Mississippi", population: 2978512},
           { state:"Missouri", population: 6010688},
           { state:"Montana", population: 998199},
           { state:"Nebraska", population: 1842641},
           { state:"Nevada", population: 2723322},
           { state:"New Hampshire",	population: 1318194},
           { state:"New Jersey",	population: 8821155},
           { state:"New Mexico",	population: 2082224},
           { state:"New York",	population: 19465197},
           { state:"North Carolina", population: 9656401},
           { state:"North Dakota",	population: 683932},
           { state:"Ohio", population: 11544951},
           { state:"Oklahoma", population: 3791508},
           { state:"Oregon", population: 3871859},
           { state:"Pennsylvania", population: 12742886},
           { state:"Rhode Island",	population: 1051302},
           { state:"South Carolina",	population: 4679230},
           { state:"South Dakota",	population: 824082},
           { state:"Tennessee", population: 6403353},
           { state:"Texas", population: 25674681},
           { state:"Utah", population: 2817222},
           { state:"Vermont", population: 626431},
           { state:"Virginia", population: 8096604},
           { state:"Washington", population: 6830038},
           { state:"West Virginia",	population: 1855364},
           { state:"Wisconsin", population: 5711767},
           { state:"Wyoming", population: 568158} ]
  });

  Ext.create('Ext.chart.Chart', {
     renderTo: Ext.getBody(),
     width: 470,
     height: 300,
        store: store,
	axes: [
        {
            title: 'Population',
            type: 'Numeric',
            position: 'left',
            fields: ['population'],
        },
        {
            title: 'State',
            type: 'Category',
            position: 'bottom',
            fields: ['state'],
            title: 'US State',
            grid: true,
            label: {
              rotate: {
                degrees: 90
              }
            }
        }],
    series: [
        {
            type: 'line',
            xField: 'state',
            yField: 'population'
        }
    ]
  });	
});

Discussion

The tricky part to these charts seems to be syncing up all the duplicate instances of column names – this causes different problems, including Javascript errors, nothing rendering, or all the points rendering on one axis, rather than inside the graph. The column names “state” and “population” in this example are repeated in four locations: in the Model object, the Store object, the axes, and the series. In a real system you might generate store and model data on the server side, forcing at least two to match.