I have been trying to follow along with the Google Charts documentation for GeoCharts. For some reason, whenever I try to run their code for markers on my local host it only returns a blank map of Italy. I have created my own Google Maps JS API key and am using that instead of the one provided but it still returns nothing. I'm very lost as I have not been able to find anything that can guide me to the right direction. Any help would be appreciated.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {
'packages': ['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' //used my own API key instead of theirs
});
google.charts.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Population', 'Area'],
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76],
['Naples', 959574, 117.27],
['Turin', 907563, 130.17],
['Palermo', 655875, 158.9],
['Genoa', 607906, 243.60],
['Bologna', 380181, 140.7],
['Florence', 371282, 102.41],
['Fiumicino', 67370, 213.44],
['Anzio', 52192, 43.43],
['Ciampino', 38262, 11]
]);
var options = {
region: 'IT',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Related
I am trying to create a custom clickable map using GeoChart from Google for a website. I want countries to be clickable, where once users select different countries on the map, it would direct them to a separate web page. Also, I want the color to change when it's in a selected state.
Can someone help me with the JavaScript on how to add the select event? I would appreciate it.
Below is the code I have so far.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
'mapsApiKey': 'AIzaSyD3MfRYHAynUsxWCZ8NDsA3cwvWlTkhT1s'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country'],
['Thailand' ],
['India'],
['Malaysia'],
['Sri Lanka'],
['Indonesia'],
['Vietnam'],
['Korea'],
['Taiwan'],
['China'],
]);
var options = {
region: '142', // Asia
colorAxis: {colors: ['#f5f5f5']},
datalessRegionColor: '#f5f5f5',
defaultColor: '#ff8040',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="geochart-colors" style="width: 700px; height: 433px;"> </div>
</body>
</html>
As you can see in my code you need to add a listener which is the google.visualization.events.addListener. Then inside that listener, you can get the name of the selected country. I printed by console.log() function you can do whatever you like with that.
google.charts.load('current', {
'packages':['geochart'],
'mapsApiKey': 'AIzaSyD3MfRYHAynUsxWCZ8NDsA3cwvWlTkhT1s'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country'],
['Thailand' ],
['India'],
['Malaysia'],
['Sri Lanka'],
['Indonesia'],
['Vietnam'],
['Korea'],
['Taiwan'],
['China'],
]);
var options = {
region: '142', // Asia
colorAxis: {colors: ['#f5f5f5']},
datalessRegionColor: '#f5f5f5',
defaultColor: '#ff8040',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', function() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var country = data.getValue(selectedItem.row, 0);
console.log(country);
}
}); };
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
</head>
<body>
<div id="geochart-colors" style="width: 700px; height: 433px;"> </div>
</body>
</html>
I'm trying to populate a geochart from Google Charts.
Basically I'm doing a count of people in STATE, ZIPCODE, COUNT. If i do only STATE and COUNT, it works fine. but when I try to add the zipcode, the map isn't being generated properly.
That's my code:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['State', 'Count'],
['FL', 16],
['MA', 2149],
['NY', 2784],
['NC', 9782],
['PA', 9923],
['WA', 15],
<!-- i want to be able to have the following on the geochart -->
/*['State', 'Zip Code', 'Count'],
['AZ',85013,1],
['CA',91945,12],
['CA',96003,1],
['CA',18045,25],
['CA',92377,1],
['CA',93703,10],
['CA',95407,1],
['CA',93720,6],
['CA',93619,1],
['CA',92009,8],
['CA',93727,1],
['CO',80003,5],
['CO',80004,1],
['CO',80220,2],
['CO',80504,8],
['CO',80134,21],
['CO',80016,1],
['CO',80228,19],
['CO',80111,3],
['CT',06795,1],
['CT',06762,12],*/
]);
var options = {
region: 'US',
displayMode: 'markers',
resolution: 'provinces',
colorAxis: {colors: ['#fff9ef', '#fffa00']}
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I don't understand why when I add the zip code to the data, it just return a blank map. If I change the resolution to 'metros', it seems to give a more granular level in the map as compared to 'provinces'.
Is this something that's possible in google GeoCharts?
I'm trying to make a basic histogram with Google Charts, but for some reason it's not using the bin width that I set. Below is a code sample:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['MyData', 'Value']
, ['whatevs', .57]
, ['whatevs', .57]
, ['whatevs', .57]
, ['whatevs', .8]
]);
var options = {
title: 'My Histogram'
, legend: { position: 'none' }
, histogram: {
bucketSize: .1
}
};
var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
and here's an image of what happens:
but what I would like to happen would be for the bins to be uniformly sized at a width of 0.1.
This appears to be a bug introduced in Charts API version 44. You can roll back to version 43 by specifying the version number when you load the library:
google.charts.load("43", {packages:["corechart"]});
It seems like this is the result of a bug that can be fixed by adding hAxis: { type: 'category' } to the options.
I'm trying to use Google Marker Geocharts for plotting user location event data. Here is the example code of google which i'm using..
<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(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Population', 'Area'],
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76]
]);
var options = {
region: 'IT',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Above is working fine.But, the moment i try to use user location event data(as showing in below)..
var data = google.visualization.arrayToDataTable([
['City', 'Event', 'Year'],
['Rome', 'Birth', '1981'],
['Milan', 'Schooling', '1995-2005']
]);
It's started showing this error -
I searched a lot in google but, did not get any reliable answer. Any idea how to resolve this error ?
Regards
Hi i want to show "Bangalore"(INDIA) in map using google Geomap.I got one code from developer.google.com site and i have create one for INDIA ,using
option['region']="IN";
but i want "Bangalore" (A major city in India) map instead of india. Is there any way to get that .
Please check the code for INDIA
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geomap']});
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Popularity'],
['Karnataka', 200],
['Delhi', 300],
['Bihar', 600],
['Kerala', 700]
]);
var options = {};
options['region'] = 'IN';
options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>
and output is
Google does not have APIs for cities of India. I was facing the same issue while creating a map of Mumbai.
I used this website to do so.
http://www.image-maps.com/
So you basically give a static map of Bangalore. This website will create a object for you and you can download that code.
Try it out!
Worked for me while dividing Mumbai into Municipality wards.