Google Visualization Using Angular

Google Visualization Using Angular Directive.

by Mayank Dixit

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<div ng-app='myApp'>
    <div ng-controller='mainCtrl'>Hay {{ctrlTest}}</div>
    <div chart></div>
</div>

JavaScript

var myApp = angular.module('myApp', []).controller('mainCtrl',function($scope){
    $scope.ctrlTest = "MAYANK";
}).
directive('chart', function() {
    return {
        restrict: 'A',
        link: function($scope, $elm, $attr) {
            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Rules Name');
            data.addColumn('number', 'Rules Broken');
            data.addRows([
                ['Driving License', 233],
                ['Speeding', 134],
                ['Incomplete Documents', 111],
                ['Vehicle Theft', 514],
                ['Underage Driving', 562]
            ]);
            
            // Set chart options
            var options = {
                'title':'Report from Transport Dept., India for Dec\'13',
                 'width':500,
                 'height':350
            };
            
            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.ColumnChart($elm[0]);
            chart.draw(data, options);
        }
    }
});
   google.setOnLoadCallback(function() {
    });
google.load('visualization', '1', {packages: ['corechart']});