Chart.js AngularJS JSON to Arrays

Question

To display some data from my database I would like to use this nice graph library (Angular Chart).

The format of the data bugs me a little, I have some nice JSON data coming from my database in this format:

{ "data": [
        {
          "meting": "749",
          "bericht": "408",
          "plant": "01",
          "timestamp": "2016-03-18T09:40:58.977051"
        },
        {
          "meting": "775",
          "bericht": "177",
          "plant": "01",
          "timestamp": "2016-03-18T07:35:59.007320"
        }
      ]
    };

But for these charts I need to put it in arrays like this:

  $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];

I believe this is a terrible data format but I'm willing to use this library anyway.

Now how do I get from my data to these crazy ugly arrays?

My current code is this but I'm sure there is a much better way of doing it and I can't get the $scope.data right so now it's hard coded.

// data test
$scope.zdata = 
    { "data": [
        {
          "meting": "749",
          "bericht": "408",
          "plant": "01",
          "timestamp": "2016-03-18T09:40:58.977051"
        },
        {
          "meting": "775",
          "bericht": "177",
          "plant": "01",
          "timestamp": "2016-03-18T07:35:59.007320"
        }
      ]
    };

$scope.labels = [];
$scope.series = [];
$scope.data = [];

var datalength = $scope.zdata.data.length;

for (var i = 0; i < datalength; i++) {
    $scope.labels.push($scope.zdata.data[i].timestamp);
}

for (var i = 0; i < datalength; i++) {
    $scope.series.push($scope.zdata.data[i].plant);
}

$scope.data = [
  [65, 59, 80, 81, 56, 55, 40]
];

score 2 · Answer 1 · answered Mar 19 '16 at 06:05

2

The data array is a multi dimensional array because it it possible to have multiple lines or bars. You may find it ugly but it is pretty common programming technique ;) If you have only one series you just need to set the data to $scope.data = [[]]; and push the elements to the first inner array (index 0). You also don't need to loop multiple times you can do it in one loop.

$scope.labels = [];
$scope.series = [];
$scope.data = [[]];

for (var i = 0, l = $scope.zdata.data.length; i < l; i++) {
    $scope.labels.push($scope.zdata.data[i].timestamp);
    $scope.series.push($scope.zdata.data[i].plant);
    $scope.data[0].push($scope.zdata.data[i].meting); // assuming this is what you want to use as the values for the chart points
}

Instead of a for loop you could use forEach instead:

$scope.labels = [];
$scope.series = [];
$scope.data = [[]];

$scope.zdata.data.forEach(function (zdata) {
    $scope.labels.push(zdata.timestamp);
    $scope.series.push(zdata.plant);
    $scope.data[0].push(zdata.meting);
});

answered Mar 19 '16 at 06:05

WispyCloud

4,140
1
28
31

Thanks, I will try this! When I miss a value for one field somewhere the arrays won't match anymore so the data will be flawed, don't you agree? – Thijs Mar 20 '16 at 19:21
Well, seems all structure is lost, it's not clear what data belongs to what serie anymore. For multiple series I still need an extra loop probably, and the 'series' are now not unique so I get 4x "01" and 3x "07". This all for the sake of using 'multi dimensional arrays'. Ending up with data plumbing and aggregating data, filling the blanks with zero's, making series unique, sorting, etc. – Thijs Mar 20 '16 at 20:06
Data belongs to the series following the same order... It is not for the "sake of using 'multi dimensional arrays'", it's the only way to support multiple lines or bars etc. in a sane way. If you aren't happy with the lib, fork it and release one that is better, it's the power of open source... What have you contributed yourself btw? – WispyCloud Mar 21 '16 at 08:54
My apologies for being harsh, did not mean disrespect. – Thijs Mar 21 '16 at 09:11

score 1 · Answer 2 · answered Mar 18 '16 at 12:13

1

I think it is better to look into array object just for once using javascript map function.

jsfiddle

answered Mar 18 '16 at 12:13

agriboz

4,724
4
35
49

score 1 · Answer 3 · answered Mar 18 '16 at 17:59

1

I'm ussing charts.js too and my code is the same like yours... I chose this way because I have large amounts of data in my objects.

answered Mar 18 '16 at 17:59

Tana

108
8

Chart.js AngularJS JSON to Arrays

3 Answers3