HighCharts extension for ExtJS 4

The article is obsolete. For information of the latest Highcharts extension supports for Sencha ExtJs 4 and Touch 2, click here.

Recently, I received more emails asking me for getting the HighCharts to run on ExtJs 4. I didn’t expect anyone will be interested as ExtJs 4 comes with its own chart library. Well, here is it is. I have ported the HighChart ExtJs 3 Adapter to ExtJs 4. Note that this is a true native ExtJs 4 port, such that none of the ExtJs 3 compatible classes are required. Please read this article before using the extension. Enjoy!!

Release Notes

ExtJs 4 comes with many major design changes, in order to get the HighChart extension working on ExtJs 4. Some changes are inevitable:

• Instead of Ext.ux.HighChart.js, the hierarchy is renamed to Chart.ux.HighChart.js as ExtJs 4 doesn’t use Ext.ux prefix anymore.
• ExtJs 4 uses path for each class components. So the actual Javascript file, HighChart.js, is relocated to /Chart/ux/HighChart.js.
• The core implementation hasn’t been changed from the original one released by buz. The only thing changed is to adopt the new class definition and creating the new class in ExtJs 4 style (which is not a straightforward port because the way HighChart.js uses classes).
• No animation support yet.

Download & Demo

The whole package can be downloaded from github or you can try the demo on joekuan.org. It comes with two examples. Most of the files in the package are demo files for the MVC example. The actual HighChart extension is located in /Chart/ux/HighChart.js.

At the time of writing, this is implemented using ExtJs 4.0.7 and HighCharts 2.1.9. and tested on Safari 5.1.2, Firefox 9.0.1 and IE 8. The multiple graphs example requires Php to generate random data.

Examples

There are two different examples in the package file.

One is a standalone version, standalone.html, only uses a html and js files to run. This is for people who want to quickly see how the extension works with ExtJs 4. The file, standalone.js, contains a short example which displays a single graph.

The second example contains a tree panel with 3 different choice of graphs, line graph, column chart and a pie chart. It is implemented in full ExtJs recommended MVC structure (mvc.html). Here is a screenshot.

Using HighChart extension

The good news is that you can use the new extension pretty much the same as before. The series and chartConfig are the same. The only difference is the instantiation of the class.

var chart = Ext.create("Chart.ux.HighChart", {
  series: [{
    ...
  }],
  store: store,
  chartConfig: {
    chart: {
      .....
  ...
});

Or declare in xtype fashion which is the same as before

items:[
  xtype: 'highchart',
  series: ....
}]

Change HighChart prefix path

If you need to change the HighChart path, then simply change all the instances of “Chart.ux.” in HighChart.js file. Put the file into the right path hierarchy. You may need to setup the path using Ext.Loader.setConfig.

Enjoy!!

[ Updated on 8th Feb ]

A scatter plot is now included in the multiple graphs example.

[ Updated on 9th Feb ]

Standalone version now uses a single Json file for the backend data, instead of a Php page. Easier for some people to quickly experiment the extension.

[ Updated on 12th Apr ]

Fixed and extended addSeries method, so that you can add a new series with data to the displayed chart. A demo for this feature is in joekuan.org

chart.addSeries([{
  type: 'spline',
  name: 'New Series',
  data: [ y1, y2, y3, ... ]
}]);

[ Updated on 16th Apr ]

Added support for donut chart. Please read this for usage and demo.