Thanks for your help, very useful. However is it possible to do the same thing with "onmouseover" but not on the "letters events". On the points that do not have any events. For instance, in your previous code, we had to click on the "letters events" to see the linking with the column chart. In other words, my question is if its possible to use "onmouseover event" on the simple dots.
Thanks again, On Jul 4, 9:59 am, ChartMan <[email protected]> wrote: > Here is some working code you can play with: > > <html> > <head> > <script type="text/javascript" src="http://www.google.com/jsapi";></script > > <script type="text/javascript"> > google.load("visualization", "1", {packages: ["annotatedtimeline", > "columnchart"]}); > google.setOnLoadCallback(drawChart); > function drawChart() { > // data for annotated time line > var data = new google.visualization.DataTable(); > data.addColumn('date', 'Date'); > data.addColumn('number', 'Sold Pencils'); > data.addColumn('string', 'title1'); > data.addColumn('string', 'text1'); > data.addColumn('number', 'Sold Pens'); > data.addColumn('string', 'title2'); > data.addColumn('string', 'text2'); > data.addRows(6); > data.setValue(0, 0, new Date(2008, 1 ,1)); > data.setValue(0, 1, 30000); > data.setValue(0, 4, 40645); > data.setValue(1, 0, new Date(2008, 1 ,2)); > data.setValue(1, 1, 14045); > data.setValue(1, 4, 20374); > data.setValue(2, 0, new Date(2008, 1 ,3)); > data.setValue(2, 1, 55022); > data.setValue(2, 4, 50766); > data.setValue(3, 0, new Date(2008, 1 ,4)); > data.setValue(3, 1, 75284); > data.setValue(3, 4, 14334); > data.setValue(3, 5, 'Out of Stock'); > data.setValue(3, 6, 'Ran out of stock on pens at 4pm'); > data.setValue(4, 0, new Date(2008, 1 ,5)); > data.setValue(4, 1, 41476); > data.setValue(4, 2, 'Bought Pens'); > data.setValue(4, 3, 'Bought 200k pens'); > data.setValue(4, 4, 66467); > data.setValue(5, 0, new Date(2008, 1 ,6)); > data.setValue(5, 1, 33322); > data.setValue(5, 4, 39463); > // data for column chart > var data2 = new google.visualization.DataTable(); > data2.addColumn('string', 'Year'); > data2.addColumn('number', 'Indice'); > > data2.addRows(6); > 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); > data2.setValue(4,0,"2010-06-18");data2.setValue(4,1,-5.3); > data2.setValue(5,0,"2010-06-18");data2.setValue(5,1,-5.3); > > var annotatedtimeline = new google.visualization.AnnotatedTimeLine( > document.getElementById('annotatedtimeline_span')); > annotatedtimeline.draw(data, {width: 400, height: 240, > displayAnnotations: true}); > > var columnChart = new google.visualization.ColumnChart(document. > getElementById('columnchart_span')); > columnChart.draw(data2, {width: 400, height: 240}); > google.visualization.events.addListener(annotatedtimeline,'select', > function() { > var selection = annotatedtimeline.getSelection()[0]; > selection['column'] = 1; > columnChart.setSelection([selection]); > }); > } > > </script> > </head> > <body> > <div id="annotatedtimeline_span" style="height:300px;width:400px"></div> > <div id="columnchart_span" style="height:300px;width:400px"></div> > <H3>data</H3> > <div id='chart_div' style="height:300px;width:400px"></div> > </body> > </html> > > > > On Sat, Jul 3, 2010 at 7:47 AM, Saifo Kasa <[email protected]> wrote: > > 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]><google-visualization- > > api%[email protected] <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]<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.
