I've been struggling with an issue for while now: trying to do a partial page update to a google intensity map visualization using jquery. Recently tried setting up a JSON builder and using the jquery.post method to get the data from the server. Eureka! Or so I thought. The intensity map I draw has three tabs and while the data does return fine via the JSON and the map draws fine, the tabs don't work at all. When I select them, the map stays on the first data series.
I tried setting up a "select" event handler and using getSelection()/ setSelection() to force an update to the chart, but no go. Any help would be greatly appreciated. I have posted in the code below. Thanks. Mark. ----------------------------------------------------------------------------------------------------------------------------------------- <html xmlns="http://www.w3.org/1999/xhtml"; > <head> <title>Usage Statistics JSON Map</title> <link rel="stylesheet" href="/css/jquery/ui/smoothness/ ui.theme.css" type="text/css" media="all" /> <script type='text/javascript' src='http://www.google.com/ jsapi'></ script> <script src="/js/jquery-1.3.2.js" type="text/javascript"></script> <script src="/js/jquery.ui.all.1.7.2.min.js" type="text/ javascript"></script> <script type="text/javascript"> $.chart = null; $.chartdata = null; google.load('visualization', '1', {packages:['intensitymap']}); google.setOnLoadCallback(drawMapChart); function LoadMapData(){ $.chartdata = new google.visualization.DataTable(); $.chartdata.addColumn('string', '', 'Country'); $.chartdata.addColumn('number', 'Hits', 'a'); $.chartdata.addColumn('number', 'Users', 'b'); $.chartdata.addColumn('number', 'Orgs', 'c'); var StartDate = "1/1/2009"; var EndDate = "11/1/2009"; var OrgType = "1"; var OrgID = "*"; $.post("/getJSONData.aspx?builder=GetMapData", {StartDate:StartDate, EndDate:EndDate, OrgType:OrgType, OrgID:OrgID}, function(data){ $.chartdata.addRows(data.length); for(i=0;i<data.length;i++){ $.chartdata.setValue(i, 0, data[i].StateCode); $.chartdata.setValue(i, 1, data[i].TotalEvents); $.chartdata.setValue(i, 2, data[i].UserIDs); $.chartdata.setValue(i, 3, data[i].OrgIDs); } google.visualization.events.addListener($.chart, 'ready', readyHandler); $.chart.draw($.chartdata, {region: 'usa', width: 440, colors: ['dodgerblue', 'firebrick', 'orange']}); google.visualization.events.addListener($.chart, 'select', selectHandler);; } ,"json"); } function drawMapChart() { $.chart = new google.visualization.IntensityMap (document.getElementById('chart_div')); LoadMapData(); } function selectHandler(e) { alert('select event'); } </script> </head> <body> <div style="float:left"><div id="chart_div" style='float:left; width: 440px; height: 263px; vertical-align:middle'> </div></div> </body> </html>
