Hi, I've done a code, similar to some old post, but cannot find a way
to make it work. I tried to connect an Annotated Time Chart line with
a Column Chart. Here's my code :
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi";></
script>
<script type="text/javascript">
google.load("visualization", "1", {packages:
["annotatedtimeline","corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// data for annotated time line
var data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Date');
data1.addColumn('number', 'ABAX Stock');
data1.addColumn('string', 'Blue');
data1.addColumn('string', 'A');
data1.addRows(4);
data1.setValue(0,0,new Date(2009,06,08));data1.setValue(0,1,17.56);
data1.setValue(1,0,new Date(2009,06,09));data1.setValue(1,1,17.53);
data1.setValue(2,0,new Date(2009,06,10));data1.setValue(2,1,17.34);
data1.setValue(3,0,new Date(2009,06,11));data1.setValue(3,1,17.42);
// data for column
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'Year');
data2.addColumn('number', 'Indice');
data2.addRows(4);
data2.setValue(0,0,"2010-06-23");data2.setValue(0,1,-7.6);
data2.setValue(1,0,"2010-06-22");data2.setValue(1,1,-7);
data2.setValue(2,0,"2010-06-21");data2.setValue(2,1,-5.8);
data2.setValue(3,0,"2010-06-18");data2.setValue(3,1,-5.3);
var annotatedtimeline = new
google.visualization.AnnotatedTimeLine
(document.getElementById('annotatedtimeline_span'));
annotatedtimeline.draw(data1, {width: 400, height: 240});
var columnChart = new google.visualization.columnChart
(document.getElementById('columnchart_span'));
columnChart.draw(data2, {width: 400, height: 240});
google.visualization.events.addListener(annotatedtimeline,
'select', function() {
columnChart.setSelection(annotatedtimeline.getSelection());
}); }
</script>
</head>
<body>
<span id="annotatedtimeline_span"></span>
<span id="columnchart_span"></span>
<H3>data</H3>
<div id='chart_div'></div>
</body>
</html>
On Dec 26 2009, 5:05 pm, ChartMan <[email protected]> wrote:
> 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
>
>
>
> On Tue, Dec 22, 2009 at 5:41 PM, LaFouine <[email protected]> wrote:
> > 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
>
> > On 12月22日, 午後10:18, Bug Chart <[email protected]> wrote:
> > > 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.
>
> > --
>
> > 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]<google-visualization-
> > api%[email protected]>
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/google-visualization-api?hl=en.
--
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.
