HighChart in JavaScript

Introduction

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 the 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.

1. Create a "<div>" in your web page (for e.g. employee.aspx).

   <div id="empcontainer" style="width: 100%; height: 400px;"></div>
   

2. 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]
               }
           ]
       });
   });
   

3. empcontainer is the div/container we created on the .aspx page where the bar chart will be placed.
4. The following is the screenshot of the chart.
   
5. This chart shows the data representation of two employees showing the individual monthly attendance for the months of January, February, and March.
6. Please see the following to check the live implementation: http://jsfiddle.net/ksrawat/L6tkf/

Summary

This article covers the basics and introduction to high charts. 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.