CODEWITHSUNDEEP
javascriptangularjsgoogle-visualization
user2402107
user2402107

Reputation: 913

Google Charts-Map in AngularJs

I have created a basic Google Chart-Map that works perfectly well however I want to convert it into AngularJS so it can go with my other charts. This is what I have:

index.html

google.setOnLoadCallback(drawRegionsMap);

      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);
      }

https://jsfiddle.net/0e3jx73b/

Upvotes: 1

Views: 1559

Answers (2)

Himanshu sharma
Himanshu sharma

Reputation: 7901

    Yes there is support to google geo maps . I have use many time this is the code

    create a directive for google map

    .directive('chart', function() {

        return {
            restrict: 'E',
            replace: true,
            scope: {
                data: '=data'
            },
            template: '<div class="chart"></div>',
            link: function(scope, element, attrs) {
                 var chart=  new google.visualization.GeoChart(element[0]);

                var options = { region: 'IN',
        displayMode: 'regions',
        resolution: 'provinces',
        width: 640, 
        height: 480};

                scope.$watch('data', function(v) {

                    var data = google.visualization.arrayToDataTable(v);
                    chart.draw(data, options);

                });

            }
        };

    })


    and then make a angular controller to load data

    .controller('ChartController', function($scope) {
        console.log("hello")
        $scope.scoreHistory = [];

        $scope.loadDataFromServer = function() {

            var scoreHistory = [
        ['State', 'Jeenees'],
        ['Uttar Pradesh', 199581477],
        ['Maharashtra', 112372972],

      ];

            $scope.scoreHistory = scoreHistory;

        };$scope.loadDataFromServer();



    and then use this directive in html
    <div  ng-controller="ChartController"> <chart data="scoreHistory"></chart></div>


and at main html page add 

<script>
google.setOnLoadCallback(function() {

    angular.bootstrap(document, ['app']);

});

google.load('visualization', '1', {'packages': ['geochart']}); 

    </script>

and add an attact file from this 

https://jsfiddle.net/jitendravyas/f5ZLn/

Upvotes: 0

nbering
nbering

Reputation: 2800

Try Angular-Google-Chart. It provides an interface for the Google Charts API in a more angular-friendly way. It also handles loading and callbacks, so for simple use cases, with essentially static data, you don't even need to write any function calls. But if you are, the directive binds to your data and automatically redraws the chart when the data changes.

JavaScript

$scope.chartObject = {
  data: [], //your array
  options: {},
  type: "GeoChart"
};

HTML

<div google-chart chart="chartObject"></div>

Upvotes: 2

Related Questions