<html> <head> <script type="text/javascript" src=" http://www.google.com/jsapi";></script> <script type="text/javascript"> google.load("visualization", "1", {packages: ["columnChart","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 columnChart 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}); var columnChart = new google.visualization.ColumnChart(document.getElementById('columnChart_span')); columnChart.draw(data2, {width: 400, height: 240}); var columnChart2 = new google.visualization.ColumnChart(document.getElementById('columnChart_span2')); columnChart2.draw(data2, {width: 400, height: 240}); var columnChart3 = new google.visualization.ColumnChart(document.getElementById('columnChart_span3')); columnChart3.draw(data2, {width: 400, height: 240}); google.visualization.events.addListener(scatterChart, 'select', function() { columnChart.setSelection(scatterChart.getSelection()); columnChart2.setSelection(scatterChart.getSelection()); columnChart3.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=" columnChart_span"></span> <span id="columnChart_span2"></span> <span id=" columnChart_span3"></span> <H3>data</H3> <div id='table1_div'></div> <p> <div id='table2_div'></div> </body> </html> On Thu, Jul 8, 2010 at 5:03 AM, Saifo Kasa <[email protected]> wrote:
> Sorry, for the late reply. > Heres the code : > <html> > <head> > <script type="text/javascript" src="http://www.google.com/jsapi > "></script> > <script type="text/javascript"> > google.load("visualization", "1", {packages: > ["columnChart","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 columnChart > 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}); > var columnChart = new google.visualization.ColumnChart > (document.getElementById('columnChart_span')); > columnChart.draw(data2, {width: 400, height: 240}); > > google.visualization.events.addListener(scatterChart, > 'select', function() { > columnChart.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="columnChart_span"></span> > <H3>data</H3> > <div id='table1_div'></div> > <p> > <div id='table2_div'></div> > </body> > </html> > > > NOTE THAT THIS IS NOT MADE BY ME. IVE SEEN IT ON GOOGLE ONE OF THE > THREADS*** > > On Tue, Jul 6, 2010 at 9:12 AM, akshay dange <[email protected]> wrote: > >> Hi TiKay, >> Can you please post the sample code for the same. It will be very helpful >> since i am looking for similar stuff. >> >> >> On Mon, Jul 5, 2010 at 11:35 PM, TiKaY <[email protected]> wrote: >> >>> Hi, I have succeeded to link 2 charts (scatter and column) together. >>> By linking I mean "event handling" (when I click a point on the >>> scatter chart, it shows its description and the description on the >>> connected column chart). However is it possible to link the scatter >>> chart with 2-3 or more column charts? >>> >>> -- >>> 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]<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]<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.
