Skip to content

Posts from the ‘Highcharts’ Category


Highcharts extension for Sencha v3.2.1 is here

Highcharts extension v3.2.1 is out. This release includes important performance fix (due to my crap code) and corrupt xAxis display with connectNulls option.


Building ExtJs/Highcharts Application with Sencha Cmd 4 Tool

Here is a blog showing you how to build application with the Highcharts extension using Sencha Cmd 4 tool. First of all, we generate ExtJs 4 application skeleton with the following command example:

~/bin/Sencha/Cmd/ -sdk extjs4 generate app SenchaCmd4Demo sc4demo

Next we copy (don’t use symbolic link) the whole ‘Chart’ directory into the application directory.

cd sc4demo
cp -fr {path}/{to}/Highcharts_Sencha/Chart .

Read more »


Building ExtJs/Highcharts Application with Sencha Cmd 5 Tool

A number of users have asked me how to build ExtJs application with my Highcharts extension using Sencha Cmd tool. I have been ignoring this question with the excuse of way too busy. Now, my new book is done and I am going to address this here. The aim of this article is to demonstrate that the extension does work with sencha command tool.

Lets start off by generating an ExtJs 5 application with the following sencha command:

sencha -sdk extjs5 generate app HighchartsSenchaDemo hcExtJsDemo

Read more »


Learning Highcharts 4 is out now

Learning Highcharts 4

Learning Highcharts 4Learning Highcharts 4 is the 2nd edition of my previous book, Learning Highcharts, and it is out now. This edition covers Highcharts 4 in 15 chapters with around 430+ pages. Four brand new chapters and one rewritten chapter, the rest of the chapters have been much revised with new sections. In a nutshell, it has nearly 50 percent of new material. Learning Highcharts aims to be the most comprehensive Highcharts book in the market. Moreover, the book comes with a myriad of examples showing you how to recreate from real-life charts with step-by-step approach. It also covers topics such as: APIs, events, integration with jQuery Mobile and Sencha’s ExtJs 5 frameworks, server-side PhantomJS script, Highcharts cloud service and plugins. Read more »


Highcharts extension for Sencha ExtJs now includes Highmaps support

The new release now includes Highmaps support. A new online demo is setup and the demo code is included in the new release under the directory, highmaps_demo.extjs4. Read more »


Highcharts extension for ExtJs 4/5 is here now

screen Highcharts Extension 3.1.0 now supports ExtJs 5. It includes couple updates:

– All demos now refer to ExtJs CDN rather than from my demo site

– Added support for Solid Gauge series

Apart from removing deprecated methods in ExtJs, all the existing code should work directly with this extension & ExtJs 5. There are known issues using with sencha command which I still need more user feedbacks and time to resolve this. Hopefully, I will find some time to finalise my Highmaps extension for ExtJs.


Highcharts 4 extension for ExtJs is here

Highcharts 4 extension for ExtJs

A new version of Highcharts extension for ExtJs 4 is released. This extension (3.0.1) is a major release which includes following updates:

  • supports Highcharts 4 including the long waited 3D charts and heatmap (in beta)
  • added missing Pyramid series
  • beta support for Highmaps

The documentation has also been updated. Check out the demos on 3D charts and the license for usage. The demos for Highmaps and heatmap will be coming soon which will be implemented in separate web application (using Sencha Architect).


Web based Gapminder

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


Implementing Stock Picking Wheel in Highcharts

Investor Wheel in Highcharts

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 »


Highcharts: Enhancing User Interaction on Pie/Donut Charts – Dynamic Connector

Donut chart with dynamic connectorRecently, 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.

Read more »