hi

28 views
Skip to first unread message

sk

unread,
May 23, 2012, 4:11:49 AM5/23/12
to protovis

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>

Reply all
Reply to author
Forward
0 new messages