Book Image

Learning Highcharts

Book Image

Learning Highcharts

Overview of this book

Highcharts is a popular web charting software that produces stunning and smooth animated JavaScript and HTML5 SVG graphs. It is among the leading web charting software in the market and has been used in many different sectors ó from financial to social websites. Although it is built on top of jQuery, it is so simple to construct that you need little programming skill to create a simple web chart. Highcharts works on all modern browsers and is solely based on native browser technologies and doesn't require client side plugins like Flash or Java."Learning Highcharts" is a comprehensive tutorial with clear and practical examples. This book follows a step by step approach towards making artistic, presentable, or professional style charts and other types of charts that you won't find elsewhere. It also shows you how to integrate Highcharts with other popular frameworks, such as jQuery, jQuery Mobile, and ExtJS and even how to run it on the server side.The book starts off with an introduction to Highcharts and demonstrates usage of its rich set of options. This is followed by an introduction to each type of basic chart, beginning with simple illustrations and ending with more artistic and productive additions to the charts. The book then guides you how to use the Highcharts API and events handling which are important to build interactive applications. It then goes on to show you how to apply Highcharts onto a popular AJAX Framework or even jQuery, jQuery Mobile and Ext JS. Finally the book shows readers how to set up Highcharts running on server side. "Learning Highcharts" aims to teach you everything you need to know about Highcharts, and take the advanced leap from Flash to JavaScript, with this extremely productive and effective Charting software available, thus helping you build basic charts and even multiple series and axes charts. The book also shows you the flexibility of Highcharts and how to create other special charts. The programming side of APIs and event handling will benefit the readers in building advanced web applications with Highcharts. The book also guides readers on how to integrate Highcharts with popular frameworks such as jQuery Mobile and Ext JS. By the end of the book, you should be able to use Highcharts to suit your web page or application needs.
Table of Contents (19 chapters)
Learning Highcharts
About the Author
About the Reviewers

JavaScript charts on the market

There are many different chart libraries on offer on the market. It is impossible to discuss each one of them. They are open source, but some of them are short-lived in terms of not having a comprehensive set of basic charts, such as pie, line, and bar charts and they look rather unfinished. Here, a handful of commercial and open source products are discussed, including all the basic charts (and some with extras). Some of them still support the Flash plugin, which is an option for backward compatibility, the reason being SVG and canvas are not supported in older browsers. Although some of them are not free for commercial development, which is understandable, they do offer a very affordable price.


See Many libraries use this add-on to emulate canvas prior to IE 9.


jqPlot is packaged with all the basic charts, as well as gauges and candlestick. The software is open source and totally free. jqPlot is based on the jQuery library and uses the canvas approach for plotting charts. This product has a very similar look and feel to Flot/Flotr. Additionally, jqPlot supports animations for column and line charts, but not pie charts, which could be the general issue on canvas approach to produce fancy implementations. In terms of documentation, it is probably the most complete, compared to other free software.


amCharts offers a full set of charts in both 2D and 3D with other interesting charts such as radar, bubble, candlestick, and polar. All the charts look pretty and support animations. amCharts is free for commercial use but a credit label will be displayed in the upper-left corner of the charts. The only minor drawback is that the constructor API style seems a bit clumsy. Each attribute assignment has to be done either by calling a method or as an assignment statement explicitly, but not by the object specifier's style.

Ext JS 4 Charts

Ext JS is a very popular Ajax application framework developed by Sencha, a pioneer company specializing in web application development. In Ext JS 4, it comes with the pure JavaScript charts library unlike its predecessor Ext JS 3, which uses the YUI 2 Flash chart library. As the market trend is moving away from Adobe Flash, Sencha responds with a home brew charting library. Ext JS 4 covers all the basic 2D charts plus the gauge and radar charts, and all the charts support animations. The license is free for open source and noncommercial usage, and a developer license is needed for commercial development. A great benefit of Ext JS 4 charts is the integration with the comprehensive set of UI components, for example, for a chart with a storage framework, displaying/updating both the chart and the table of data with editors is very simple to do.

YUI 3 Charts

YUI 3 is another popular Ajax application framework under BSD license. YUI 3 has removed their support for Flash and implemented their own JavaScript charts. The new version comes with all the basic charts in 2D without any animation's support. However, the line charts look just above average, and the column and pie charts look plain and basic. Like Sencha's Ext JS, charts in YUI can be integrated with other components supplied by the framework.


FusionCharts is probably one of the most impressive looking and has the most comprehensive charts out there in the market. Not only does it come with a full-range variety of interesting 2D charts (radar, dial, map, and candlestick) available as a separate product, but it also offers fully interactive 3D charts. All the chart animations are very professionally done. Basically, FusionCharts can be run in two modes, Flash or JavaScript. For the JavaScript mode, FusionCharts use their own extended Highcharts library to achieve the same 2D and 3D effect, and look the same as their Flash version. Although FusionCharts comes with a higher price tag, this is the only product that has the best looking charts and rotatable 3D charts.

JS Charts

JS Charts offers all the basic charts in both 2D and 3D looks. JS Charts uses the HTML5 canvas technology to render charts. The bars and lines look good with animations, however, the presentation of a pie chart is slightly behind and it offers no animation support. The product is free for noncommercial use and commercial license is on per domain basis. The constructor API is similar to amCharts done via method calls.

Flot and Flotr

Flot is an MIT licensed freeware offering 2D charts but without any animation at the time of writing. It is a canvas-based product built on the jQuery framework. The software produces nice-looking line charts but not the bar and pie charts (which require a plugin). Documentation is not very comprehensive and there are not many update activities within the product. There is also another chart package, Flotr, which is inspired by the Flot line chart style and is based on the Prototype framework. Flotr offers all the basic canvas charts with better looking bar and pie charts, and includes candlestick and radar charts. However, Flotr has even fewer activities than Flot; both products seem to be heading towards the end of their lifecycle.