Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AngularJS - Charting with Flot
var App = angular.module('App', []);
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;
}
};
});
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();
}
});
}
};
});
<div ng-app='App'>
<div ng-controller='Ctrl'>
<p><button ng-click='change()'>Change Data</button></p>
<chart ng-model='data'> </chart>
</div>
chart{
display:none;
width:400px;
height:200px;
}​
@drudru

This comment has been minimized.

Copy link

@drudru drudru commented Jul 11, 2013

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

Cheers

@XORwell

This comment has been minimized.

Copy link

@XORwell XORwell commented Aug 22, 2013

thx for the hint @drudru :)

@runxc1

This comment has been minimized.

Copy link

@runxc1 runxc1 commented Oct 3, 2013

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment