How to Integrate Flot with AngularJS?

Question

I am new to Angular and Flot, but am experienced with Jquery and Javascript. I am a bit confused about how to go about binding a Flot chart to Angular data models, since Flot is a JQuery plugin. I've searched around, but haven't been able to find an example.

I would also be happy to use highcharts, google-charts, or any other charting solution.

Answer 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

Answer 2

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.