Multiple Google geo charts on One Page

multiple geo

Fixing Multiple google geo charts on One page, this tutorial is [solved] your problem.

official https://developers.google.com/chart/interactive/docs/gallery/geomap#overview

A geomap is a map of a country, continent, or region map, with colors and values assigned to specific regions. Values are displayed as a color scale, and you can specify optional hovertext for regions. The map is rendered in the browser using an embedded Flash player. Note that the map is not scrollable or draggable, but can be configured to allow zooming.
tutorial geo chart php mysqli xml

Tutorial  available on Youtube

Data Format

Two address formats are supported, each of which supports a different number of columns, and different data types for each column. All addresses in the table must use one or the other; you cannot mix types.

  • Format 1: Latitude/Longitude locations. This format works only when the dataMode option is ‘markers’. If this format is used, you do not need to include the Google Map Javascript. The location is entered in two columns, plus two optional columns:
    1. [Number, Required] A latitude. Positive numbers are north, negative numbers are south.
    2. [Number, Required] A longitude. Positive numbers are east, negative numbers are west.
    3. [Number, Optional] A numeric value displayed when the user hovers over this region. If column 4 is used, this column is required.
    4. [String, Optional] Additional string text displayed when the user hovers over this region.
  • Format 2: Address, country name, region name locations, or US metropolitan area codes. This format works with the dataMode option set to either ‘markers’ or ‘regions’. The location is entered in one column, plus two optional columns:
    1. [String, Required] A map location. The following formats are accepted:
      • A specific address (for example, “1600 Pennsylvania Ave”).
      • A country name as a string (for example, “England”), or an uppercase ISO-3166 code or its English text equivalent (for example, “GB” or “United Kingdom”).
      • An uppercase ISO-3166-2 region code name or its English text equivalent (for example, “US-NJ” or “New Jersey”). Note: Regions can only be specified when the dataMode option is set to ‘regions’.
      • A metropolitan area code. These are three-digit metro codes used to designate various regions; US codes only supported. Note that these are not the same as telephone area codes.
    2. [Number, Optional] A numeric value displayed when the user hovers over this region. If column 3 is used, this column is required.
    3. [String, Optional] Additional string text displayed when the user hovers over this region.

Tutorial  available on Youtube

 

Advertisements

Fixing Google Geo chart PHP + MYSQLi or XML parser complete tutorials

Fixing Google Geo chart PHP + MYSQLi or XML parser complete tutorials

 

Please Subscribe my Chanel on Youtube:

YouTube-Subscribe

google geo chart

Mysqltable is bellow:

google chart mysql

 

<?php $con = mysqli_connect('localhost','root','','test') or Die(); ?>
<html>
  <head>
   <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
      google.load("visualization", "1", {packages:["geochart"]});
      google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

        var data = google.visualization.arrayToDataTable([

          ['Country', 'Visits'],
           <?php $query = "SELECT count(ip) AS count, country FROM visitors GROUP BY country"; $exec = mysqli_query($con,$query); while($row = mysqli_fetch_array($exec)){ echo "['".$row['country']."',".$row['count']."],"; } ?>
        ]);

        var options = {
        	
        };

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

        chart.draw(data, options);
      }
    </script>
  
    

   
  </head>
  <body>
 



<h3>Geo Chart</h3>






<div id="geochartsatu" style="width: 900px; height: 500px;"></div>



  
   
         

  </body>
</html>