Creating an array of objects for a graph in AngularJS

Question

I'm using n-3 charts (http://n3-charts.github.io/) to create some graphs in my angular web app. Here is some sample data of some points where there is a data values with 3 series:

$scope.data = [
      {x: new Date(1391448620668), current: 0, baseline: 0, original: 0, val_3: 0},
      {x: new Date(1391535020668), current: 0.993, baseline: 3.894, original: 8.47, val_3: 14.347},
      {x: new Date(1391621420668), current: 1.947, baseline: 7.174, original: 13.981, val_3: 19.991},
      {x: new Date(1391707820668), current: 2.823, baseline: 9.32, original: 14.608, val_3: 13.509},
      {x: new Date(1391794220668), current: 3.587, baseline: 9.996, original: 10.132, val_3: -1.167},
];

In my code I'm trying to create this under that same construct like so:

$scope.addGraphData = function(){
  var firstSubDate  = $scope.FirstSubjectDoseDt;
  var xValues = new Array(); // date data points
  var cValues = new Array(); // current values
  var bValues = new Array(); // baseline values
  var oValues = new Array(); // original baseline values

  for (var i = 0; i < $scope.currentData.length; i++) {
    xValues[i] = new Date(firstSubDate+([i]*2628000000));
    cValues[i] = $scope.currentData[i].currentValue;
    bValues[i] = $scope.currentData[i].baselineValue;
    oValues[i] = $scope.currentData[i].origValue;
  };

  for (var i = 0; i < $scope.currentData.length; i++) {
    $scope.data[i] = {x: xValues[i], current: cValues[i], baseline: bValues[i], original: oValues[i]};
  };
  console.log("Graph Data: " + $scope.data);
};

But the values in the $scope.data array exist, but the console gives me

Graph Data: [object Object],[object Object],[object Object]

for my 3 data points and it plots nothing. Where am I going wrong here?

Can you post a JSFiddle or Plunker? How are you populating that data? Is it in an AngularJS $digest loop? — rtcherry
– rtcherry, Commented Mar 4, 2014 at 0:12
@rtcherry they are being populated by a form in the same scope. I'll try and build a quick jsfiddle. I forgot some of the code, updated question. — Macness
– Macness, Commented Mar 4, 2014 at 0:16
console.log("Graph Data:", $scope.data) is usually more useful — Jesse the Game
– Jesse the Game, Commented Mar 4, 2014 at 0:38

Macness · Accepted Answer · 2014-03-05 18:32:13Z

The issue was that the chart cannot call the data set $scope.data if one of the values is undefined.

For example:

$scope.data = [
      {x: new Date(1391448620668), current: undefined, baseline: 0, original: 0, val_3: 0},
      {x: new Date(1391535020668), current: 0.993, baseline: 3.894, original: 8.47, val_3: 14.347}
];

I modified my function to be more efficient when creating the data array and added an OR condition to plot the value at 0 if undefined. I also fixed a date bug.

$scope.addGraphData = function(){
  var firstSubDate  = $scope.FirstSubjectDoseDt;

  $scope.data = [];

  console.log("firstSubDate:", firstSubDate);

  for (var i = 0; i < $scope.currentData.length; i++) {
    $scope.data[i] = {
      x: new Date( new Date(firstSubDate).getTime() + i*2628000000 ),
      current:  $scope.currentData[i].currentValue || 0,
      baseline: $scope.currentData[i].baselineValue || 0,
      original: $scope.currentData[i].origValue || 0
    };

  };

  console.log("Monthly Graph Data:", $scope.data);

};

Collectives™ on Stack Overflow

Creating an array of objects for a graph in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related