Instant Highcharts: Learn to create dynamic and customized charts instantly using Highcharts

Add the subtitle section and set the text to Statistics of 2012:

subtitle: {
   text: 'Statistics of 2012'
}

You should have the expected result as shown in the following chart:

Add the credit section and set the text to Packt Publishing and set the href section with http://www.packtpub.com:

credits: {
   text: 'Packt Publishing',
   href: 'http://www.packtpub.com'
}

You should have the expected result as shown in the following chart:

Rename the previous series with the name 2011 and add another series with the name 2012 and a new set of data:

series: [{
       name: '2011',
       data: [1000, 2500, 1500]
   },
   {
       name: '2012',
       data: [1200, 2200, 1700]
}]

You should have the expected result as shown in the following chart:

For the plot line, we add our element inside the plotLines section of our Y Axis with a red color set in hexadecimal format with a width of 2 pixels and a value set to 2500.

plotLines: [{
   color: '#FF0000',
   width: 2,
   value: 2500
}]

Then, for the plot band, we add our element inside the plotBands section of our Y Axis with a green color set in RGBA format from the values 1000 to 1500. The fourth parameter of our rgba function will allow us to have a bit of transparency. This parameter has to be set between zero (Transparent) and one (Opaque). We will also add a label with a text set to Expected Sales.

plotBands: [{
   color: 'rgba(124,252,0, 0.3)',
   from: 1000,
   to: 1500,
   label: {
      text: 'Expected Sales'
   }
}]

For your yAxis, you should have the following code:

yAxis: {
   title: {
      text: 'Sales'
   },
   plotLines: [{
      color: '#FF0000',
      width: 2,
      value: 2500
   }],
   plotBands: [{
       color: 'rgba(124,252,0, 0.3)',
       from: 1000,
       to: 1500,
       label: {
          text: 'Expected Sales'
       }
   }]
}

You should have the expected result as shown in the following chart:

Add the tooltip section and set the parameter valueSuffix with the value Units. This parameter defines the text that will be added at the end of the number.

tooltip: {
   valueSuffix: 'Units'
}

You should have the expected result as shown in the following chart:

Add the legend section. Set the align parameter to the right and verticalAlign to the top, in order to move the legend to the top right side. Then, set the floating parameter to true. This parameter will be used in order to have the legend over our chart.

legend: {
   align: 'right',
   verticalAlign: 'top',
   floating: true
}

You should have the expected result as shown in the following chart:

You start the creation of your chart by implementing the constructor of your Highcharts' chart:

var chart = $('#myFirstChartContainer').highcharts({
});

We will now set the different sections inside the constructor. We start by the chart section. Since we'll be creating a line chart, we define the type element with the value line. Then, we implement the zoom feature by setting the zoomType element. You can set the value to x, y, or xy depending on which axes you want to be able to zoom. For our chart, we will implement the possibility to zoom on the x-axis:

chart: {
   type: 'line',
   zoomType: 'x'
},

We define the title of our chart:

title: {
   text: 'Energy consumption linked to the temperature'
},

Now, we create the x axis. We set the type to datetime because we are using time data, and we remove the title by setting the text to null. You need to set a null value in order to disable the title of the xAxis:

xAxis: {
   type: 'datetime',
   title: {
      text: null
   }
},

We then configure the Y axes. As defined, we add two Y axes with the titles Temperature and Electricity consumed (in KWh), which we override with a minimum value of 0. We set the opposite parameter to true for the second axis in order to have the second y axis on the right side:

yAxis: [
   {
       title: {
          text: 'Temperature'
       },
       min:0
   },
   {
       title: {
          text: 'Energy consumed (in KWh)'
       },
       opposite:true,
       min:0
   }
],

We will now customize the tooltip section. We use the crosshairs option in order to have a line for our tooltip that we will use to follow values of both series. Then, we set the shared value to true in order to have values of both series on the same tooltip.

tooltip: {
   crosshairs: true,
   shared: true
},

