This is currently not possible. We noted this request a feature request. ChartMan
On Thu, Jul 8, 2010 at 5:00 AM, Saifo Kasa <[email protected]> wrote: > 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]> > ><google-visualization- > > > api%[email protected]<api%[email protected]>< > 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]><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.
