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