jQuery Flot Chart in AngularJS Directive

Demo of how to render a jQuery plugin through Angular JS

by Keyur Patel

HTML

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://rawgithub.com/flot/flot/master/jquery.flot.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<!-- Want this to work in IE8 too? 
     Scroll to the bottom of my post here: http://bit.ly/1e0Mv7n
-->

<div ng-app='App'>
    <div ng-controller='barChartController'>        
        <chart ng-model='data'></chart>        
    </div>
</div>

CSS

chart {
    display: block;
    width:400px;
    height:200px;
}

JavaScript

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

App.controller('barChartController', function($scope){
    
    var daftPoints = [[0, 4]],
	    punkPoints = [[1, 20]];
    
    var data1 = [
        {
            data: daftPoints,
            color: '#00b9d7',
            bars: {show: true, barWidth:1, fillColor: '#00b9d7', order: 1, align: "center" }
        },
        {
            data: punkPoints,
            color: '#3a4452',
            bars: {show: true, barWidth:1, fillColor: '#3a4452', order: 2, align: "center" }
        }
    ];      
    
    $scope.data = data1;
    
   
});

App.directive('chart', function(){
    return{
        restrict: 'E',
        link: function(scope, elem, attrs){
            
            var chart = null,
                options = {
                xaxis: {
                    ticks:[[0,'Daft'],[1,'Punk']]
                },
                grid: {
                  labelMargin: 10,
                  backgroundColor: '#e2e6e9',
                  color: '#ffffff',
                  borderColor: null
                }
              };
                    
            var data = scope[attrs.ngModel];            
            
            // If the data changes somehow, update it in the chart
            scope.$watch('data', function(v){
                 if(!chart){
                    chart = $.plot(elem, v , options);
                    elem.show();
                }else{
                    chart.setData(v);
                    chart.setupGrid();
                    chart.draw();
                }
            });
        }
    };
});