Charts in Angular js with JSON Object

Question

I am trying to implement chart representation in angular js.

http://jtblin.github.io/angular-chart.js/

I was able to implement simple charts but I have a below data to be represented. It is in JSON format. I need help on how to convert JSON to arrays to be represented as charts. Below is JSON

[{"value": {"DE":2,"NP":20,"BD":28,"TW":1},
  "end_time":"2016-07-05T07:00:00+0000"},
 {"value":{"DE":5,"NP":11,"BD":22,"BE":2,"FJ":2},
  "end_time":"2016-07-06T07:00:00+0000"},
 {"value":{"DE":5,"NP":24,"BD":29},
  "end_time":"2016-07-07T07:00:00+0000"}]

I am trying to convert it to the format

$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 understand that I need to iterate over my JSON object and create arrays.

My question is I have different labels in each of the JSON object. How do I convert it create an array with all the labels in each of the value and still maintain the order of counts.Like below

$scope.labels = ["DE", "NP", "BD", "TW", "BE", "FJ"];
$scope.series = ["2016-07-05T07:00:00+0000","2016-07-06T07:00:00+0000","2016-07-07T07:00:00+0000"]
$scope.data = [ [2,20,28,1,0,0],
                [5,11,22,0,2,2],
                [5,24,29]
              ]

If this can be better achieved using different libraries or charts in angularjs please do suggest

So what is the problem? Should not be very difficult with the help of Array.prototype.forEach, Object.keys+forEach. — dfsq
– dfsq, Commented Jul 9, 2016 at 8:22
The problem is values in labels are different for each of the element in array. Like in first there is no BE and FJ label. I am very new to JavaScript too. — user2934433
– user2934433, Commented Jul 9, 2016 at 8:35

Ladmerc · Accepted Answer · 2016-07-09 08:56:08Z

2

Have you even attempted something? You didn't show any solution. Anyway, here's a possible implementation

var source = [
  {"value": {"DE":2,"NP":20,"BD":28,"TW":1},
  "end_time":"2016-07-05T07:00:00+0000"},
  {"value":{"DE":5,"NP":11,"BD":22,"BE":2,"FJ":2},
  "end_time":"2016-07-06T07:00:00+0000"},
  {"value":{"DE":5,"NP":24,"BD":29},
  "end_time":"2016-07-07T07:00:00+0000"}
]
var $scope = {};
$scope.labels = [];
$scope.data = [];
$scope.series = [];


source.forEach(function(item){
  $scope.series.push(item.end_time)

  var values = []
  Object.keys(item.value).forEach(function(key) {
    if ($scope.labels.indexOf(key) === -1) {
     $scope.labels.push(key)
    }
    values.push(item.value[key])
  })
  $scope.data.push(values)
})
console.log($scope)

answered Jul 9, 2016 at 8:56

Ladmerc

1,15811 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2934433 Over a year ago

Definitely I have not written such a compact code, but for labels which are not present I need to have value 0, which is what my basic issue was. Can you help me in that. Thanks for the answer. I think I need to create a global list with all labels and then iterate. If key not present push zero.

Ladmerc Over a year ago

Yeah, exactly. Just use indexOf to check if not in list. Cheers

Collectives™ on Stack Overflow

Charts in Angular js with JSON Object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related