AngularJS - Charting with Flot

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){
    
    var data1 = [ [[0, 1], [1, 5], [2, 2]] ],
        data2 = [ [[0, 4], [1, 2], [2, 4]] ],
        curr  = 1;
    
    $scope.data = data1;
    
    $scope.change = function(){ 
        if(curr === 1){ 
            $scope.data = data2;
            curr = 2;
        }else{
            $scope.data = data1;
            curr = 1;
        }
    };

});

directives.js

App.directive('chart', function(){
    return{
        restrict: 'E',
        link: function(scope, elem, attrs){
            
            var chart = null,
                opts  = { };
            
            var data = scope[attrs.ngModel];            
            
            scope.$watch('data', 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'>
        <p><button ng-click='change()'>Change Data</button></p>
        <chart ng-model='data'> </chart>
</div>

style.css

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

On the jsfiddle, make sure you change the flot javascript to use http://rawgithub.com/ vs http://raw.github.com/

Cheers

thx for the hint @drudru :)

The directive that you are using is using a watch that is hard coded to "data" so the scope has to have a data property. Look at my fork for a slight change that would allow the directive to be re-used and have multiple charts on a page.