Tutorial #12
Display a Graph with Highcharts.js Intermediate   2013-11-06


Charts can be a really effective way to present data to your users, whether you are working with a handful of numbers or millions. When your dataset changes over time, such as a graph of a stock price, you can either generate the chart on the server or in the browser using JavaScript. Doing it in the browser has the big advantage that you can interact with the chart. For example you might click on a data point and see the specific value in a tooltip.

There are a number of excellent JavaScript libraries that you can use to create charts:

At one end of the spectrum morris.js from Olly Smith provides a simple way to create very nice charts.

At the other end D3.js is a very sophisticated package for working with data that includes charts among a wide range of displays.

In the middle is Highcharts JS which provides a incredibly rich suite of tools to create and customize charts of every kind. It is fairly easy to use, as long as you have some familiarity with JavaScript. It is free to use for non-commercial applications and is reasonably priced for commercial use.

In this tutorial I am going to use Highcharts to draw a typical Line Graph that will look like this:

Screenshot of the demo for this tutorial

Step by Step

There are so many options available for Highcharts that the best way to get started is to copy one of their many Highcharts Demos, replace their data with your own and then changing the options to suit your chart.

All the configuration is done in the JavaScript code and so for this tutorial I am going to jump straight to the next section...

Understanding the Code

There are four parts to this block of code. The first two script tags load the core highcharts.js library and an extra module exporting.js which allows you to download different representations of the chart.

The div is a placeholder for the graph once we create it. The width and height values define the size of the graph.

All our configuration takes place in the final script block. A wrapper function is defined which calls the highcharts function on the container div.

The parameters passed to the highcharts function are a series of hashes, each named after the component that we want to define. So we have title, xAxis,yAxis, series, etc.

series specifies the data that we want to plot. It takes an array of series - but here we have only one. Each series is a hash with a name and an array of data values.

xAxis specifies the categories or values used to mark this axis. In this example these are months.

yAxis in this example is pretty minimal. Highcharts will figure out the min and max values based on the actual data. In this case I want to override the min value, setting it to 0.I specify a title for the axis and draw some horizontal lines.

For a basic chart, that is pretty much it - the other options create a title and hide the legend. Note that you don't need to define any colors, fonts, etc. as Highcharts has a good set of defaults.

You can customize just about anything if you choose to. Look at the extensive Highcharts Documentation and API Reference

Go to the demo page and mouse over the data points. You will see tooltips that show specific data values. Click on the icon in the top right of the chart and look at the available options for downloading the chart in various formats. All of this comes as part of the library with no extra code or configuration necessary.

Highcharts is really a very nice library to work with. Check out the Highcharts Demos to find the one that suits your application.

Screenshot of the demo for this tutorial

Then click on Edit in jsFiddle to get an editor loaded with that example. Try changing some of the options and click Run to see the updated graph.

Screenshot of the demo for this tutorial

Everything is specified in JavaScript so you need to be careful that you have the right number of brackets, commas and semi-colons in the right places. If you don't see the chart displayed after making a change, check the JavaScript console in your browser and you'll probably see where the problem lies.

Because the chart is specified solely in JavaScript, you can pass data from a server into the chart using JSON. Look for a tutorial on this in the future.

Finally, please take a second look at that graph - those numbers are REAL - the humanitarian crisis in Syria is getting worse every day.
Please consider a donation to Doctors Without Borders to help out. - thanks --Rob

Code for this Tutorial

Share this tutorial

Comment on this Tutorial

comments powered by Disqus