Amazing Charts for Web Applications with HighCharts

In last few years, web browsers have evolved and so have the web apps. Modern web apps are highly performant and it barely feels that you are working on a web app and not on a desktop or offline software. With the advent of modern frameworks and services, web applications are now capable of handling huge amounts of data efficiently. Charts and graphs have always been the best tools to represent statistical data. They not only represent data in a clean and easily understandable manner but also make the web pages look beautiful and attractive. The user does not have to deal with tables, rows, and columns for data analysis.

One of the world's most popular JS Charts library is HighCharts which is one of my personal favorites. In this article, we will get introduced to HighCharts and will also learn to use it. We will build a simple, beautiful and dynamic chart in a simple web page as well.

HighCharts is available as a JavaScript file that you can include in your web page using a simple script tag. If you are using a package manager like NPM or Bower, check the docs for installation. It is really straight-forward and simple.

Let build a chart using HighCharts in a simple blank HTML page. Start by adding the script tag as shown below.

Next, add a div element on your page where you want to display the chart. Apply any styling that you want to it.

As you can see, we have applied a CSS style, display: block, so that chart takes up as much space as needed and expands horizontally.

Because of the highcharts.js file, we have access to a global JS object called Highcharts. We can now use this object in our JavaScript code to define our chart and its properties.

This is how a simple Chart object is defined.

Here we are using the chart() function to instantiate a new chart using the Highcharts global object. This function takes in the id of the container element as the first parameter and a JSON object defining the actual chart properties as the second.

In our very case, "container" is the id of the div element. The JSON object, however, contains quite a bunch of stuff. Let break it down piece by piece.

The chart object specifies the chart type, here the type is bar. This will generate a bar chart. Some other chart types are line, spline etc. HighCharts offers many different types of charts. We will have a look at some of them later in the article.

Next, we have a title for the chart with just once property called text. This specifies the title of the chart. You can also specify the font color, size, and other properties but for now, we will keep it simple.

The two axes of a chart are defined by the xAxis and yAxis properties. The xAxis defined how the xAxis will be labeled for values and yAxis simply takes a title.text to represent the values on the y-axis. Here we are passing in an array called categories for the xAxis. The elements of these arrays are displayed in the chart as respective indices. For example, Apples will correspond to the first point on the x-axis, Bananas to the second and Oranges to the third.

Finally, we have a series object that contains the actual data that populates the chart. Series is an array of data for one data series in the chart. Each element in this array contains at least one array that defined the data points to be plotted on the chart.

In our very case, we have two objects inside the series array which means that there will be two series represented graphically within one chart. This comes in handy when you want to display sets of data for comparative purposes. Both the series objects contain a name and data. The name contains the text of the series name, and data is an array of numerical values as data points.

Let's save what we have so far and see what we get. If everything is done properly, you should see a chart like the one below.

The two series are automatically displayed in different colors. Do not be confused by the misrepresentation of the axes as the x-axis is represented vertically in the above bar chart.

So that was the simplest of the charts that HighCharts lets you build. You can many different types of Line Charts, Area Charts, Column and Bar Charts, Pie Charts, Scatter and Bubble Charts, 3D charts and many more.

Next, let's see how to create a simple pie chart. Since a pie chart represents different information than a bar chart, the data object will have a slightly different structure. The HTML code will remain the same, we do not have much going on there. Let's have a look at the bare minimum JS code required to create an awesome looking pie chart.

In the code above, we have just changed the value of the type to be pie. This changes the chart to a pie chart. Next comes the data which passed to the series object. Here is how it looks.

The series object is an array. Each object in this array contains information about one pie chart. Along with name and colorByPoint which are self-explanatory, the data object is further an array that contains information about the slices of a pie-chart. Each object in the data array contains two important properties, y and name. Name is obviously the name displayed for that particular slice and y is the percentage of the circle it takes. For the above screenshot, the data represents the market share for leading browsers, so Chrome is leading with 56.33% of the market share. The same information is given for more browsers as well. The sum of the y's of all the objects in data array should be 100.

Here is how the pie chart looks like.

Next up, let's have a look at a more complicated example, a donut chart. A donut chart is just like a pie-chart but it has given one more level of information. So within a slice, it provides more information. It does so by creating two series within the same pie chart and set's different sizes for each of them. For our Browsers example, a donut chart can provide information, for example, about versions of Chrome that are being used more than the others within the slide for Chrome.

Here is how the code will look like.

The above code is the first series. Simple, right? Just as we did in the last example. One new thing here is the color property. We do this do make sure that both the series have similar colors to represent related data. You can use any colors that you like. I like to use the HighCharts' built in colors. You can do so by,

This gives an array of colors, which we are using in the code above. Finally, we have reduced the size to just 60% so that the radius of the pie chart's first series is not taking up all the space. We will place the second series, starting from 60% and extending up to 80% of the radius.

The code for the second series will look like this,

As you can see, we are drilling down in the information in the first series and providing a lot more information this time. We are not just defining share of the browsers, but we talking about the specific versions of each browser.  And once again, we have the same three properties, name, y and optionally, color.

We have also defined a size for this series, which is 80% and an innersize which is 60%. This makes sure that the second series looks like a disc, and not a circle.

The result looks somewhat like this.

Awesome, isn't it?

Now, let's work on a more dynamic example. The next chart we will build will update with new data every few seconds.

The HTML will remain the same, a div element with an id.

In JavaScript, the first thing we will do is create two arrays and populate them with 16 random numbers each. The following code does that. You can copy the code or write your own login to generate random or any set of points.

These will act as base data for the chart before the chart starts to update. We then need to pass these array to our series array-objects.

You can see that we have use dataset1 and dataset2 arrays for the series' data. We have also modified the chart title and axis text to make it more exciting. The type of the chart is now changed to spline. You are free to play around with whatever you want.

Now comes the most exciting part. We will write a small piece of code to update the chart data i.e. dataset1 and dataset2 every few seconds. The setInterval() function of JavaScript will help us do that.

In the code above, the setInterval function is used to add new points to the chart datasets every 2 seconds. The addPoint function can be used to add new data points. It is accessible on the series object, not on the chart because you can only add a point to a series. There we need to use myChart.series[index].addPoint.

The addPoint function takes in three parameters. The first parameter is the numerical value of the new data point to be added. The second parameter is a boolean indicating whether to redraw the chart of now, and the third is also a boolean which indicates where adding a new point should remove one older data point from the dataset.

With the above code in place, you should get a self-updating dynamic chart like the one below.

So much fun, right? Feel free to play around with different kinds of charts. Check the official docs of HighCharts for more information on how to achieve exactly what you want.

Happy Reading.