Hello,
I would like to make an interaction of scatterchart and linechart.
data1 and data2 are related by Sample ('A','B','C','D').
When I click a point of the scatterchart, I want to make highlight the
line of corresponding sample in linechart.
Is it possible?
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi";></
script>
<script type="text/javascript">
google.load("visualization", "1", {packages:
["linechart","scatterchart","Table"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// data for scatterchart
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'Year');
data1.addColumn('number', 'Coefficient');
data1.addColumn('string', 'Sample');
data1.addRows(4);
data1.setValue(0, 0, 2004);
data1.setValue(0, 1, 12);
data1.setValue(0, 2, 'A');
data1.setValue(1, 0, 2004);
data1.setValue(1, 1, 5.5);
data1.setValue(1, 2, 'B');
data1.setValue(2, 0, 2005);
data1.setValue(2, 1, 14);
data1.setValue(2, 2, 'C');
data1.setValue(3, 0, 2005);
data1.setValue(3, 1, 5);
data1.setValue(3, 2, 'D');
// data for linechart
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'Quarter');
data2.addColumn('number', 'A');
data2.addColumn('number', 'B');
data2.addColumn('number', 'C');
data2.addColumn('number', 'D');
data2.addRows(4);
data2.setValue(0, 0, '1Q');
data2.setValue(0, 1, 1000);
data2.setValue(0, 2, 400);
data2.setValue(0, 3, 200);
data2.setValue(0, 4, 300);
data2.setValue(1, 0, '2Q');
data2.setValue(1, 1, 1170);
data2.setValue(1, 2, 460);
data2.setValue(1, 3, 600);
data2.setValue(1, 4, 300);
data2.setValue(2, 0, '3Q');
data2.setValue(2, 1, 860);
data2.setValue(2, 2, 580);
data2.setValue(2, 3, 250);
data2.setValue(2, 4, 400);
data2.setValue(3, 0, '4Q');
data2.setValue(3, 1, 1030);
data2.setValue(3, 2, 540);
data2.setValue(3, 3, 120);
data2.setValue(3, 4, 350);
var scatterChart = new google.visualization.ScatterChart
(document.getElementById('scatterchart_span'));
scatterChart.draw(data1, {width: 400, height: 240, titleX:
'Year', titleY: 'Coefficient', legend: 'none', pointSize: 5});
var lineChart = new google.visualization.LineChart
(document.getElementById('linechart_span'));
lineChart.draw(data2, {width: 400, height: 240, legend:
'bottom', titleX: 'Quarter', titleY: 'Sales'});
/*
??? How to relate scatterchart to linechart ???
google.visualization.events.addListener(scatterChart,
'select', function() {
lineChart.setSelection(scatterChart.getSelection());
});
*/
//For easy to see data
var table1 = new google.visualization.Table
(document.getElementById('table1_div'));
table1.draw(data1, {showRowNumber: true});
var table2 = new google.visualization.Table
(document.getElementById('table2_div'));
table2.draw(data2, {showRowNumber: true});
}
</script>
</head>
<body>
<span id="scatterchart_span"></span>
<span id="linechart_span"></span>
<H3>data</H3>
<div id='table1_div'></div>
<p>
<div id='table2_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].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
