{"id":691,"date":"2012-10-27T23:16:21","date_gmt":"2012-10-27T23:16:21","guid":{"rendered":"http:\/\/garysieling.com\/blog\/?p=691"},"modified":"2012-10-27T23:16:21","modified_gmt":"2012-10-27T23:16:21","slug":"extjs-3-4-trendline-example","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/extjs-3-4-trendline-example\/","title":{"rendered":"ExtJS 3.4 Trendline Example"},"content":{"rendered":"

Problem<\/strong><\/p>\n

You want to display a trend line on a scatter chart in ExtJS 3.4.<\/p>\n

\"Scatter
\nSolution<\/strong><\/p>\n

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.<\/p>\n

Discussion<\/strong><\/p>\n

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<\/a>.<\/p>\n

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<\/a>.<\/p>\n

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.<\/p>\n

Ext.onReady(function() {\nExt.chart.Chart.CHART_URL = 'ext-3.4.0\/resources\/charts.swf';\n   var store = new Ext.data.JsonStore({\n    fields: ['year', 'action', 'trend'],\n    data: [\n        {year: 2005, action: 23890000, trend: 26110000},\n        {year: 2006, action: 38900000, trend: 36915000},\n        {year: 2007, action: 50410000, trend: 47720000},\n        {year: 2008, action: 56070000, trend: 58525000}\n        ]\n  });\n\n  new Ext.Panel({\n    width: 390,\n    height: 400,\n    renderTo: 'container',\n    title: 'Scatter Plot - Takings by Genre',\n    items: {\n      xtype: 'linechart',\n      store: store,\n      xField: 'year',\n      xAxis: new Ext.chart.NumericAxis({\n        minimum: 2004,\n        maximum: 2009,\n        majorUnit: 1\n\n      }),\n      yAxis: new Ext.chart.NumericAxis({\n        labelRenderer: Ext.util.Format.usMoney,\n        minimum: 20000000,\n        maximum: 60000000\n      }),\n      series: [{\n        yField: 'action',\n        displayName: 'Action',\n        style: {\n          lineAlpha: 0.0\n        }\n      },{\n        yField: 'trend',\n        displayName: 'Trend',\n        style: {\n          lineAlpha: 1.0\n        }\n      }]\n    }\n  });\n});<\/pre>\n
\"Enhanced<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
Problem You want to display a trend line 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 … <\/p>\n
Continue reading “ExtJS 3.4 Trendline Example”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4],"tags":[154,155,213,214,217,218,224,240,276,277,302,303,304,316,317,318,319,492,575],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/691"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=691"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/691\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}