Skip to content

Instantly share code, notes, and snippets.

@zspine
Forked from jrmoran/app.js
Created Nov 4, 2015
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;
}​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment