All geek questions in one place

Use GeoCharts in Angularjs

How can I use Google GeoChart in Angular? I want to enter angular data inside geoChart, as shown 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 tips?

+5
source share
1 answer

Google Angular Chart can do this.

bower install angular-google-chart --save , then add googlechart to the application 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

+13
source

Source: https://habr.com/ru/post/1201870/

More articles:


All Articles