In this example, we have data about certain of India -- data about number of registered vehicles in different years -- in a Google Docs spreadsheet. We use this data to draw a Google GeoChart.
In the code please observe the following points
In creating this chart in this blog, we faced an unusual error. When viewed as an independent post, the chart was visible but when seen as a part of the blog, the chart was not drawn ?
What can be the reason ? The reason was that we had the same function name in two different posts and so when two posts were visible together on the same page, the codes were interefering with each other. So we simply placed an arbitrary suffix values to the function names and it worked.
The same code can be embedded in a non-blog web post like this.
A similar map can be created using (a) public website data and (b) R statistical tool.
Google Map API
Subsequent to the creation of these posts, Google has made it mandatory for all new domains ( or new websites, new blogs) to incorporate a Google Maps API into the HTML code :
In the code please observe the following points
- The spreadsheet doc is identified as https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AhEX55Pfl1eedE5mUHN4QVRLNzdldEpwZnAyNy1abUE
- The sheets as identified by sheet=CityWise2
- The range is identified by range=B2:M23
- The columns being selected are identified by query.setQuery('select B,D,E');
- The region in the map is 'IN' that is India
- The displayMode is "markers" .. which means towns and cities, had this been region we would have got full states
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=myAPIkeyhere&callback=initMap"
type="text/javascript"></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap02);
function drawMarkersMap02() {
var query = new google.visualization.Query(
'https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=xxxxxxxxxxxxxxx&sheet=CityWise2&range=B2:M23&headers=1');
query.setQuery('select B,D,E');
query.send(handleQueryResponse02);
};
function handleQueryResponse02(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var options = {
datalessRegionColor : 'FFFF99',
region: 'IN',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
var data = response.getDataTable();
var chart = new google.visualization.GeoChart(document.getElementById('pm_div4'));
chart.draw(data, options );
}
</script>
</head>
<body>
<div id="pm_div4" style="width: 600px; height: 500px;"></div>
</body>
In creating this chart in this blog, we faced an unusual error. When viewed as an independent post, the chart was visible but when seen as a part of the blog, the chart was not drawn ?
What can be the reason ? The reason was that we had the same function name in two different posts and so when two posts were visible together on the same page, the codes were interefering with each other. So we simply placed an arbitrary suffix values to the function names and it worked.
The same code can be embedded in a non-blog web post like this.
A similar map can be created using (a) public website data and (b) R statistical tool.
Google Map API
Subsequent to the creation of these posts, Google has made it mandatory for all new domains ( or new websites, new blogs) to incorporate a Google Maps API into the HTML code :
<script async defer src="https://maps.googleapis.com/maps/api/js?key=myAPIkeyhere&callback=initMap"
type="text/javascript"></script>
Really helpful, thanks a lot.
ReplyDelete