I'll have a look at this, though I'm not a jquery ninja. meanwhile, though, have you tried mocking out the server and hard-coding the json in the javascript? I mean, just to see if that reproduces the problem.
On Sat, Nov 14, 2009 at 12:03 AM, Mark in A2 <[email protected]> wrote: > 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> > > -- > > You received this message because you are subscribed to the Google Groups > "Google Visualization API" group. > To post to this group, send email to > [email protected]. > To unsubscribe from this group, send email to > [email protected]<google-visualization-api%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/google-visualization-api?hl=. > > > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=.
