CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopechart.js
damnputer
damnputer

Reputation: 111

Chart.js not drawing with AngularJS

For some reason this chart won't draw when i try to do it with AngularJS. It seems to work fine if i do it without AngularJS so the problem seems to be related to it. I don't get any error in console so i need some help.

http://jsfiddle.net/a3msytdc/

HTML:

<div ng-controller="MyCtrl">
        <graph ng-repeat="graph in graphs" data="graph.data"></graph>
</div>

JS:

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.graphs = [
        {
            data: [1, 2, 3, 4, 5, 6, 7,8,9],      
        }
    ];
});

myApp.directive('graph', function() {
    return {
        restrict: 'E',
        scope: {
            data: '='
        },

        template: "<canvas></canvas>",
        link: function(scope, elem, attrs) {
                console.log(scope);
            var ctx = elem.children()[0].getContext("2d");

            var lineChartData = {
              datasets: [{
                data: scope.data,
              }]
            };

            var graph = new Chart(ctx, {
              type: "bubble",
              data: lineChartData,
        });
        }
    };
});

Upvotes: 1

Views: 866

Answers (1)

Denis
Denis

Reputation: 747

Ok, here is your updated jsfiddle

Looks like you made a couple of mistakes describing data and ng-repeat was redundant.

Upvotes: 1

Related Questions