Google Charts - Google Charts tutorial - Basic Map - chart js - google graphs - google charts examples




Overview:

  • The Google Map Chart displays a map using the Google Maps API. Data values are displayed as markers on the map.
  • Data values can be coordinates (lat-long pairs) or addresses.
  • The map will be scaled so that it includes all the identified points.
  • If you want your maps to be line drawings rather than satellite imagery, use a geochart instead.

Configurations:

  • We've used Map class to show map based chart.
//Map chart
var chart = new google.visualization.Map(document.getElementById('container'));
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Sample code

googlecharts-map-basic.html

 Tryit<html>
<head>
<title>Google Charts - Wikitechy</title>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript" src="https://www.google.com/jsapi"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['map']});     
   </script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
    var data = google.visualization.arrayToDataTable([
         ['Country', 'Population'],
         ['China', 'China: 1,363,800,000'],
         ['India', 'India: 1,242,620,000'],
         ['US', 'US: 317,842,000'],
         ['Indonesia', 'Indonesia: 247,424,598'],
         ['Brazil', 'Brazil: 201,032,714'],
         ['Pakistan', 'Pakistan: 186,134,000'],
         ['Nigeria', 'Nigeria: 173,615,000'],
         ['Bangladesh', 'Bangladesh: 152,518,015'],
         ['Russia', 'Russia: 146,019,512'],
         ['Japan', 'Japan: 127,120,000']
   ]);
  
   // Set chart options
   var options = {
      showTip: true    
   };				

   // Instantiate and draw the chart.
   var chart = new google.visualization.Map(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Output:


Related Searches to Google charts - Basic Map

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×