In this article we study and learn about one of the chart flavors used most often offering smooth and stunning JavaScript graphs called "High Charts".
Highcharts is a charting library written in HTML5 and JavaScript providing interactive and intuitive charts for data representation.
It currently supports line, spline, area, arespline, bar, pie, scatter and angular gauges etc.
Let's see step-by-step implementation.
Step 1: Installation
- Highcharts requires two files (Highchart.js) and jQuery
- Use this code to include Highcharts with jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
Step 2: Creating the first chart
Here in this example we will create a bar chart showing employee attendance.
- Create a "<div>" in your web page (for e.g. employee.aspx)
<div id="empcontainer" style="width:100%; height:400px;"></div>
- Now the chart will be initialized within the script tags.
$(function () {
$('#empcontainer').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Attendance Comparison'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
yAxis: {
title: {
text: 'Attendance (# of Days)'
}
},
credits:{
enabled: false
},
series: [{
name: 'Kamal',
data: [25, 30, 28]
}, {
name: 'Vikas',
data: [15, 22, 30]
}],
});
});
- empcontainer is the div/container we created in the .aspx page where the bar chart will be placed.
- The following is the screenshot of the chart:
![HighChart.jpg]()
- This chart shows the data representation of two employess showing the individual monthly attendance for the months of the January, February and March.
- Please see the following to check the live implementation:
http://jsfiddle.net/ksrawat/L6tkf/
Summary
This article covers the basics and introduction to highcharts. In future articles we will implement "How to set data dynamically" and change other attributes.
Thanks for reading this article and please let me know your feedback.