How to Display a Trendline with ExtJS 3.4
Join the DZone community and get the full member experience.
Join For Free
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 } }] } }); });
Published at DZone with permission of Gary Sieling, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Trending
-
Extending Java APIs: Add Missing Features Without the Hassle
-
Comparing Cloud Hosting vs. Self Hosting
-
Observability Architecture: Financial Payments Introduction
-
Competing Consumers With Spring Boot and Hazelcast
Comments