How to make an interaction of scatterchart and linechart

LaFouine

unread,

Dec 16, 2009, 12:22:09 PM12/16/09

to Google Visualization API

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>

Bug Chart

unread,

Dec 22, 2009, 8:18:44 AM12/22/09

to google-visua...@googlegroups.com

Hi,

so as the code is now (with the commented-out code commented back in),

I see that it's working good, as in when you press the scatter point,

you see the line point selected.

This is the only selection now supported by line chart,

if you want another type of visual selection,

please file a feature request.

HTH

BugChart.

LaFouine

unread,

Dec 22, 2009, 10:41:19 AM12/22/09

to Google Visualization API

Hello ,

You mentioned, "when you press the scatter point, you see the line
point selected".
But this is not what I see.

For example, when I press the (2004, 5.5,B) point in scatter plot, I
want to highlight the red line (B) in line chart.
Regards,

LaFouine

ChartMan

unread,

Dec 26, 2009, 4:05:21 PM12/26/09

to google-visua...@googlegroups.com

Hi

Just looked at your example and it does exactly what you wrote.

The problem may be in how you structured your data.

The scatter chart has one column of values and the line chart has 3 column of values.

Its up to you to map the selection of a value in the scatter chart to a selection in the line chart.

The selection object is of the form

[{'row': 1, 'column': 3}]

HTH

ChartMan

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

Reply all

Reply to author

Forward