Menu
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/gallery/geochart?hl=it#Regions
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
Some advice?
326
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;
});<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.18/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/0.1.0/ng-google-chart.min.js" type="text/javascript"></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div google-chart chart="chart"></div>
</body>
</html>http://jsbin.com/wiguxu/edit?html,js,output
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With