FrAngular : Google Charts Pie (bug)

by tchatel

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<div ng-app="app" ng-controller="Ctrl">

    <chartDiv/>
</div>

CSS

#chart_div {
  font-size: 0.7em;   
}

JavaScript

var app = angular.module('app', []);
app.run(function ($q) {
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {'packages':['corechart']});
    // Set a callback to run when the Google Visualization API is loaded.
	var deferred = $q.defer();
    //google.ready = deferred.promise;
    console.log("aaa");
    google.setOnLoadCallback(function () {
        console.log('ok');
        deferred.resolve();
    });
});
app.directive('pie-chart', function() {
    return {
        restrict: 'E',
        link: function($scope, $elm, $attr) {
          google.ready.then(function() {
            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Topping');
            data.addColumn('number', 'Slices');
            data.addRows([
                ['Mushrooms', 3],
                ['Onions', 1],
                ['Olives', 1],
                ['Zucchini', 1],
                ['Pepperoni', 2]
            ]);
            
            // Set chart options
            var options = {'title':'How Much Pizza I Ate Last Night',
                           'width':400,
                           'height':300};
            
            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart($elm[0]);
            chart.draw(data, options);
          });
        }
    }
});

function Ctrl($scope) {
    $scope.data = [
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
    ];
    
}