Charts are used to represent mass data with the help of visual aid. Initially they were made manually using calculators doing the math. Then came software like MS Excel and charts became an inseparable part of Powerpoint presentations during 1990s.
In this decade, browsers took 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.
Long story short, we have tons of libraries now. Some very advanced libraries like D3 and some very simple libraries like chartjs and few others exist but Highcharts is a combination of both. It is extremely easy to use, thanks to the documentation and fulfills modern requirements.
Well let us start the tutorial. First of all, download the Highcharts v4.0.1 from its download page. Extract it and copy the js/highcharts.js file and paste it the root folder. Its only dependency is jquery (that too is optional with its standalone version) which I prefer to include locally. CDN might 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 proceeding , let us understand some basic definitions as given in the docs.
- 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.
There are few other like Navigators, Scroll Bars, Zooming etc. which are optional and are used if requirement arises. All our divisions are of 400px in width, hence :
<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>
Javascript part is here.
$(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'
}]
});
});
See the tooltip here. It denotes the X and Y coordinate data at the data point.
Spline chart shows the data in a continuous manner with curves rather than sharp peaks. 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'
}]
});
Even the bar chart is similar. Just change the type to bar and pie respectively.
It is useless to generate static charts. Definitely, we can give user the feature to build his own charts. Injecting AJAX data is easier than holding a spoon.
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);
}
});
}
So 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.
So fall-in-love with graphs !
Github Repo and Demo.