readme.md

Charting with Flot in AngularJS

Example: http://jsfiddle.net/jaimem/TDwGF/

app.js

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

controllers.js

App.controller('Ctrl', function($scope){
    
    $scope.data1 = [ [[0, 1], [1, 5], [2, 2]] ];
    $scope.data2 = [ [[0, 4], [1, 2], [2, 4]] ];
   
});

directives.js

App.directive('chart', function(){
    return{
        restrict: 'A',
        link: function(scope, elem, attrs){
            
            var chart = null,
                opts  = { };
            
            var data = scope[attrs.ngModel];            
            
            scope.$watch(attrs.chart, function(v){
                if(!chart){
                    chart = $.plot(elem, v , opts);
                    elem.show();
                }else{
                    chart.setData(v);
                    chart.setupGrid();
                    chart.draw();
                }
            });
        }
    };
});

example.html

<div ng-app='App'>
    <div ng-controller='Ctrl'>
        <div chart='data1'> </div>
        <div chart='data2'> </div>
</div>

style.css

chart{
    display:none;
    width:400px;
    height:200px;
}​