Google Chart by AngularJS | 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" id="chart_div"></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, ['googleMapApp']);
});

angular.module('myApp', []).
  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 = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  ]);