Interactive GeoMap

Sample to create interactive Geomap dashboard

by Ankit Mittal

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<body>
  <div id="regions_div" style="width: 900px; height: 500px;"></div>
  <!--Div that will hold the dashboard-->
  <div id="dashboard_div">
    <!--Divs that will hold each control and chart-->
    <table>
      <tr>
        <td>
        <div id="control3" align="center"></div>
        </td>
      </tr>
      <tr>
        <td>
          <div id="filter_div"></div>
        </td>
        <td>
          <div id="filter_div1"></div>
        </td>
      </tr>
    </table>
    <div id="chart1"></div>
    <div id="chart3"></div>
    <div id="chart2" align="center"></div>
    </div>
</body>

JavaScript

google.charts.load('current', {
        'packages': ['geochart', 'corechart', 'table', 'controls']
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
				// Create our data table.
        	  var data = google.visualization.arrayToDataTable([
            ['Country', 'Period', 'RMPV', 'TARGET', 'Average'],
            ['Germany', 'Nov-2015', 75, 120, 97.5],
            ['Germany', 'Dec-2015', 55, 65, 60],
            ['Canada', 'Nov-2015', 200, 85,42.5],
            ['Canada', 'Dec-2015', 55, 65, 60],
            ['IN', 'Nov-2015', 328, 30, 179],
            ['IN', 'Dec-2015', 55, 65, 60],
            ['France', 'Dec-2015', 30, 100, 65],
            ['France', 'Nov-2015', 75, 120, 97.5],
            ['Brazil', 'Dec-2015', 50, 100, 75],
            ['Brazil', 'Nov-2015', 200, 85, 142.5],
            ['United States', 'Dec-2015', 55, 65, 60],
            ['United States', 'Nov-2015', 328, 30, 179]
          ]);

        var data1 = google.visualization.data.group(data,[0],
        [{'column': 4, 'aggregation': google.visualization.data.avg, 'type': 'number'}]
        );

        var options = {
          colorAxis: {
          values: [0,30,90,150],
          colors: ['#F40EF4','#FCFC2A','#7BFC2A', '#FC4A2A']
          },
          backgroundColor: '#F1F7FD',
          datalessRegionColor: '#8B8E91',
          defaultColor: '#f5f5f5'
        };
        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        function selectHandler() {
          var selectedItem = chart.getSelection()[0];
          if (selectedItem) {
            var message = data1.getValue(selectedItem.row, 0);
//            alert(message)
            //if(message=='Canada'){
            var display_value = [message];
           //};
          };
          /* Start of testing*/
          
          // Create a dashboard.
          var dashboard = new google.visualization.Dashboard(
           ...