Highcharts - Multiple pie charts from json

Question

Let's say I have a server with 4 hard drives. How do I show 4 pie charts, one for each hard drive? It works if the chart type is stacked column (code below). JSON produces this output:

[{
    "name":"Drive",
    "data":["C:","D:","E:","F:"]},{
    "name":"Free",
    "data":[673869,2267920,105627,307096]},{
    "name":"Used",
    "data":[94029,2264810,6373,104]
}]

And my script code (for stacked column):

<!DOCTYPE HTML>
<html>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <title>Stacked column chart with data from MySQL using Highcharts</title>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
         <script type="text/javascript">
         $(document).ready(function() {
             var options = {
             colors: ['#50B432', '#ED561B'],
                 chart: {
                     renderTo: 'container',
                     type: 'column',
                     marginRight: 130,
                     marginBottom: 25
                 },
                 title: {
                     text: 'Server',
                     x: -20 //center
                 },
                 subtitle: {
                     text: '',
                     x: -20
                 },
                 xAxis: {
                     categories: []
                 },
                 yAxis: {
                     title: {
                         text: 'Used / Free'
                     },
                     plotLines: [{
                         value: 0,
                         width: 1,
                         color: '#808080'
                     }]
                 },
                 tooltip: {
                     formatter: function() {
                             return '<b>'+ this.series.name +'</b><br/>'+
                             this.x +' '+ Highcharts.numberFormat(this.percentage, 2) +' %';
                     }
                 },
                 legend: {
                     layout: 'vertical',
                     align: 'right',
                     verticalAlign: 'top',
                     x: -10,
                     y: 100,
                     borderWidth: 0
                 },
                  plotOptions: {
                     column: {
                         stacking: 'normal',
                         dataLabels: {
                             enabled: true,
                             color: '#000000',
                             formatter: function() {
                                return bytes(this.point.y, true);
                            }
                         }
                     }
                 },
                 series: []
             }

             $.getJSON("data2.php", function(json) {
                 options.xAxis.categories = json[0]['data'];
                 options.series[0] = json[1];
                 options.series[1] = json[2];
                 chart = new Highcharts.Chart(options);
             });
         });
         function bytes(bytes, label) {
            if (bytes == 0) return '';
            var s = ['MB', 'GB', 'TB', 'PB'];
            var e = Math.floor(Math.log(bytes)/Math.log(1024));
            var value = ((bytes/Math.pow(1024, Math.floor(e))).toFixed(2));
            e = (e<0) ? (-e) : e;
            if (label) value += ' ' + s[e];
            return value;
        }
         </script>
         <script src="http://code.highcharts.com/highcharts.js"></script>
         <script src="http://code.highcharts.com/modules/exporting.js"></script>
     </head>
     <body>
         <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
     </body>
</html>

Thank you for any suggestions.

Sebastian Bochan Sebastian Bochan · Accepted Answer · 2015-11-12T10:12:47

You can iterate on each json item and create new div (by for example append) and init chart.

What is important, all values in data should be numbers, not strings like you have.

Example:

http://jsfiddle.net/9ov3en2t/

$(function () {
var json = [{
    "name": "Drive",
        "data": ["C:", "D:", "E:", "F:"]
}, {
    "name": "Free",
        "data": [673869, 2267920, 105627, 307096]
}, {
    "name": "Used",
        "data": [94029, 2264810, 6373, 104]
}];

var each = Highcharts.each,
    $charts = $('#charts');

each(json,function(item, i) {
    $charts.append('<div id="container' + i + '"></div>');
    var $chart = $('#container' + i);


    $chart.highcharts({
        chart:{
            type:'pie'
        },
        series:[{
            name: item.name,
            data: item.data
        }]
    });
});

});

Highcharts - Multiple pie charts from json

1 Answers