Saturday, December 10, 2016

Guide on how to insert custom series into area Stacked Chart in HighCharts (Javascript)

Writer m Published Saturday, December 10, 2016

Tags

Sample code that HighCharts provided on their website are all hard coded and there no guide on how to generate a custom value for the series. So, in this tutorial I will teach you on how to dynamically add the series value.

Below is the sample from HighCharts.
You can download it here. highchart javascript library

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Highcharts Example</title>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <style type="text/css">
${demo.css}
  </style>
  <script type="text/javascript">
$(function () {
    Highcharts.chart('container', {
        chart: {
            type: 'area'
        },
        title: {
            text: 'Historic and Estimated Worldwide Population Growth by Region'
        },
        subtitle: {
            text: 'Source: Wikipedia.org'
        },
        xAxis: {
            categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: 'Billions'
            },
            labels: {
                formatter: function () {
                    return this.value / 1000;
                }
            }
        },
        tooltip: {
            split: true,
            valueSuffix: ' millions'
        },
        plotOptions: {
            area: {
                stacking: 'normal',
                lineColor: '#666666',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#666666'
                }
            }
        },
        series: [{
            name: 'Asia',
            data: [502, 635, 809, 947, 1402, 3634, 5268]
        }, {
            name: 'Africa',
            data: [106, 107, 111, 133, 221, 767, 1766]
        }, {
            name: 'Europe',
            data: [163, 203, 276, 408, 547, 729, 628]
        }, {
            name: 'America',
            data: [18, 31, 54, 156, 339, 818, 1201]
        }, {
            name: 'Oceania',
            data: [2, 2, 2, 6, 13, 30, 46]
        }]
    });
});
  </script>
 </head>
 <body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
</div>
</body>
</html>

Step 1 :
You have to create an array containing the value that you want.
Note that the array must have format like below.

var country = [{

               name:"Visitor",

                data:[0, 0, 0, 0, 0, 0,0]

            }, {

                name: 'Contractor',

                data: [106, 107, 111, 133, 221, 767, 1766]

            }, {

                name: 'VIP',

                data: [163, 203, 276, 408, 547, 729, 628]

            }, {

                name: 'Boss',

                data: [18, 31, 54, 156, 339, 818, 1201]

            }, {

                name: 'Engineere',

                data: [2, 2, 2, 6, 13, 30, 46]

            }, {

                name: 'Programmer',

                data: [2, 2, 2, 6, 13, 30, 46]

            }

            ]

Step 2:
Next, just put the name of your array into the 'Series'.

So instead of this

 series: [{
            name: 'Asia',
            data: [502, 635, 809, 947, 1402, 3634, 5268]
        }, {
            name: 'Africa',
            data: [106, 107, 111, 133, 221, 767, 1766]
        }, {
            name: 'Europe',
            data: [163, 203, 276, 408, 547, 729, 628]
        }, {
            name: 'America',
            data: [18, 31, 54, 156, 339, 818, 1201]
        }, {
            name: 'Oceania',
            data: [2, 2, 2, 6, 13, 30, 46]
        }]

Do this.

series: country

Step 3: Run your script again and you should be able to parse you array item into the chart.

If you are facing any problem on this, don't hesitate to message at Obstrum facebook page.

Obstrum Facebook Page

Hope this tutorial will help those in need.

If you want to get in touch with more tutorial, add me on google+ or like and follow our facebook page for more! Obstrum Facebook Page