Click events for Linechart
90 views
Skip to first unread message
TomP
Mar 3, 2009, 8:27:37 AM3/3/09
to Google Visualization API
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>
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>
VizBoy
Mar 3, 2009, 10:16:01 AM3/3/09
to google-visua...@googlegroups.com
Could you post some pure-javascript code, without the vbscript there so we can help you debug it?
- VizBoy.
- VizBoy.
TomP
Mar 3, 2009, 11:12:26 AM3/3/09
to Google Visualization API
<!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);
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.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
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);
// Create and populate the data table.
var data1 = new google.visualization.DataTable();
data1.addColumn('string', 'Date');
data1.addColumn('number', 'LevelRecorded');
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);
>
> - Show quoted text -
VizBoy
Mar 3, 2009, 11:49:54 AM3/3/09
to google-visua...@googlegroups.com
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.
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.
TomP
Mar 3, 2009, 1:30:12 PM3/3/09
to Google Visualization API
Works like a champ!
You rock VizBoy!
Thanks...
TomP
> ...
>
> read more »- Hide quoted text -
You rock VizBoy!
Thanks...
TomP
>
> read more »- Hide quoted text -
VizBoy
Mar 3, 2009, 1:34:32 PM3/3/09
to google-visua...@googlegroups.com
Thanks :)
And you're welcome
- V.
And you're welcome
- V.
Reply all
Reply to author
Forward
0 new messages