Parse JSON data using jQuery.getJSON()

A simple demo to show how we can parse JSON data using jQuery.getJSON()

by mram888

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<select id="mapRegion" class="form-control input-sm pull-right mr5"  ng-model="mapRegion" name="mapRegion" onchange="drawRegionsMap()">
            <option value="world" selected="selected">World</option>
            <optgroup label="Americas">
            <option value="019">Americas</option>
            <option value="021">Northern America</option>
            <option value="US">United States of America</option>
            <option value="029">Caribbean</option>
            <option value="013">Central America</option>
            <option value="ME">Mexico</option>
            <option value="005">South America</option>
            </optgroup>
            <optgroup label="Europe">
            <option value="150">Europe</option>
            <option value="154">Northern Europe</option>
            <option value="GB">United Kingdom</option>
            <option value="155">Western Europe</option>
            <option value="DE">Germany</option>
            <option value="FR">France</option>
            <option value="151">Eastern Europe</option>
            <option value="039">Southern Europe</option>
            <option value="ES">Spain</option>
            </optgroup>
            <optgroup label="Asia">
            <option value="142">Asia</option>
            <option value="143">Central Asia</option>
            <option value="030">Eastern Asia</option>
            <option value="034">Southern Asia</option>
            <option value="035">South-Eastern Asia</option>
            <option value="145">Western Asia</option>
            </optgroup>
            <optgroup label="Africa">
            <option value="002">Africa</option>
            <option value="015">Northern Africa</option>
            <option value="011">Western Africa</option>
            <option value="017">Middle Africa</option>
           ...

JavaScript

var geocodingAPI = "https://s3.eu-west-1.amazonaws.com/test.local.in/test/reports/data/39fe44e5/geoStats.json";

google.charts.load('current', {
    'packages': ['geochart']
});

google.charts.setOnLoadCallback(drawRegionsMap);
var array = []; 
var jsonData = $.ajax({
          url: geocodingAPI,
          dataType: "json",
          async: false
          }).responseText;
            
 $.each(JSON.parse(jsonData).countries, function(index,elem) {
        array.push([elem._id,elem.total]);
 });
 
function drawRegionsMap() {
  var e = document.getElementById('mapRegion');
  var myRegion = e.options[e.selectedIndex].value;

  var data = google.visualization.arrayToDataTable([
     ['Location','Tweets'],
     ...array,
  ]);

  var options = {
        colorAxis: {colors: ['green','blue']},
        region: myRegion,
        magnifyingGlass: {enable: true, zoomFactor: 7.5},
        // backgroundColor: '#81d4fa',
        // datalessRegionColor: '#f8bbd0',
        defaultColor: '#f5f5f5',
        };

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

  chart.draw(data, options);
}

$("#mapRegion" ).change(function() {
  drawRegionsMap();
});