Google Chart by AngularJS Directive | Web Programming examples

AngularJS : 1.6.5
Bootstrap : 3.x

Demo

  <head>
//
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body>
    <div ng-controller="MyCtrl" g-chart></div>
    <script type='text/javascript' src='js/angular.min.js'></script>
    <script type="text/javascript" src="js/app.js"></script>
  </body>

google.charts.load('current', {packages: ['corechart']});

google.charts.setOnLoadCallback(function() {
  angular.bootstrap(document.body, ['myApp']);
});

var mymodule=angular.module('myApp', [])

mymodule.controller('MyCtrl', ['$scope',
  function($scope) {
    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]
    ]);
    var options = {'title':'How Much Pizza I Ate Last Night',
                 'width':400,
                 'height':300};
    var chart = {};
    chart.data = data;
    chart.options = options;
    $scope.chart = chart;
  }
]);

mymodule.directive('gChart', function() {
  return {
    restrict: 'A',
    link: function($scope, elm, attrs) {
    var chart = new google.visualization.PieChart(elm[0]);
      chart.draw($scope.chart.data, $scope.chart.options);
    }
  };
});