Add data dynamically to the charts in angular js

Question

I am using charts in my webapp and for that I am using angular-charts. The html file for charts is

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

and the controller file for this is

    angular.module('myApp')
    .controller('myController', function ($scope) { 

    $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
    $scope.data = [300, 500, 100];
    });

Now I just want to know how to add data dynamically into this pie chart.

Thanks in advance

what is the chart library you are using?

Sajeetharan
– Sajeetharan

2016-04-06 05:32:43 +00:00
Commented Apr 6, 2016 at 5:32 — Sajeetharan
– Sajeetharan, Commented Apr 6, 2016 at 5:32
I am using Chart.js and angular-chart.js .

Sachin Bahal
– Sachin Bahal

2016-04-06 05:34:53 +00:00
Commented Apr 6, 2016 at 5:34 — Sachin Bahal
– Sachin Bahal, Commented Apr 6, 2016 at 5:34
just push data to your data & labels arrays dynamically

lanlau
– lanlau

2016-04-06 05:35:30 +00:00
Commented Apr 6, 2016 at 5:35 — lanlau
– lanlau, Commented Apr 6, 2016 at 5:35

Bettimms · Accepted Answer · 2016-04-06 05:37:03Z

1

You might have a button , when you click you populate arrays your charts are bound to.

$scope.onClick = function(item,label)
{
  //item and label can come from anywhere, i just add here as parameters to illustrate as example
  $scope.data.push(item);
  $scope.labels.push(label);
}

answered Apr 6, 2016 at 5:37

Bettimms

6715 silver badges12 bronze badges

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

Comments

Francisco Menéndez · Accepted Answer · 2017-03-24 11:51:34Z

0

To add dynamically data to the chart you have to push data to both the data arrays and the labels array.

Note: Data array is not actually an array, it is an array inside an array. So data is not [] but rather a [[]].

Code to make it work:

If using $scope: $scope.data[0].push(data) and also $scope.labels.push(label)
If using vm: vm.data[0].push(data) and also vm.labels.push(label)

answered Mar 24, 2017 at 11:51

Francisco Menéndez

1

Collectives™ on Stack Overflow

Add data dynamically to the charts in angular js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related