Skip to content

September 27, 2015

How to create HighStocks area range chart for ExtJs

by Joe Kuan

Here is an example of using the Highstocks extension for ExtJs 4 to create an area range stock chart.

First, there is a minor bug in the Highstocks extension that the property name for specifying the series type is ‘series.plot‘, not ‘series.type‘.

Secondly, there is a template pattern method, getData, defined in the Highstocks extension. It is used to map the data model from ExtJs store to Highstocks chart data model. There is no need to override this method for simple chart series which expects x and y data. As for the range type charts, it expects 3 values: x, ymin and ymax. So we need to define the getData method to map the range store data:

series : [{
     name : 'Temperatures',
     plot: 'arearange',
     getData: function(record) {
        return [ record.data.time, record.data.min, record.data.max ];
     }
}],

and creates the follow range area stock chart in ExtJs 4.

screen

Here are the links for the example code and the demo.

PS: Although I haven’t maintained this extension for a long time, this extension still work very well with the latest version of Highstocks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: