Charts are used to represent mass data with the help of visual aids. Initially, they were created manually, using calculators to do the math. Then came softwares like MS Excel and charts became an inseparable part of Powerpoint presentations during 1990s.
In this decade, with the internet boom, browsers have taken over everything. The strengthening CSS3 boosted the math-loving-techies to develop libraries for charts so that one need not switch to heavy software by automating the system of creation of charts using dynamic data from database and visualize it on the browser. The biggest advantage of this was to bring down the requirements to a bare minimum- one just needed a computer connected to the internet and a web browser to view your creations.
Long story short, we have tons of libraries now. Some very advanced libraries like D3.js and some very simple libraries like Chart.js. However, Highcharts is a combination of both. It is extremely easy to use, thanks to the documentation and fulfills modern requirements.
Let us start the tutorial by downloading the required files of Highcharts (currently v4.0.1) from its download page. Extract it, and move the js/highcharts.js file to the root folder (which would be assumed in the code used in the tutorial). Its only dependency is jQuery. But, it also comes with a standalone version, which I prefer to include locally. A CDN link for highcharts may also be used.
We will include 3 JavaScript files which are jQuery, highcharts and the script to use highcharts framework.
As usual we start with index.html and include the 3 javascript files (in the same sequence).
<html>
<head>
<title>High Charts Examples</title>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Before we proceed, let us understand some basic definitions as given in the documentation.
- Titles and Subtitle - The name of the chart is the title and label names to X and Y axis are subtitles.
- Axes - These are X and Y axis except they are absent in pie charts.
- Series - It is the data supplied to the charts.
- Tooltip - The ability to mark certain points and naming them is called tooltips. The concept is similar to a jQuery UI tooltip.
There are few other terms like Navigators, Scroll Bars and Zooming, which are optional and are used if requirement arises. All our divisions are of 400px in width, hence, we define that in our CSS.
<style type="text/css">
div{
width:400px;
}
</style>
We start with a simple line chart. We will use real data. Its the rainfall pattern across various states of India sorted monthwise. The link of data is here. We create a div in the index.html with id='line_chart'. We will reference this in script.js and initiate the charts.
<h3>Line Chart</h3>
<div id='line_chart'></div>
$(function () {
$('#line_chart').highcharts({
title: {
text: 'Rainfall Pattern of Andaman Nicobar in 2010'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
title:{
text:'Months'
}
},
yAxis:{
title:{
text:'Rainfall in mm'
}
},
series: [{
data: [79.8,26,1.7,28.3,233,502,443,319,234.8,249.1,583.2,355.7],
name: 'Rainfall Data'
}]
});
});
Let us include the data of another state as well just to compare between the two.
$(function () {
$('#line_chart').highcharts({
title: {
text: 'Rainfall Pattern in States (2010)'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
title:{
text:'Months'
}
},
yAxis:{
title:{
text:'Rainfall in mm'
}
},
series: [{
data: [79.8,26,1.7,28.3,233,502,443,319,234.8,249.1,583.2,355.7],
name: 'Andaman and Nicobar'
},
{
data: [72.8,66,4.5,28.3,123,502,43,59,234.8,29.1,583.2,35.7],
name: 'Karnataka'
}]
});
});
Notice the tooltip in the following screenshot. It denotes the X and Y coordinate data at the data point.
A spline chart shows the data in a continuous manner with curves rather than sharp peaks. A spline works with an existing list of points, and draws a smooth curve through them. It is declared exactly like line chart but the chart.type variable is changed to spline.
// in index.html
<div id='spline_chart'></div>
Javscript portion is as follows. Notice the change.
$('#spline_chart').highcharts({
chart:{
type: 'spline'
},
title: {
text: 'Rainfall Pattern in States (2010)'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
title:{
text:'Months'
}
},
yAxis:{
title:{
text:'Rainfall in mm'
}
},
series: [{
data: [79.8,26,1.7,28.3,233,502,443,319,234.8,249.1,583.2,355.7],
name: 'Andaman and Nicobar'
},
{
data: [72.8,66,4.5,28.3,123,502,43,59,234.8,29.1,583.2,35.7],
name: 'Karnataka'
}]
});
Creating the bar or pie charts are easy. Just change the type to bar and pie respectively.
The number of use cases of generating static charts are not so much. We can therefore give the user the feature to build his own charts. Here's how to create charts using data received from an AJAX call.
function create(){
var options = {
chart: {
renderTo: 'report',
type: 'column'
},
title: {
text: 'Day Wise Rainfall Report'
},
xAxis: {
title : {
text: 'Date'
}
},
yAxis: {
min: 0,
title: {
text: 'Rainfall'
}
},
series: [{
}]
};
$.ajax({
url: '/controller/action',
success: function(chartdata){
options.series[0].name = "Rainfall";
options.series[0].data = JSON.parse(chartdata)['rainfall'];
options.xAxis.categories = JSON.parse(chartdata)['date'];
var chart = new Highcharts.Chart(options);
}
});
}
With this, we come to the end of this tutorial. I hope it was not too difficult to learn this library. Some more customization options can be seen in the docs. I bet one of the easiest and ready to learn docs with most gradual learning curve.
Why not fall in love with graphs?
The Github Repo contains the basic code used in this tutorial and here is a Demo.