Further, we set the series section. For the datetime axes, you can set your series section by using two different ways. You can use the first way when your data follow a regular time interval and the second way when your data don't necessarily follow a regular time interval. We will use both the ways by setting the two series with two different options. The first series follows a regular interval. For this series, we set the pointInterval parameter where we define the data interval in milliseconds. For our chart, we set an interval of one day. We set the pointStart parameter with the date of the first value. We then set the data section with our values. The tooltip section is set with the valueSuffix element, where we define the suffix to be added after the value inside our tool tip. We set our yAxis element with the axis we want to associate with our series. Because we want to set this series to the first axis, we set the value to 0 (zero). For the second series, we will use the second way because our data is not necessarily following the regular intervals. But you can also use this way, even if your data follows a regular interval. We set our data by couple, where the first element represents the date and the second element represents the value. We also override the tooltip section of the second series. We then set the yAxis element with the value 1 because we want to associate this series to the second axis. For your chart, you can also set your date values with a timestamp value instead of using the JavaScript function Date.UTC.

series: [
   {
      name: 'Temperature',
      pointInterval: 24 * 3600 * 1000,
      pointStart: Date.UTC(2013, 0, 01),
      data: [17.5, 16.2, 16.1, 16.1, 15.9, 15.8, 16.2],
      tooltip: {
          valueSuffix: ' °C'
      },
      yAxis: 0
   },
   {
      name: 'Electricity consumption',
      data: [
          [Date.UTC(2013, 0, 01), 8.1],
          [Date.UTC(2013, 0, 02), 6.2],
          [Date.UTC(2013, 0, 03), 7.3],
          [Date.UTC(2013, 0, 05), 7.1],
          [Date.UTC(2013, 0, 06), 12.3],
          [Date.UTC(2013, 0, 07), 10.2]
      ],
      tooltip: {
         valueSuffix: ' KWh'
      },
      yAxis: 1
   }
]

You should have this as the final code:

$(function () { 
    var chart = $(‘#myFirstChartContainer’).highcharts({
        chart: {
            type: ‘line’,
            zoomType: ‘x’
        },
        title: {
            text: ‘Energy consumption linked to the temperature’
        },
        xAxis: {
            type: ‘datetime’,
            title: {
                text: null
            }
        },
        yAxis: [
            {
                title: {
                    text: ‘Temperature’
                },
                min:0
            },
            {
                title: {
                    text: ‘Electricity consumed’
                },
                opposite:true,
                min:0
            }
        ],
        tooltip: {
            crosshairs: true,
            shared: true
        },
        series: [
            {
                name: ‘Temperature’,
                pointInterval: 24 * 3600 * 1000,
                pointStart: Date.UTC(2013, 0, 01),
                data: [17.5, 16.2, 16.1, 16.1, 15.9, 15.8, 16.2],
                tooltip: {
                    valueSuffix: ‘ °C’
                },
                yAxis: 0
            },
            {
                name: ‘Electricity consumption’,
                data: [
                     [Date.UTC(2013, 0, 01), 8.1],
                     [Date.UTC(2013, 0, 02), 6.2],
                     [Date.UTC(2013, 0, 03), 7.3],
                     [Date.UTC(2013, 0, 05), 7.1],
                     [Date.UTC(2013, 0, 06), 12.3],
                     [Date.UTC(2013, 0, 07), 10.2]
                ],
                tooltip: {
                    valueSuffix: ‘ KWh’
                },
                yAxis: 1
            }
        ]
    });
});

You should have the expected result as shown in the following screenshot:

You start the creation of your chart by implementing the constructor of your Highcharts' chart:

var chart = $('#myFirstChartContainer').highcharts({
});

We now set the different sections inside the constructor. We start by the chart section. Because we are creating a bar chart, we define the type element with the value bar:

chart: {
   type: 'bar'
},

We define the title of our chart:

title: {
   text: 'Age pyramid of employees'
},

We create the xAxis section. In this section, we set the three categories of our chart:

xAxis: {
   categories: ['40-55', '25-40', '18-25']
},

We configure the yAxis section. We set the title of this axis with the value Number of employees:

