Use GeoCharts in Angularjs

Question

How can I use Google GeoChart in Angular? I want to inject angular data inside geoChart like this examples in Javascript https://developers.google.com/chart/interactive/docs

Answer 1

Angular Google Chart can do this.

bower install angular-google-chart --save, then add googlechart to the app module dependencies.

angular.module('app', ['googlechart'])
.controller('ctrl', function($scope) {
  var chart1 = {};
  chart1.type = "GeoChart";
  chart1.data = [
    ['Locale', 'Count', 'Percent'],
    ['Germany', 22, 23],
    ['United States', 34, 11],
    ['Brazil', 42, 11],
    ['Canada', 57, 32],
    ['France', 6, 9],
    ['RU', 72, 3]
  ];

  chart1.options = {
    width: 600,
    height: 300,
    chartArea: {left:10,top:10,bottom:0,height:"100%"},
    colorAxis: {colors: ['#aec7e8', '#1f77b4']},
    displayMode: 'regions'
  };

  chart1.formatters = {
    number : [{
      columnNum: 1,
      pattern: "$ #,##0.00"
    }]
  };

  $scope.chart = chart1;
});

http://jsbin.com/wiguxu/edit?html,js,output