Creating a pie highchart from Data in local (OBJECT) JSON file

Question

This is my JSON data in my JSON file

{"diskspace":100,"diskspace.free":50,"time":8,"time.played":2,"controllers":25,"controllers.used":3, "controllers.new":10, "controllers.broken":12}

What I am trying to do is to display the Json data above in several forms of a pie charts. For example one pie chart that will display diskspace/diskspace.free which will basically be a 50%50 chart.

The problem is that I couldn't get the data to be displayed from my Json file when its in the shown format. However if I change the json data in the file to a col and row format I managed to find a way to display it but that is inconvenient as I need to create a separate json file for every chart.

Right now all it returns is a blank page which I beleive it does contains an empty chart therefor its not visible.

Here is my JS

var app = angular.module('charts', []);

app.directive('highchart', function () {
return {
    restrict: 'E',
    template: '<div></div>',
    replace: true,

    link: function (scope, element, attrs) {

        scope.$watch(function () { return attrs.chart; }, function () {

            if (!attrs.chart) return;

            var charts = JSON.parse(attrs.chart);

            $(element[0]).highcharts(charts);

        });
    }
};
});


app.controller('Ctrl', function ($scope, $http, $timeout) {
$http.get('bla.json').success(function (key, data) {

    // var score = [];
    // for (var i = 0; i < data.length; i++) {
    //     score.push(data[i]);   
    // }

    // var name = [];
    // for (var i = 0; i < data.length; i++) {
    //     name.push(data[i].key);
    // }

    $scope.renderChart = {
        chart: {
            type: 'pie'
        },

        series: [{
            data: data
        }],
        legend: {
            enabled: true
        }
    };
}).error("error message");
$timeout($scope.fetch, 1000);
});

HTML

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Dashboard Application</title>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script type="text/javascript" src="script.js"></script>  
 </head>
 <body>
  <section ng-app="charts">
   <div ng-controller="Ctrl">
        <highchart chart='{{renderChart}}'></highchart>
        <table>
            <tr ng-repeat="record in overSpeedWorstRecords">
                <td></td>
                <td></td>
            </tr>
        </table>
   </div>
  </section>
 </body>
</html>

I also created a plunker LINK so feel free to adjust it and your help is much appreciated.

Answer 1

Your format isn't really.. easy to parse. I mean, in keys you have distinct names, which is hard to define rules for parsing. Why not using something like this:

{
  "diskspace": [
    ["total", 100],
    ["free",50]
  ],
  "time": [
    ["total", 8],
    ["played", 2]
  ],
  "controllers": [
    ["total", 25], 
    ["used", 3], 
    ["new", 10], 
    ["broken",12]
  ]
}

Now you can create multiple pie charts: http://plnkr.co/edit/AqVbfE3mxCf7ahAfKtRG?p=preview

Simple improvement for your controller:

var series = [],
    iterator = 1;

for (var key in keys) {
  series.push({
    data: keys[key], // add data from the new format
    center: [(25 * iterator) + '%', '50%'] // calculate where center of the pie should be
  });
  iterator++;
};

$scope.renderChart = {
    chart: {
        type: 'pie'
    },
    plotOptions: {
      pie: {
        size: '25%' // change size of the pies
      }
    },
    series: series,
    legend: {
        enabled: true
    }
};

Note: I am not sure how exactly those charts should be rendered (time vs time.played? Or time+time.played vs time.played?) as the pie chart. In my opinion, may be a better choice for your use case: http://plnkr.co/edit/Bydq5NG6BkG2LOqhQwzF?p=preview

Creating a pie highchart from Data in local (OBJECT) JSON file

Question

1 answers

solution1
1 ACCPTED 2016-02-17 14:03:18

Creating a pie highchart from Data in local (OBJECT) JSON file

Question

1 answers

solution1 1 ACCPTED 2016-02-17 14:03:18

solution1
1 ACCPTED 2016-02-17 14:03:18