yAxis: {
   title: {
      text: 'Number of employees'
   }
},

We now set the plotOptions section. Inside this section, you will be able to customize some parameters for your chart or for your series. For our chart, we customize the series element by setting the stacking option to normal. You can also set this value to percent, if you prefer to stack by using percentages instead of values.

plotOptions: {
   series: {
      stacking: 'normal'
   }
},

Further, we configure the series section of our chart. We set two series with the name Male and Female and a set of data. Then, we set the stack parameter. The stack parameter defines the stacking groups. You can set this value with a number, a string, or other types of data. If you want to stack several series together, your different series will have to match the same value. For our chart, we set this element for our two series with the value 1. Finally, we define the color of our series by overriding the color element in the hexadecimal format.

series: [
   {
       name: 'Male',
       data: [835, 2635, 1437],
       stack: 1,
       color: '#6495ED'
   },
   {
       name: 'Female',
       data: [785, 2435, 1657],
       stack: 1,
       color: '#DC143C'
   }
]

You should have the expected code as follows:

$(function () { 
    var chart = $('#myFirstChartContainer').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Age pyramid of employees'
        },
        xAxis: {
            categories: ['40-55', '25-40', '18-25']
        },
        yAxis: {
            title: {
                text: 'Number of employees'
            }
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [
            {
                name: 'Male',
                data: [835, 2635, 1437],
                stack: 1,
                color: '#6495ED'
            },
            {
                name: 'Female',
                data: [785, 2435, 1657],
                stack: 1,
                color: '#DC143C'
            }
        ]
    });
});

You should have the expected result:

You start the creation of your chart by implementing the constructor of your Highcharts' chart:

var chart = $('#myFirstChartContainer').highcharts({
});

We now set the different sections inside the constructor. We start with the chart section. Since we are creating a pie chart, we define the type element with the value pie:

chart: {
   type: 'pie'
},

We define the title of our chart:

title: {
   text: 'Operating Systems used in a company'
},

We customize the display of the chart by overriding the plotOptions section. Because we are creating a pie chart, we override the parameters of the subsection pie. We set the allowPointSelect attribute to true in order to have an interactive chart when a user clicks on some part of the pie chart. For the pie chart, the legend is not displayed by default. In order to display the legend, we set the showInLegend attribute to true. Then, we override the tooltip section in order to add the percentage suffix inside our tool tip. Finally, we create labels around the chart by implementing the dataLabels attribute. Inside this attribute, we set enabled to true in order to activate this feature. Then, the color attribute defines the color of the label and the connectorColor attribute defines the color of the line between the pie chart and the label. The formatter option defines a function that is used in order to format our label. When you implement the formatter parameter for any type of chart, you can use the following data for your template:

For our chart, the label will display the point name in bold with the percentage of the data

plotOptions: {
   pie: {
      allowPointSelect: true,
      showInLegend: true,
      tooltip: {
         valueSuffix: ' %'
      },
      dataLabels: {
          enabled: true,
          color: '#000000',
          connectorColor: '#888888',
          formatter: function() {
              return '<b>'+ this.point.name +'</b>: '+ 
                this.percentage +' %';
          }
       }
   }
},

We then set the series section. For pie charts, you only need to create one series with a name and your data. You can set your data in two different ways. The first way consists of using couple of data, with the name of your element in the first parameter and your value in the second parameter. The second way consists of using an array of objects with several attributes, such as name which defines the name of the object, color which defines the color your data, and y which defines the data value. The second way can be used when you want to manually set the color of your data. For our series, we will use both ways,but for your own chart, you may choose the best option for your project.

series: [{
       name: 'Operating Systems',
       data: [
           ['Windows 7', 45],
           ['Windows XP', 35], //First way
           {
             name: 'Mac OS X',
             color: '#CC0033','
             y: 20
           } //Second way
       ]
}]

You should get the following code:

