”;
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 libraries.
HighchartsTestHarness.htm
<html> <head> <title>Highcharts Tutorial</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script src = "https://code.highcharts.com/highcharts.js"></script> </head> <body> <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div> <script language = "JavaScript"> $(document).ready(function() { }); </script> </body> </html>
Here the container div is used to contain the chart drawn using Highcharts library.
Step 2: Create Configurations
Highcharts library uses very simple configurations using json syntax.
$(''#container'').highcharts(json);
Here json represents the json data and configuration which the Highcharts library uses to draw a chart within the container div 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: WorldClimate.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 lines 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'', align: ''right'', verticalAlign: ''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 line 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: ''Berlin'', 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/libs/jquery/2.1.3/jquery.min.js"> </script> <script src = "https://code.highcharts.com/highcharts.js"></script> </head> <body> <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div> <script language = "JavaScript"> $(document).ready(function() { var title = { text: ''Monthly Average Temperature'' }; var subtitle = { text: ''Source: WorldClimate.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'', align: ''right'', verticalAlign: ''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: ''Berlin'', 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.
”;