i'm trying to display the map and table, if we select any of the state
in the table then that particular state's color should change in the
map
while debugging an error is occurring "Cannot read property 'events'
of undefined".any body correct me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>state </title>
<script type="text/javascript" src="
http://www.google.com/jsapi"></
script>
<script type="text/javascript+protovis">
google.load('visualization', '1', {packages:
['geochart','table']});
</script>
<script type="text/javascript">
var map;
var table;
function drawVisualizationTable(){
var queryT = new google.visualization.Query(
'
https://docs.google.com/spreadsheet/ccc?
key=0ArFGfpB6duBGdFBJNVI1c3liaXd0c3l3UVNFMmZoMEE&pli=1#gid=0' );
// Send the query with a callback function.
queryT.send(draw);
}
function draw(response) {
if (response.isError()) {
alert('Error in query');
}
var dataT = response.getDataTable();
var table = new
google.visualization.Table(document.getElementById('table_div'));
table.draw(dataT,{width: 1500, height: 400 });
}
function drawVisualizationMap() {
var queryM = new google.visualization.Query(
'
https://docs.google.com/spreadsheet/ccc?
key=0ArFGfpB6duBGdFBJNVI1c3liaXd0c3l3UVNFMmZoMEE#gid=0' );
queryM.setQuery('SELECT C,F');
queryM.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var dataM = response.getDataTable();
var Map = new
google.visualization.GeoChart(document.getElementById('map_div'));
Map.draw(dataM,{width: 700, height: 400, region: 'IN',
resolution: 'provinces' });
}
function drawVisualization(){
google.visualization.events.addListener(table, 'select',
function() {
map.setSelection(table.getSelection());
});
google.visualization.events.addListener(map, 'select',
function() {
table.setSelection(map.getSelection());
});
drawVisualizationTable();
drawVisualizationMap();
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<h1 style="color: red;"><u>State</u></h1>
<div id="map_div"></div>
<div id="table_div"></div>
</body>
</html>