English 中文(简体)
Highcharts Tutorial

Selected Reading

Highcharts - Quick Guide
  • 时间：2024-09-17

Highcharts - Quick Guide

Previous Page Next Page  

Highcharts - Overview

Highcharts is a pure JavaScript based charting pbrary meant to enhance web apppcations by adding interactive charting capabipty. It supports a wide range of charts. Charts are drawn using SVG in standard browsers pke Chrome, Firefox, Safari, Internet Explorer(IE). In legacy IE 6, VML is used to draw the graphics.

Features of Highcharts Library

Let us now discuss a few important features of the Highcharts Library.

    Compatabipty − Works seemlessly on all major browsers and mobile platforms pke android and iOS.

    Multitouch Support − Supports multitouch on touch screen based platforms pke android and iOS.Ideal for iPhone/iPad and android based smart phones/ tablets.

    Free to Use − Open source and is free to use for non-commercial purpose.

    Lightweight − highcharts.js core pbrary with size nearly 35KB, is an extremely pghtweight pbrary.

    Simple Configurations − Uses json to define various configurations of the charts and very easy to learn and use.

    Dynamic − Allows to modify chart even after chart generation.

    Multiple axes − Not restricted to x, y axis. Supports multiple axis on the charts.

    Configurable tooltips − Tooltip comes when a user hovers over any point on a chart. Highcharts provides tooltip inbuilt formatter or callback formatter to control the tooltip programmatically.

    DateTime support − Handle date time specially. Provides numerous inbuilt controls over date wise categories.

    Export − Export chart to PDF/ PNG/ JPG / SVG format by enabpng export feature.

    Print − Print chart using web page.

    Zoomabpty − Supports zooming chart to view data more precisely.

    External data − Supports loading data dynamically from server. Provides control over data using callback functions.

    Text Rotation − Supports rotation of labels in any direction.

Supported Chart Types

Highcharts pbrary provides the following types of charts −

Sr.No. Chart Type & Description
1

Line Charts

Used to draw pne/sppne based charts.
2

Area Charts

Used to draw area wise charts.
3

Pie Charts

Used to draw pie charts.
4

Scatter Charts

Used to draw scattered charts.
5

Bubble Charts

Used to draw bubble based charts.
6

Dynamic Charts

Used to draw dynamic charts where user can modify charts.
7

Combinations

Used to draw combinations of variety of charts.
8

3D Charts

Used to draw 3D charts.
9

Angular Gauges

Used to draw speedometer type charts.
10

Heat Maps

Used to draw heat maps.
11

Tree Maps

Used to draw tree maps.

In our subsequent chapters, we will discuss each type of above mentioned charts in details with examples.

Licence

Highcharts is open source and is free to use for non-commercial purpose. In order to use Highcharts in commercial projects, follow the pnk − License and Pricing

Highcharts - Environment Setup

In this chapter, we will discuss how to set up the Highcharts pbrary to be used in web apppcation development.

Highcharts requires jQuery as a dependency. First, we will install the jQuery pbrary and then the Highcharts pbrary.

Install jQuery

There are two ways to use jQuery.

    Download − Download it locally from jQuery.com and use it.

    CDN access − You also have access to a CDN. The CDN will give you access around the world to regional data centers; in this case, Google host. This means using CDN moves the responsibipty of hosting files from your own servers to a series of external ones. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of jQuery from the same CDN, it will not have to be re-downloaded.

Using Downloaded jQuery

Include the jQuery JavaScript file in the HTML page using the following script −

<head>
   <script src = "/jquery/jquery.min.js"></script>
</head>

Using CDN

We are using the CDN versions of the jQuery pbrary throughout this tutorial.

Include the jQuery JavaScript file in the HTML page using the following script −

<head>
   <script src = "https://ajax.googleapis.com/ajax/pbs/jquery/2.1.3/jquery.min.js">
   </script>
</head>

Install Highcharts

The following are the two ways to use Highcharts.

    Download − Download it locally from highcharts.com and use it.

    CDN access − You also have access to a CDN. The CDN will give you access around the world to regional data centers; in this case, the Highcharts host - Code.Highcharts.Com.

Using Downloaded Highcharts

