ExtJS Stacked Bar Chart Example

Problem

You want to display a stacked bar chart.

Solution

Use the Ext.chart.Chart, and set the “series” property, including type: ‘bar’ and stacked: true.

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

		var store = Ext.create('Ext.data.Store', {
			model: 'ParolePoint',
			data : [
      {state: 'Connecticut', entry:31000, exit:28211},
      {state: 'Maine', entry:3627, exit:3692},
      {state: 'Massachusetts', entry:98952, exit:96142},
      {state: 'New Hampshire', entry:3789, exit:3697},
      {state: 'New Jersey', entry:49728, exit:55858},
      {state: 'New York', entry:62419, exit:64147},
      {state: 'Pennsylvania', entry:13966, exit:13240},
      {state: 'Rhode Island', entry:6262, exit:6012},
      {state: 'Vermont', entry:4884, exit:5487},
    ]
  });

  Ext.create('Ext.chart.Chart', {
     renderTo: Ext.getBody(),
     width: 470,
     height: 300,
     store: store,
     axes: [
        {
            title: 'Enter/Exit Parole',
            type: 'Numeric',
            position: 'left',
            fields: ['entry', 'exit'],
        },
        {
            title: 'State',
            type: 'Category',
            position: 'bottom',
            fields: ['state'],
            title: 'US State',
            grid: true,
          label: {
              rotate: {
                degrees: 90
              }
            }
        }],
    series: [
        {
	type: 'bar',
	highlight: true,
	column: true,
	stacked: true,
        xField: 'state',
        yField: ['entry', 'exit']
        }
    ]
  });	
});

Discussion

It’s easy to switch between stacked and non-stacked bar charts, using the stacked attribute. Unfortunately the data layout for these charts does not match a typical database query that would be used to generate them:

select year, type, count(*) value
from facts
group by year, type

If you’re graphing data from an OLTP style data warehouse, you’ll need to add code to pivot the output data into an Ext store, or write a new type of store.

As with the other graphs, this code involves a fair amount of repetition – ExtJS considers the chart above to be a “column” chart, even though there is a separate property for the bar chart called “axis”, which tells Ext which axis is numeric (and anyway, bar charts usually have one descriptive axis and one numeric).