Highcharts is a Javascript library which can be used to create interactive charts easily. The required files can be downloaded from here.
Here are some of the advantages of using Highcharts:
- Highchart offers a wide variety of chart options.
- Its Interactive.
- Easy to set and update the values.
- Provides and option to print the charts or save the charts as PDF, JPG PNG etc… (This option can be turned off as well.)
- Highcharts come with multiple themes/color-schemes. You can use set custom colors as well.
In a recent project I got a chance to user Highcharts. The requirements were:
- Same values has to be represented in a Bar chart and as a line chart.
- Values should be set through JQuery.
- The values should update based on user interactions.
So, let’s get to work.
First step is to import the Highcharts Javascript file to my code.
<script type="text/javascript" src="js/highcharts/highcharts.js">
I created two divs using bootstrap, one for bar graph and other for line graph.
Bar Chart Div
Line Chart Div
To set the colors for Highcharts, the following code was added:
Highcharts.Color.prototype.parsers.push({
regex: /^[a-z]+$/,
parse: function(result){
var rgb = new RGBColor(result[0]);
if (rgb.ok) {
return [rgb.r, rgb.g, rgb.b, 1]; // returns rgba to Highcharts
}
}
});
To add values to the Bar chart
Highcharts.chart('AnalyticsCanvas', {
chart: {
type: 'bar',
backgroundColor: 'transparent'
},
title: {
text: ''
},
xAxis: {
categories: ["January", "February", "March", "April", "May"]
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
reversed: true
},
credits: {
enabled: false
},
plotOptions: {
bar: {
stacking: 'normal',
pointWidth: 25,
borderWidth: 0
}
},
colors: ['red', 'orange', 'green', 'blue', 'purple'],
series: [{
name: "Type 1",
data: [11245, 40015, 36677, 33422, 43234]
},
{
name: "Type 2",
data: [44556, 15878, 66677, 33422, 33234]
},
{
name: "Type 3",
data: [33445, 19455, 26677, 33422, 63234]
},
{
name: "Type 4",
data: [33333, 21878, 16677, 13422, 23234]
},
{
name: "Type 5",
data: [30556, 55878, 26677, 13422, 53234]
}
]
});
Here’s the result :
Setting the values for Line Chart
Highcharts.chart('AnalyticsLineCanvas', {
title: {
text: ''
},
subtitle: {
text: ''
},
yAxis: {
title: {
text: ''
}
},
legend: {
reversed: true
},
credits: {
enabled: false
},
xAxis: {
categories: ["January", "February", "March", "April", "May"]
},
plotOptions: {
series: {
label: {
connectorAllowed: false
}
}
},
colors: ['red', 'orange', 'green', 'blue', 'purple'],
series: [{
name: "Type 1",
data: [11245, 40015, 36677, 33422, 43234]
},
{
name: "Type 2",
data: [44556, 15878, 66677, 33422, 33234]
},
{
name: "Type 3",
data: [33445, 19455, 26677, 33422, 63234]
},
{
name: "Type 4",
data: [33333, 21878, 16677, 13422, 23234]
},
{
name: "Type 5",
data: [30556, 55878, 26677, 13422, 53234]
}
]
});
Here’s the result :
Now to update the values.
I stored the values in a variable like shown below:
var updatedseries = [{
name: "Type 1",
data: [11245, 40015, 36677, 33422, 43234]
},
{
name: "Type 2",
data: [44556, 15878, 66677, 33422, 33234]
},
{
name: "Type 3",
data: [33445, 19455, 26677, 33422, 63234]
},
{
name: "Type 4",
data: [13234, 18885, 16677, 33422, 33234]
},
{
name: "Type 5",
data: [46774, 21675, 36677, 13422, 63234]
}
];
Then I stored the chart references in a variable like shown below:
var chart1 = $('#AnalyticsCanvas').highcharts();
var chart2 = $('#AnalyticsLineCanvas').highcharts();
Now the values must be updated based on a user interaction. Let’s assume that the user clicks on a button and our code fetches the updated values from the database. To apply the updated values to the current chart, use the following code.
chart1.update({
series: updatedseries
});
chart1.redraw();
chart2.update({
series: updatedseries
});
chart2.redraw();
This code will apply the new values to the charts and redraw the chart with the new values.
Wasn’t that simple?
Hope this helps someone. 🙂
codetyrant 