Thanks :) And you're welcome - V.
On Tue, Mar 3, 2009 at 8:30 PM, TomP <[email protected]> wrote: > > Works like a champ! > You rock VizBoy! > Thanks... > TomP > > On Mar 3, 11:49 am, VizBoy <[email protected]> wrote: > > Hi, > > > > Your problem is that the LineChart and table supports different kinds of > > selection. > > > > The table supports multiple selection, but only of rows (not of single > > cells). > > The LineChart supports single selection, but of cells, not of full rows. > > > > The way to change your code so it would work is this. > > Instead of chart.setSelection(tomtable.getSelection()) use: > > chart.setSelection([{row: tomtable.getSelection()[0].row, column: 1}]); > > > > And instead of tomtable.setSelection(chart.getSelection()) use: > > tomtable.setSelection([{row: chart.getSelection()[0].row}]); > > > > Let me know if this works for you. > > > > - VizBoy. > > > > > > > > On Tue, Mar 3, 2009 at 6:12 PM, TomP <[email protected]> wrote: > > > > > <!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>Google Visualization API Sample </title> > > > <script type="text/javascript" src="http://www.google.com/jsapi";></ > > > script> > > > <script type="text/javascript"> > > > google.load('visualization', '1', {packages: ['linechart, > > > table']}); > > > //google.setOnLoadCallback(drawVisualization); > > > function drawVisualization() { > > > // Create and populate the data table. > > > > > var data = new google.visualization.DataTable(); > > > data.addColumn('string', 'Date'); > > > data.addColumn('number', 'LevelRecorded'); > > > data.addRows(7); > > > > > data.setValue(0, 0, '1/1/2006'); > > > data.setValue(0, 1, > > > -10.5); > > > data.setValue(1, 0, '2/1/2006'); > > > data.setValue(1, 1, -10.16); > > > data.setValue(2, 0, '3/1/2006'); > > > data.setValue(2, 1, -11.1); > > > data.setValue(3, 0, '4/1/2006'); > > > data.setValue(3, 1, -10.83); > > > data.setValue(4, 0, '5/1/2006'); > > > data.setValue(4, 1, -10.94); > > > data.setValue(5, 0, '6/1/2006'); > > > data.setValue(5, 1, -10.73); > > > data.setValue(6, 0, '7/1/2006'); > > > data.setValue(6, 1, -10.32); > > > > > // Create and draw the visualization. > > > var chart = new google.visualization.LineChart > > > (document.getElementById('chart_div')); > > > chart.draw(data, {width: 950, height: 400, min: 0, smoothLine: > > > false, axisColor: 'red', lineSize: 2, backgroundColor: '#FFFBE8', > > > legend: "none", titleColor: 'maroon', title: "Montgomery County Pa > > > \nGroundwater Well GWW-001", titleX:"Date of Reading", titleY: "Depth > > > Below Land Surface Water Level in Feet"}); > > > > > // Create and populate the data table. > > > var data1 = new google.visualization.DataTable(); > > > data1.addColumn('string', 'Date'); > > > data1.addColumn('number', 'LevelRecorded'); > > > data1.addRows(7); > > > > > data1.setCell(0, 0, '1/1/2006'); > > > data1.setCell(0, 1, -10.5); > > > data1.setCell(1, 0, '2/1/2006'); > > > data1.setCell(1, 1, -10.16); > > > data1.setCell(2, 0, '3/1/2006'); > > > data1.setCell(2, 1, -11.1); > > > data1.setCell(3, 0, '4/1/2006'); > > > data1.setCell(3, 1, -10.83); > > > data1.setCell(4, 0, '5/1/2006'); > > > data1.setCell(4, 1, -10.94); > > > data1.setCell(5, 0, '6/1/2006'); > > > data1.setCell(5, 1, -10.73); > > > data1.setCell(6, 0, '7/1/2006'); > > > data1.setCell(6, 1, -10.32); > > > > > // Create and draw the table visualization. > > > var formatter = new google.visualization.TableArrowFormat(); > > > formatter.format(data1, 1); // Apply formatter to second > > > column > > > > > var tomtable = new google.visualization.Table > > > (document.getElementById('table_div')); > > > tomtable.draw(data1, {showRowNumber: true, page:'disable', base: > > > 0}); > > > > > // Set a 'select' event listener for the table. > > > // When the table is selected, > > > // we set the selection on the line graph. > > > google.visualization.events.addListener(tomtable, 'select', > > > function() { > > > chart.setSelection(tomtable.getSelection()); > > > }); > > > > > // Set a 'select' event listener for the graph. > > > // When the graph is selected, > > > // we set the selection on the table. > > > google.visualization.events.addListener(chart, 'select', > > > function() { > > > tomtable.setSelection(chart.getSelection()); > > > }); > > > > > } > > > > > google.setOnLoadCallback(drawVisualization); > > > </script> > > > > > </head> > > > <body style="font-family: Arial;border: 0 none;"> > > > <div id="chart_div"></div> > > > <br> > > > <div id="table_div"></div> > > > <br><font size=2 face=verdana color= #CCCCCC>produced by Google > > > Visualization API</font> > > > </body> > > > </html> > > > > > On Mar 3, 10:16 am, VizBoy <[email protected]> wrote: > > > > Could you post some pure-javascript code, without the vbscript there > so > > > we > > > > can help you debug it? > > > > > > - VizBoy. > > > > > > On Tue, Mar 3, 2009 at 3:27 PM, TomP <[email protected]> wrote: > > > > > > > I have a line chart and a table visualization with 'select event > > > > > listeners' so if you click on a row in the table the point on the > line > > > > > chart will be highlighted and a 'select event listener' on the line > > > > > chart if you click on a point on the graph the row in the table > will > > > > > be highlighted.. Nothing happens when I click on the either the > point > > > > > or row.. here is the code.. > > > > > appreciate any help.. > > > > > TomP > > > > > > > <!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>Google Visualization API Sample </title> > > > > > <script type="text/javascript" src="http://www.google.com/jsapi > "></ > > > > > script> > > > > > <script type="text/javascript"> > > > > > google.load('visualization', '1', {packages: ['linechart, > > > > > table']}); > > > > > //google.setOnLoadCallback(drawVisualization); > > > > > function drawVisualization() { > > > > > // Create and populate the data table. > > > > > > > var data = new google.visualization.DataTable(); > > > > > data.addColumn('string', 'Date'); > > > > > data.addColumn('number', 'LevelRecorded'); > > > > > data.addRows(40); > > > > > <% > > > > > dim y, x, z, ds0, ds1 > > > > > z=0 > > > > > y=39 > > > > > x=0 > > > > > ds0=0 > > > > > ds1=0 > > > > > Do until y = -1 > > > > > %> > > > > > data.setValue(<%=ds0%>, <%=ds1%>, '<%=MyArray(x,z) > > > > > %>'); //date > > > > > data.setValue(<%=ds0%>, <%=ds1+1%>, <%=MyArray(x+1,z) > > > > > %>); //levelrecorded > > > > > > > <% > > > > > x=0 > > > > > z=z+1 > > > > > ds0= ds0+1 > > > > > ds1= 0 > > > > > y = y - 1 > > > > > loop > > > > > %> > > > > > > > // Create and draw the visualization. > > > > > var chart = new google.visualization.LineChart > > > > > (document.getElementById('chart_div')); > > > > > chart.draw(data, {width: 950, height: 400, min: 0, smoothLine: > > > > > false, axisColor: 'red', lineSize: 2, backgroundColor: '#FFFBE8', > > > > > legend: "none", titleColor: 'maroon', title: "Montgomery County Pa > > > > > \nGroundwater Well <%=strStationID%>", titleX:"Date of Reading", > > > > > titleY: "Depth Below Land Surface Water Level in Feet"}); > > > > > > > // Create and populate the data table. > > > > > var data1 = new google.visualization.DataTable(); > > > > > data1.addColumn('string', 'Date'); > > > > > data1.addColumn('number', 'LevelRecorded'); > > > > > data1.addRows(40); > > > > > <% > > > > > //dim y, x, z, ds0, ds1 > > > > > z=0 > > > > > y=39 > > > > > x=0 > > > > > ds0=0 > > > > > ds1=0 > > > > > Do until y = -1 > > > > > %> > > > > > data1.setCell(<%=ds0%>, <%=ds1%>, '<%=MyArray(x,z) > > > > > %>'); //date > > > > > data1.setCell(<%=ds0%>, <%=ds1+1%>, <%=MyArray(x+1,z) > > > > > %>); //levelrecorded > > > > > > > <% > > > > > x=0 > > > > > z=z+1 > > > > > ds0= ds0+1 > > > > > ds1= 0 > > > > > y = y - 1 > > > > > loop > > > > > %> > > > > > > > // Create and draw the table visualization. > > > > > var formatter = new google.visualization.TableArrowFormat(); > > > > > formatter.format(data1, 1); // Apply formatter to second > > > > > column > > > > > > > var tomtable = new google.visualization.Table > > > > > (document.getElementById('table_div')); > > > > > tomtable.draw(data1, {showRowNumber: true, page:'disable', > base: > > > > > 0}); > > > > > > > // Set a 'select' event listener for the table. > > > > > // When the table is selected, > > > > > // we set the selection on the line graph. > > > > > google.visualization.events.addListener(tomtable, 'select', > > > > > function() { > > > > > chart.setSelection(tomtable.getSelection()); > > > > > }); > > > > > > > // Set a 'select' event listener for the graph. > > > > > // When the graph is selected, > > > > > // we set the selection on the table. > > > > > google.visualization.events.addListener(chart, 'select', > > > > > function() { > > > > > tomtable.setSelection(chart.getSelection()); > > > > > }); > > > > > > > } > > > > > > > google.setOnLoadCallback(drawVisualization); > > > > > </script> > > > > > > > </head> > > > > > <body style="font-family: Arial;border: 0 none;"> > > > > > <div id="chart_div"></div> > > > > > <br> > > > > > <div id="table_div"></div> > > > > > <br><font size=2 face=verdana color= #CCCCCC>produced by > Google > > > > > Visualization API</font> > > > > > </body> > > > > > </html>- Hide quoted text > > > > ... > > > > read more ยป- Hide quoted text - > > > > - Show quoted text - > > > --~--~---------~--~----~------------~-------~--~----~ 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=en -~----------~----~----~----~------~----~------~--~---
