How to Display a Trendline with ExtJS 3.4

problem:

you want to display a trendline on a scatter chart in extjs 3.4.

solution

use the ext.chart.chart class, but add an extra series for the trend-line, and make the colors match the corresponding series related to the trend.

discussion

extjs is able to make nice-looking charts, using yui charts, but seems to be missing basic features like trend-lines. you can simulate this behavior by pre-computing points along the line, and setting the color to match that of the relevant series. using a robust backend makes this fairly easy to compute, for instance r has functions which do most of the work for you .

using this technique you can put many series/trendlines on the same graph, and model different types of trends (e.g. logarithmic, parabolic). for further discussion of issues with the ext 3.4 charts, see the scatter plot example .

in the example below, the series are differentiated with the “alpha” parameter (visibility). it may be helpful to set the min/max on a chart like this, and if using ext 3.4 or earlier, it is necessary to set the url to the yui charts to point to a local copy of the swf file.

ext.onready(function() {
ext.chart.chart.chart_url = 'ext-3.4.0/resources/charts.swf';
   var store = new ext.data.jsonstore({
    fields: ['year', 'action', 'trend'],
    data: [
        {year: 2005, action: 23890000, trend: 26110000},
        {year: 2006, action: 38900000, trend: 36915000},
        {year: 2007, action: 50410000, trend: 47720000},
        {year: 2008, action: 56070000, trend: 58525000}
        ]
  });
 
  new ext.panel({
    width: 390,
    height: 400,
    renderto: 'container',
    title: 'scatter plot - takings by genre',
    items: {
      xtype: 'linechart',
      store: store,
      xfield: 'year',
      xaxis: new ext.chart.numericaxis({
        minimum: 2004,
        maximum: 2009,
        majorunit: 1
 
      }),
      yaxis: new ext.chart.numericaxis({
        labelrenderer: ext.util.format.usmoney,
        minimum: 20000000,
        maximum: 60000000
      }),
      series: [{
        yfield: 'action',
        displayname: 'action',
        style: {
          linealpha: 0.0
        }
      },{
        yfield: 'trend',
        displayname: 'trend',
        style: {
          linealpha: 1.0
        }
      }]
    }
  });
});