Google GeoMaps JSON

Question

what I am trying to do is read a JSON object into my $angularMap.data and then display the correlating countries on my Google GeoMap. I was able to write the JSON object that needs to be used but for the life of me I cannot figure out how to connect the json object to the $scope.

var app = angular.module('myApp', ['googlechart']);

app.controller('MainCtrl', function ($scope, $http) {
    $http.get('js/data.json')
        .then(function(jsonData){
            $scope.country=jsonData.data.cols[0].label;
            console.log(jsonData.data.cols[0].label)
        });
    var angularMap = {};
    angularMap.type = "GeoChart";
    angularMap.data = [
        ['Country', 'Amount'],
        ['Germany', 200],
        ['United States', 300],
        ['Brazil', 400],
        ['Canada', 500],
        ['France', 1600],
        ['Russia', 700],
        ['Eygpt', 900],
        ['Pakistan', 900]
    ];

    angularMap.options = {
        width: 600,
        height: 300,
        colorAxis: {colors: ['#00FF00']}
        //  displayMode: 'regions'
    };
    var legendName = "eventTypePerDay";
    var timerVar = setInterval(myTimer, 350);

    function myTimer() {
        var legend = document.getElementById("legend").innerHTML = legendName;
    }
    $scope.chart = angularMap;

});

JSON

 {
      "cols": [{
        "id": "",
        "label": "Country",
        "pattern": "",
        "type": "string"
      }, {
        "id": "",
        "label": "Amount",
        "pattern": "",
        "type": "number"
      }],
      "rows": [{
        "c": [{
          "v": "United States",
          "f": null
        }, {
          "v": 300,
          "f": null
        }]
      }, {
        "c": [{
          "v": "Russia",
          "f": null
        }, {
          "v": 500,
          "f": null
        }]
      }, {
        "c": [{
          "v": "Canada",
          "f": null
        }, {
          "v": 100,
          "f": null
        }]
      }, {
        "c": [{
          "v": "Brazil",
          "f": null
        }, {
          "v": 1000,
          "f": null
        }]
      }, {
        "c": [{
          "v": "Germany",
          "f": null
        }, {
          "v": 200,
          "f": null
        }]
      }]
    }

http://plnkr.co/edit/JHdUuyNjIVKookAwYmTq?p=preview

Answer 1

I would suggest to apply the following changes for your example:

• Since the provided JSON format is compatible with Google Chart Data Table you could omit any parsing of input data
• There is no any guarantee that after the specified interval data will be loaded, so i would suggest to avoid using setInterval function at all

Having said that, below is provided the modified example:

var app = angular.module('myApp', ['googlechart']);

app.controller('MainCtrl', function ($scope, $http) {
    $http.get('https://gist.githubusercontent.com/vgrem/d4de661a061444642888/raw/2c3ab7a210afd3ff0656610315259827ca971da0/data.json')
        .then(function (jsonData) {
            $scope.country = jsonData.data.cols[0].label;
            $scope.chart = createChart(jsonData.data);
            document.getElementById("legend").innerHTML = jsonData.data.cols[0].label;
        });
});


function createChart(data){
    var chartProperties = {};
    chartProperties.type = "GeoChart";
    chartProperties.data = data;
   
    chartProperties.options = {
        width: 600,
        height: 300,
        colorAxis: { colors: ['#00FF00'] }
        //  displayMode: 'regions'
    };
    return chartProperties;
}

<script src="http://code.angularjs.org/1.2.10/angular.js"></script>
<script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
<div ng-app='myApp' ng-controller="MainCtrl">
    <div google-chart chart="chart"></div>
    <div style="margin-left: 225px;" id="legend"></div>
</div>

Answer 2

I assume you're wanting to write the returned data to your angularMap.data array. It's really just a matter of parsing the data (which I've done in a somewhat naive way below):

var app = angular.module('myApp', ['googlechart']);

app.controller('MainCtrl', function ($scope, $http) {

    var angularMap = {};
    angularMap.type = "GeoChart";
    angularMap.data = [];

    $http.get('data.json')
        .then(function(jsonData){
            angularMap.data.push(
              [jsonData.data.cols[0].label,jsonData.data.cols[1].label]
            );
            jsonData.data.rows.forEach(function(current) {
              angularMap.data.push(
                [current.c[0].v, current.c[1].v]
              )
            });
        });


    angularMap.options = {
        width: 600,
        height: 300,
        colorAxis: {colors: ['#00FF00']}
        //  displayMode: 'regions'
    };
    var legendName = "eventTypePerDay";
    var timerVar = setInterval(myTimer, 350);

    function myTimer() {
        var legend = document.getElementById("legend").innerHTML = legendName;
    }
    $scope.chart = angularMap;

});