Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Display a Trendline with ExtJS 3.4

DZone's Guide to

How to Display a Trendline with ExtJS 3.4

· Big Data Zone ·
Free Resource

Hortonworks Sandbox for HDP and HDF is your chance to get started on learning, developing, testing and trying out new features. Each download comes preconfigured with interactive tutorials, sample data and developments from the Apache community.

Problem:

You want to display a trendline on a scatter chart in ExtJS 3.4.

Scatter Chart with trendline (ExtJS)
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
        }
      }]
    }
  });
});


Hortonworks Community Connection (HCC) is an online collaboration destination for developers, DevOps, customers and partners to get answers to questions, collaborate on technical articles and share code examples from GitHub.  Join the discussion.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}