Highcharts Adapter for Ext JS with animation support
You can download via github: http://github.com/JoeKuan/Highcharts-Ext-JS-Adapter
The original author of Highcharts Adapter is buz posted it onto the forum. I modified it to bring the stylish Highcharts animations into the elegant Ext JS.
animShift – Boolean
Specific animation for non pie chart that shifts horizontally when new data arrives along the x-axis. Default false. Note that this is the Adapter config, not part of Highcharts.
An example file, example.html, is now available in the github showing the usage of the Highchart adapter. It uses a JsonStore to retrieve random generated time series data, temp_example.php, from the server. You should see initial animation as well as new data is updated and shifted horizontally.
Read this section only if you want to modify the source code.
- Initial animation – The only way to have Highcharts initial animation is to populate series data inside the config object before creating a Highcharts object. The series data is generated by calling Ext JS’s Store.load when Ext.ux.Highcharts is created. Since the load method is event driven, therefore it is binded with handler of copying Store’s data into config object
- Update animation – The update animation is done by aligning Store’s data point by point to the Chart’s series data along the x-axis. If the size is different, then either adding or removing points with updating x and y values.
- Update animation (Shift) – The update shift animation is done differently in only comparing Store and Series x-axis data to see any new data arrive. If so, then call Series.addPoint with shift enable.
- Event listener – In the original version, onDataChange event handler calls refresh method. However, every time the Store.load is called, both onDataChange and onLoad are invoked which calls refresh twice. Hence the refresh call in onDataChange is commented out.
Thank you for reading and let me know if you find any problem. Thanks!!