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 -
> >
> > - 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
-~----------~----~----~----~------~----~------~--~---
