How to use Angular charts with my info?

Question

I am trying to use Angular Charts, the second chart in those Docs actually.

the info they put is this

    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];

    $scope.series = ['Series A', 'Series B'];

    $scope.data = [
      [65, 59, 80, 81, 56, 55, 40],
      [28, 48, 40, 19, 86, 27, 90]
    ];

and the way you call it in the view is this

          <canvas id="bar" class="chart chart-bar"
            chart-data="data" chart-labels="labels" chart-series="series">
          </canvas>

in order to get this result

what I need is to adapt the info I am receiving to that chart, and here is the info I am receiving

 {
   "12-15-2015":{
      "55f6de98f0a50c25f7be4db0":{
         "total":0,
         "amount":0
      }
   },
   "12-16-2015":{
      "55f6de98f0a50c25f7be4db0":{
         "total":0,
         "amount":0
      }
   },
   "12-17-2015":{
      "55f6de98f0a50c25f7be4db0":{
         "total":1,
         "amount":22
      }
   },
   "12-18-2015":{
      "55f6de98f0a50c25f7be4db0":{
         "total":0,
         "amount":0
      }
   },
   "12-19-2015":{
      "55f6de98f0a50c25f7be4db0":{
         "total":0,
         "amount":0
      }
   },
   "12-20-2015":{
      "55f6de98f0a50c25f7be4db0":{
         "total":0,
         "amount":0
      }
   },
   "12-21-2015":{
      "55f6de98f0a50c25f7be4db0":{
         "total":1,
         "amount":22
      }
   },
   "12-22-2015":{
      "55f6de98f0a50c25f7be4db0":{
         "total":1,
         "amount":150
      }
   },
   "12-26-2015":{
      "55f6de98f0a50c25f7be4db0":{
         "total":0,
         "amount":0
      }
   },
   "12-28-2015":{
      "55f6de98f0a50c25f7be4db0":{
         "total":0,
         "amount":0
      }
   },
   "12-29-2015":{
      "55f6de98f0a50c25f7be4db0":{
         "total":0,
         "amount":0
      }
   },
   "01-03-2016":{
      "55f6de98f0a50c25f7be4db0":{
         "total":0,
         "amount":0
      }
   },
   "01-04-2016":{
      "55f6de98f0a50c25f7be4db0":{
         "total":0,
         "amount":0
      }
   },
   "01-05-2016":{
      "55f6de98f0a50c25f7be4db0":{
         "total":0,
         "amount":0
      }
   },
   "01-06-2016":{
      "55f6de98f0a50c25f7be4db0":{
         "total":0,
         "amount":0
      }
   },
   "01-10-2016":{
      "55f6de98f0a50c25f7be4db0":{
         "total":0,
         "amount":0
      }
   },
   "01-11-2016":{
      "55f6de98f0a50c25f7be4db0":{
         "total":0,
         "amount":0
      }
   },
   "01-14-2016":{
      "55f6de98f0a50c25f7be4db0":{
         "total":0,
         "amount":0
      }
   }
 }

every key in that array is a day, each key represents a traffic_source, and each traffic_source has an object which contains a total an an amount.

A thing I noticed, is that they do it with arrays and I have an object.

What do you recommend me to do ? UPDATE

This is what I have so far:

      $scope.clicksChartDate = [];
      $scope.clicksChartBars = [];


      angular.forEach($scope.clicksConversionData, function(value, key) {
        angular.forEach(value, function(value, key) {
          // $scope.clicksChartBars.push(item.total);
          console.log('value', value);
          console.log('key', key);
        })
        $scope.clicksChartDate.push(key);

      });

the array $scope.clicksChartDate is where I am storing the years/dates, and that is rendering OK, the problem I have is in the second .forEach where value returns some objects similar to this: {total: 0, amount: 0}, how can I get both values and put into an array ?

Answer 1

Supposing your traffic_source never change you could get the expected format with this:

$scope.clicksChartDate = Object.keys($scope.clicksConversionData);

$scope.clicksChartSeries = ["total", "amount"];

var data = $scope.clicksChartSeries.map(function(series) {
  return $scope.clicksChartDate.map(function(label) {
    return $scope.clicksConversionData[label]["55f6de98f0a50c25f7be4db0"][series];
  });
});

If it does change and you only care about the first one, replace:

return $scope.clicksConversionData[label]["55f6de98f0a50c25f7be4db0"][serie];

with this:

var trafficSource = Object.keys($scope.clicksConversionData[label])[0];
return $scope.clicksConversionData[label][trafficSource][serie];