score:67

Accepted answer

since charting involves heavy dom manipulation, directives are the way to go.

data can be kept in the controller

app.controller('ctrl', function($scope) {
    $scope.data = [[[0, 1], [1, 5], [2, 2]]];
});

and you can create a custom html tag1 specifying the model you want to get data from

 <chart ng-model='data'></chart>

which angular can compile through a directive

app.directive('chart', function() {
    return {
        restrict: 'e',
        link: function(scope, elem, attrs) {
            var data = scope[attrs.ngmodel];
            $.plot(elem, data, {});
            elem.show();
        }
    };
});

example here.

this process is similar for most plugins that modify the dom.

-*-

also, you can watch for changes in the chart's underlying data and redraw it, so this way you can grab data through the $http service from your controller and update the view automatically. this can be achieved by modifying the linking function in the directive definition object

   var chart = null,
       opts  = { };

    scope.$watch(attrs.ngmodel, function(v){
        if(!chart){
            chart = $.plot(elem, v , opts);
            elem.show();
        }else{
            chart.setdata(v);
            chart.setupgrid();
            chart.draw();
        }
    });

notice the usage of flot's api within the directive to achieve what we want.

here the full example


1 can be an attribute too.

score:1

to use jquery plugins with angularjs, you have to wrap them in directives, you can find some exemples of jquery plugins directives by reading the source code of angularui directives: https://github.com/angular-ui/angular-ui/tree/master/modules/directives


Related Query

More Query from same tag