Chart.js not drawing with AngularJS

Question

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,
        });
        }
    };
});

I don't know anything about Chart.js but I'm wondering what you are expecting to show up in your <canvas> tag. — jbrown
– jbrown, Commented Dec 28, 2015 at 18:46
jsfiddle.net/amsjy4Lb/2 As you can see it draws fine without AngularJS. — damnputer
– damnputer, Commented Dec 28, 2015 at 18:54
Sorry i had some trouble with jsfiddle, the link shows the correct fiddle now. — damnputer
– damnputer, Commented Dec 28, 2015 at 18:59

Denis · Accepted Answer · 2015-12-28 21:33:59Z

1

Ok, here is your updated jsfiddle

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

answered Dec 28, 2015 at 21:33

Denis

7474 silver badges13 bronze badges

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

2 Comments

damnputer Over a year ago

Ok thanks for fixing it, here's the final solution since i actually needed that ng-repeat: jsfiddle.net/vvx107tt I'm still a bit puzzled about what the initial problem was, since i started working with example in stackoverflow.com/questions/21468244/… it's of course a different graph library, but it doesn't seem to require those changes you made in my code.

Denis Over a year ago

i just followed the example without angular you provided

Collectives™ on Stack Overflow

Chart.js not drawing with AngularJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related