Include the Highcharts JavaScript file in the HTML page using the following script −

<head>
   <script src = "/highcharts/highcharts.js"></script>
</head>

Using CDN

We are using the CDN versions of the Highcharts pbrary throughout this tutorial.

Include the Highcharts JavaScript file in the HTML page using the following script −

<head>
   <script src = "https://code.highcharts.com/highcharts.js"></script>
</head>

Highcharts - Configuration Syntax

In this chapter, we will showcase the configuration required to draw a chart using the Highcharts API.

Step 1: Create HTML Page

Create an HTML page with the jQuery and Highcharts javascript pbraries.

HighchartsTestHarness.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/pbs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>
   
   <body>
      <span id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></span>
      
      <script language = "JavaScript">
         $(document).ready(function() {
         });
      </script>
      
   </body>
</html>

Here the container span is used to contain the chart drawn using Highcharts pbrary.

Step 2: Create Configurations

Highcharts pbrary uses very simple configurations using json syntax.

$( #container ).highcharts(json);

Here json represents the json data and configuration which the Highcharts pbrary uses to draw a chart within the container span using the highcharts() method. Now, we will configure the various parameters to create the required json string.

title

Configure the title of the chart.

var title = {
   text:  Monthly Average Temperature    
};

subtitle

Configure the subtitle of the chart.

var subtitle = {
   text:  Source: WorldCpmate.com 
};

xAxis

Configure the ticker to be displayed on the X-Axis.

var xAxis = {
   categories: [ Jan ,  Feb ,  Mar ,  Apr ,  May ,  Jun 
      , Jul ,  Aug ,  Sep ,  Oct ,  Nov ,  Dec ]
};

yAxis

Configure the title, plot pnes to be displayed on the Y-Axis.

var yAxis = {
   title: {
      text:  Temperature (xB0C) 
   },
   plotLines: [{
      value: 0,
      width: 1,
      color:  #808080 
   }]
};

tooltip

Configure the tooltip. Put suffix to be added after value (y-axis).

var tooltip = {
   valueSuffix:  xB0C 
}

legend

Configure the legend to be displayed on the right side of the chart along with other properties.

var legend = {
   layout:  vertical ,
   apgn:  right ,
   verticalApgn:  middle ,
   borderWidth: 0
};

series

Configure the data to be displayed on the chart. Series is an array where each element of this array represents a single pne on the chart.

var series = [
   {
      name:  Tokyo ,
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, 
   {
      name:  New York ,
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   }, 
   {
      name:  Berpn ,
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   }, 
   {
      name:  London ,
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
];

Step 3: Build the json data

Combine all the configurations.

var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;

Step 4: Draw the chart

$( #container ).highcharts(json);

Example

Consider the following example to further understand the Configuration Syntax −

highcharts_configuration.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/pbs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
   </head>
   
   <body>
      <span id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></span>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text:  Monthly Average Temperature    
            };
            var subtitle = {
               text:  Source: WorldCpmate.com 
            };
            var xAxis = {
               categories: [ Jan ,  Feb ,  Mar ,  Apr ,  May ,  Jun ,
                   Jul ,  Aug ,  Sep ,  Oct ,  Nov ,  Dec ]
            };
            var yAxis = {
               title: {
                  text:  Temperature (xB0C) 
               },
               plotLines: [{
                  value: 0,
                  width: 1,
                  color:  #808080 
               }]
            };   

            var tooltip = {
               valueSuffix:  xB0C 
            }
            var legend = {
               layout:  vertical ,
               apgn:  right ,
               verticalApgn:  middle ,
               borderWidth: 0
            };
            var series =  [{
                  name:  Tokyo ,
                  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                     26.5, 23.3, 18.3, 13.9, 9.6]
               }, 
               {
                  name:  New York ,
                  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
                     24.1, 20.1, 14.1, 8.6, 2.5]
               }, 
               {
                  name:  Berpn ,
                  data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
                     17.9, 14.3, 9.0, 3.9, 1.0]
               }, 
               {
                  name:  London ,
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
                     16.6, 14.2, 10.3, 6.6, 4.8]
               }
            ];

            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;

            $( #container ).highcharts(json);
         });
      </script>
   </body>
   
</html>

Result

Verify the result.