Using JSON in Chart.js with Angular.js

Question

I'm having next problem -> when i use the encode json string printed by a php echo tag in my front-end everything works, but when i want to use it with the angular get function I don't get it to work.

Codeigniter Controller (back-end)

public function getLogs(){
        $this->load->model('Home_model');
        $logs = $this->Home_model->getLogs();
        echo json_encode($logs);
    }

AngularJs Controller (front-end)

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


        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
            }

        });

Thanks in advance!

can you console.log json in browser and show us what is the format? — Dinesh undefined
– Dinesh undefined, Commented Jun 20, 2017 at 14:24
multiple objects -> Object aantal : "17" datum : "2017-05-31 — Alex Logist
– Alex Logist, Commented Jun 20, 2017 at 14:27
the response (network inspector): [{"datum":"2017-05-31","aantal":"17"},{"datum":"2017-06-01","aantal":"22"},{"datum":"2017-06-02","aantal":"47"},{"datum":"2017-06-08","aantal":"2"},{"datum":"2017-06-11","aantal":"2"},{"datum":"2017-06-19","aantal":"2"},{"datum":"2017-06-20","aantal":"21"}] — Alex Logist
– Alex Logist, Commented Jun 20, 2017 at 14:29
Yes, but it's that the json string is not correct because it needs objects I think ? It's a parsing error — Alex Logist
– Alex Logist, Commented Jun 20, 2017 at 14:37

ɢʀᴜɴᴛ · Accepted Answer · 2017-06-20 15:37:36Z

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
         }

      });
   });

edited Jun 20, 2017 at 15:37

answered Jun 20, 2017 at 15:32

ɢʀᴜɴᴛ

33k15 gold badges123 silver badges115 bronze badges

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

5 Comments

ɢʀᴜɴᴛ Over a year ago

try with/without parsing the JSON

Alex Logist Over a year ago

Yes I saw it and just deleted my reaction, this solves a big part of the issue! I'm taking a look at the rest, I will post when I have it working 100%. Thanks!

Alex Logist Over a year ago

Solved ! I have one more question; when i want to update the information now for example with a button that makes a new http request i just have to change the data for the labels/data? <- Just the first init has to be made in the get function ?

ɢʀᴜɴᴛ Over a year ago

Yes you have to change the labels/data array when you have new data to update the chart with.

Alex Logist Over a year ago

Thanks! Solved all my issues :)

Collectives™ on Stack Overflow

Using JSON in Chart.js with Angular.js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related