Book Image

Instant Highcharts

By : Cyril Grandjean
Book Image

Instant Highcharts

By: Cyril Grandjean

Overview of this book

Nowadays, a lot of systems and tools are developed using web technologies. Customers need to analyze their data using charts on their computer or their mobile device. With the Highcharts library, it is possible to create highly customizable and interactive charts on any computer or a mobile device without installing any plugins. Instant Highcharts is a practical, hands-on guide that provides you with a step-by-step approach, which will help you to take advantage of the powerful features of Highcharts. With Instant Highcharts, you will learn everything you need to know to create your own dynamic charts with your own data inside your web application. Instant Highcharts will present you with different features available with Highcharts, and helps you to create your own chart. You will start with Highcharts installation and then learn to create your own customized column, bar, area, and pie charts with your data. You will learn to add some interactive functionality such as the zoom feature or to export your chart into a printable format. We will also give you tips that will help you to improve your skills with Highcharts.
Table of Contents (7 chapters)

So, what is Highcharts?


Highcharts is a JavaScript library that will allow you to implement interactive and dynamic charts inside your web application. Highcharts has been written in pure HTML5 and JavaScript, which will allow you to display charts made with Highcharts natively in your web browser without using any plugins such as Adobe Flash or Microsoft Silverlight. Another strength of Highcharts is that Highcharts' charts are created with SVG or VML (for Internet Explorer), which are vector image formats. Compared to the image format that are using pixels, such as JPEG, PNG or GIF, the vector image formats doesn't lose quality if the image is displayed bigger. Therefore, with Highcharts, you will be able to display your charts on any size of screen without any difference in terms of chart quality. Nevertheless, it is possible to export your chart in JPEG, PNG, or GIF by using the export module.

With Version 3.0 of Highcharts, you can create a large variety of charts including not only line, column, bar, pie charts, but also angular gauges and polar charts. The main benefit of Highcharts is the ability to combine different charts, and also the possibility of customization. With Highcharts, there are a lot of possibilities, such as adding multiple axes, customizing the tool tip according to your data, adding several plot bands and plot lines to your graph, and changing the legend position.

Line and column charts combined with two Y-Axes (Source: Highcharts)

With Highcharts, you can implement some interactive features, such as the ability to zoom into some parts of your chart (for example, refer to the following chart), add a point to your chart dynamically, and refresh the data at runtime.

Zoom inside some parts of the chart (Source: Highcharts)

Finally, with Highcharts, it is also possible to draw your own shape inside your web application. This feature will allow you to create your own chart, if the large variety of charts already provided by Highcharts doesn't answer your needs.

Customized drawing with Highcharts (Source: Highcharts)