score:0

one option is to rebuild the chart when the data changes by using the $watch option of angular.

close to the above example would be

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>chart.js demo</title>
    <script src='chart.js'></script>
    <script src='angular.js'></script>
    <script src='angular-chart.js'></script>
</head>

<body ng-app="app" ng-controller="ctrl">
    <textarea ng-model="chart"></textarea>
    <button ng-click="updateconfig();">update</button>
    <canvas id="mychart"></canvas>
    <script type="text/javascript">

    getsample = function(n) {
        var res = [];
        for (var i = 0; i < n; i++) {
            res.push(math.round(math.random() * 100));
        }
        return res;
    }

    var app = angular.module('app', ["chart.js"]);
    app.controller("ctrl", function ctrl($scope, $interval) {

        $scope.chart = '{"type": "line"}';
        $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
        $scope.data = getsample(7);

        $scope.updateconfig = function(testfunction) {
            var ctx = document.getelementbyid("mychart");
            var config = json.parse($scope.chart);
            config["data"] = {
                labels: $scope.labels, //should be a reference
                datasets: [{
                    data: $scope.data //should be a reference 
                }]
            }
            var mychart = new chart(ctx, config);
        };

        $scope.$watch('data', function(){
            var ctx = document.getelementbyid("mychart");
            var config = json.parse($scope.chart);
            config["data"] = {
                labels: $scope.labels, //should be a reference
                datasets: [{
                    data: $scope.data //should be a reference 
                }]
            }
            var mychart = new chart(ctx, config);
        }, false);

        $interval(function() {
            $scope.data = getsample(7);
            console.log("changed data to " + $scope.data);
        }, 3000);
    });
    </script>
</body>

</html>

score:1

you are just updating the data but the chart has been already rendered on your view.so you need to draw it again with updated data. you can make a function to draw chart like this

function drawchart(element,dataset){
  var mychart = new chart(element,{type:'bar',data:{labels:$scope.labels,datasets :dataset}})
}

and call it when your dataset get chanegd


Related Query