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.
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();
}
};
});
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.
1 Can be an attribute too.