How to use angular-charts with json data?

Question

Im trying to visualise some data with angular-charts but I don't know what am I doing wrong. I'm a beginner in angularjs.

Data should be passed this way:

  $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 am using $http to get it from API so I have sth like this:

app.controller("LineCtrl", function($scope, $http) {
    $http({
        method: 'GET',
        url: '/meteo_dane'
    }).then(function successCallback(response) {
        $scope.dane = response.data;
        $scope.labels = [$scope.dane.updated_at];
        $scope.series = ['Series A'];
        $scope.data = [
            [$scope.dane.temp],
        ];
        console.log(this.dane);
    }, function errorCallback(response) {
        //
    });

But its now working - chart is empty. Data that I am going to use is in this format:

[
  {
    "_id": "567aa394d452128c6d595f0e",
    "windspeedmph": 0,
    "winddir": 135,
    "humidity": 30.5,
    "temp": 24,
    "updated_at": "2015-12-23T13:37:24.881Z",
    "__v": 0
  },
  {
    "_id": "567aa39ed452128c6d595f0f",
    "windspeedmph": 0,
    "winddir": 135,
    "humidity": 30.4,
    "temp": 24.1,
    "updated_at": "2015-12-23T13:37:34.836Z",
    "__v": 0
  },
]

I am going to show temperature in time. Later I would like to show the rest of data that I have.

How should I write it?

score 1 · Accepted Answer · edited Jan 02 '18 at 08:11

1

I think you $scope.data assignment has wrong format, it should have multidimensional array.

You should create array of $scope.temp which will have temp for each dane

$scope.temp = [] 
angular.forEach($scope.dane, function(value){
   $scope.temp.push(value.temp)
});
$scope.data = $scope.temp //removed [] because its already an array.

Example Plunkr

edited Jan 02 '18 at 08:11

Linda

147
2
20

answered Dec 23 '15 at 21:09

Pankaj Parkar

134,766
23
234
299

Do you mean sth like this: `$scope.dane = response.data; $scope.temp = []; $scope.updated_at = []; angular.forEach($scope.dane, function(value){ $scope.temp.push(value.temp); $scope.updated_at.push(value.updated_at); }); $scope.labels = $scope.dane.updated_at; $scope.series = ['Series A']; $scope.data = $scope.updated_at;` – wiwo Dec 23 '15 at 21:24
@wiwo take a look at the sample plunkr which I have added. – Pankaj Parkar Dec 23 '15 at 21:28
That was it! Thank you for your help! – wiwo Dec 29 '15 at 18:59
@wiwo Glad to help you..Thanks :) – Pankaj Parkar Dec 29 '15 at 18:59
I've seen that you know a lot about AngularJS and Chart.js. I did use a few of your answers to others questions. Could you please take a look at this: http://stackoverflow.com/questions/34516923/angular-chartjs-how-to-make-it-reactive-to-data-change – wiwo Dec 29 '15 at 19:01

How to use angular-charts with json data?

1 Answers1