Chartjs-Using JSON in Chart.js with Angular.js

by

1👍

✅

Since, the $http.get() method is asynchronous, you need to initialize your chart inside the callback function of $http.get() , like so …

$http.get('index.php/Welcome/getLogs')
   .then(function(response) {
      json = response.data;

      json = JSON.parse(json);  //parse JSON string (if needed)

      var chartjsData = [];
      for (var i = 0; i < json.length; i++) {
         chartjsData.push(json[i].aantal);
      }

      var chartjsLabels = [];
      for (var i = 0; i < json.length; i++) {
         chartjsLabels.push(json[i].datum);
      }

      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
         type: 'line',
         data: {
            labels: chartjsLabels,
            datasets: [{
               label: "Aantal meldingen",
               borderColor: 'rgb(255, 131, 48)',
               data: chartjsData,
               fill: false
            }]
         },
         options: {
            responsive: false
         }

      });
   });

Leave a comment