If you haven’t heard of Gapminder, then watch this very charismatic presentation from Ted talk by Prof. Hans Rosling. Basically, Gapminder is a Flash application which presents the world of statistics and demonstrates how it has evolved over centuries. It has been in my long overdue tasks list to implement a web based Gapminder using my Highcharts extension for ExtJs. So far it took me few hours a week over couple months to come up with this prototype. The challenge is that simultaneously updating and animating nearly 300 data points (with color shading) in a fraction of a second is quite CPU intensive. At least, it is possible now in HTML5.
The following is a short video demo of the prototype. It is running under my Mac Mini (Quad core 2.3GHz i7 – 4G RAM).
However, there are still plenty to implement. Online demo and code on github will be available soon
This is the work that I have done a while ago but I didn’t have time to write up. About 6 months ago, I saw an impressive chart, Stock Picking Wheel, which represents a list of FTSE 100 stocks and their performance summarised in a donut chart. So I gave myself a challenge to see whether it is possible to implement in Highcharts and here it is. Read more
A while ago I have written a blog on how to change the field type inside a row editor dynamically with ExtJs 3. Since then I received a number of requests for the same example in ExtJs 4. It has been way overdue, so here it is.
Recently, I got a request from a Highcharts user asking me how to improve the user interaction on pie charts; when the pointer is hovered over a slice:
1. An arrow appears outside the pie section
2. A text box appears in the center of the donut charts showing the hovered section data
I think this is a good exercise and demonstration to show how flexible and powerful Highcharts can be. In this blog, I will show you how to convert a normal donut chart into the one showing here and you can try the online demo.
I have fixed the demo and it is working fine now. Also I have created a github repository, ExtJs_Examples, which contains all the one off examples code that you will find in joekuan.org (more will be checking-in).
A new version of Highcharts extension (ver 2.4.0) for Sencha ExtJs 4 and Touch 2 is released which supports the latest release of Highcharts 3.0 and fixes the compatibility issues with ExtJs 4.2 and Touch 2.1.1.
Here are the details of the latest changes: Read more