$(function () { 
    var chart = $(‘#myFirstChartContainer’).highcharts({
       chart: {
          type: ‘pie’
       },
       title: {
          text: ‘Operating Systems used in a company’
       },
       plotOptions: {
          pie: {
             allowPointSelect: true,
             showInLegend: true,
             tooltip: {
                valueSuffix: ‘ %’
             },
             dataLabels: {
                enabled: true,
                color: ‘#000000’,
                connectorColor: ‘#888888’,
                formatter: function() {
                   return ‘<b>‘+ this.point.name +’</b>: ‘+ 
                          this.percentage +’ %’;
                }
             }
          }
       },
       series: [{
          name: ‘Operating Systems’,
          data: [
             [‘Windows 7’, 45],
             [‘Windows XP’, 35], //First way
             {
                name: ‘Mac OS X’,
                color: ‘#CC0033’,
                y: 20
             } //Second way
          ]
       }]
    });
});

You should have the expected result as follows:

We start our JSON string by creating the chart section. Because we are creating an area chart, we create an associative array with the key type and the value area:

$chartSection = array('type' => 'area');

We set the title section of our chart. We create an associative array with the key text and the value Sales evolution:

$titleSection = array('text' => 'Sales evolution');

We set the category section of our chart. We create an associative array with the key categories and the value with an array of categories:

$xAxisSection = array('categories' => array('Jan', 'Feb', 'Mar', 'Apr'));

We set the yAxisSection of our chart. We create an associative array with the key title and the value with another associative array with a key text and a value Sales:

$yAxisSection = array('title' => array('text' => 'Sales'));

We set the seriesSection of our chart. We create an array with an associative array with the key name and a value Cities and the key data and an array of data as values:

$seriesSection = array(array('name' => 'Cities', 'data' => array(1250, 1500, 1300, 1450)))

We regroup all our variables already created inside an associative array with the keys chart, title, xAxis, yAxis and series, which correspond to our main Highcharts sections:

$highchartChart = array('chart' => $chartSection, 'title' => $titleSection, 'xAxis' => $xAxisSection, 'yAxis' => $yAxisSection, 'series' => $seriesSection);

We transform our final array into a JSON string by using the function json_encode, which will be displayed in output:

echo json_encode($highchartChart);

You should have the following code:

<?php
   $chartSection = array('type' => 'area');

   $titleSection = array('text' => 'Sales evolution');

   $xAxisSection = array('categories' => array('Jan',
     'Feb','Mar', 'Apr'));

   $yAxisSection = array('title' => array('text' => 
     'Sales'));

   $seriesSection = array(array('name' => 'Sales', 'data' 
     => array(1250, 1500, 1300, 1450)));

   $highchartChart = array('chart' => $chartSection,'title' 
     => $titleSection, 'xAxis' => $xAxisSection, 'yAxis' => 
       $yAxisSection, 'series' => $seriesSection);

   echo json_encode($highchartChart);
?>

You should obtain the following output. It has been formatted to make it more readable.

{
       “chart”:{
             “type”:”area”
       },
       “title”:{
             “text”:”Sales evolution”
       },
       “xAxis”:{
             “categories”:[“Jan”,”Feb”,”Mar”,”Apr”]
       },
       “yAxis”:{
             “title”:{
                    “text”:”Sales”
             }
       },
       “series”:[
             {
                    “name”:”Sales”,
                    “data”:[1250,1500,1300,1450]
             }
       ]
}

We start the creation of our script by creating the Ajax request. We use the ajax function of jQuery with the URL of our server side script in parameter. We override the success function in order to retrieve the result of our ajax request.

$.ajax("http://localhost:8080/server_side.php", {
   success: function (result) {
   }
});

Inside the success function, we transform our JSON string into a json object:

var jsonObject = jQuery.parseJSON(result);

Then, we create our Highcharts' chart by using our jsonObject inside our constructor:

var chart = $('#myFirstChartContainer').highcharts(jsonObject);

You should have the following code on the client side:

$(function () {
   $.ajax("http://localhost:8080/server_side.php", {
      success: function (result) {
        var jsonObject = jQuery.parseJSON(result)
        var chart = 
$('#myFirstChartContainer').highcharts(jsonObject);
       }
   });

});

You should have the following result: