Coordinating multiple charts so they overlap as you want can be very challenging, and fragile. I think it might be easier if you could combine your data into one table, and draw it all in one chart. We have a combo chart for that purpose. See https://developers.google.com/chart/interactive/docs/gallery/combochart The key is to use the series option to specify how to draw each series. See if it might work for your case.
On Fri, Jul 24, 2015 at 9:17 AM, Pamela Whittaker < [email protected]> wrote: > Brilliant thanks I am nearly there now > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " > http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > <title>Untitled Document</title> > <script type="text/javascript" src="https://www.google.com/jsapi > "></script> > <script type="text/javascript"> > google.load("visualization", "1.1", {packages:["corechart"]}); > google.setOnLoadCallback(drawChart1); > function drawChart1() { > > // Create and populate the data table. > var data = google.visualization.arrayToDataTable([ > ['X', 'BUDGET', { role: 'style' }, 'REVISED ESTIMATED > SAVINGS', { role: 'style' }], > ['HO + ISM', 1336060, 'color: #F9D1FF', 400361, 'color: > #F7EC99'], > ['MAXXAM', 1538156, 'color: #F9D1FF', 366849, 'color: > #F7EC99'], > ['CPS', 1576579, 'color: #F9D1FF', 440514, 'color: #F7EC99'], > ['CTD', 1600652, 'color: #F9D1FF', 434552, 'color: #F7EC99'], > ['MARINE & OFFSHORE',1968113, 'color: #F9D1FF', 393032, > 'color: #F7EC99'], > ['GSIT', 1968113, 'color: #F9D1FF', 393032, 'color: #F7EC99'], > ['NORTH ASIA', 1968113, 'color: #F9D1FF', 393032, 'color: > #F7EC99'], > ['MIRA', 1968113, 'color: #F9D1FF', 393032, 'color: #F7EC99'], > ['EUROPE', 1968113, 'color: #F9D1FF', 393032, 'color: > #F7EC99'], > ['NORTH AMERICA', 1968113, 'color: #F9D1FF', 393032, 'color: > #F7EC99'], > ['LATIN AMERICA', 1900000, 'color: #F9D1FF', 517206, 'color: > #F7EC99'] > ] > ); > > // Create and draw the visualization. > new > google.visualization.ColumnChart(document.getElementById('Chart_Div_1')). > draw(data,{ > legend: 'none', > width:1200, height:600, > vAxis: { minValue: 0, maxValue: 1200, gridlineColor: > 'transparent',textColor: 'transparent'}, > hAxis : {textColor: 'transparent'}, > backgroundColor: { fill:'none' }, > bar: {groupWidth: 65 }, > tooltip: { trigger: 'selection' } > } > ); > > } > > google.setOnLoadCallback(drawChart2); > function drawChart2() { > > // Create and populate the data table. > var data = google.visualization.arrayToDataTable([ > ['X', 'COST AVOIDANCE', { role: 'style' }, 'DIRECT SAVINGS', { > role: 'style' }], > ['HO + ISM', 133606, 'color: green', 40036, 'color: #96CAF7'], > ['MAXXAM', 153815, 'color: green', 36684, 'color: #96CAF7'], > ['CPS', 157657, 'color: green', 44051, 'color: #96CAF7'], > ['CTD', 160065, 'color: green', 43455, 'color: #96CAF7'], > ['MARINE & OFFSHORE',196811, 'color: green', 39303, 'color: > #96CAF7'], > ['GSIT', 196811, 'color: green', 39303, 'color: #96CAF7'], > ['NORTH ASIA', 196811, 'color: green', 39303, 'color: > #96CAF7'], > ['MIRA', 196811, 'color: green', 39303, 'color: #96CAF7'], > ['EUROPE', 196811, 'color: green', 39303, 'color: #96CAF7'], > ['NORTH AMERICA', 196811, 'color: green', 39303, 'color: > #96CAF7'], > ['LATIN AMERICA', 190000, 'color: green', 51720, 'color: > #96CAF7'] > ] > ); > > // Create and draw the visualization. > new > google.visualization.ColumnChart(document.getElementById('Chart_Div_2')). > draw(data,{ > legend: 'none', > width:1200, height:600, > vAxis: { minValue: 0, maxValue: 1200, gridlineColor: > 'transparent',textColor: 'transparent'}, > hAxis : {textColor: 'transparent'}, > backgroundColor: { fill:'none' }, > tooltip: { trigger: 'selection' }, > bar: {groupWidth: 20 }, > isStacked: true} > ); > > } > > google.setOnLoadCallback(drawChart_Revenue); > function drawChart_Revenue() { > > var data = google.visualization.arrayToDataTable > ([['X', 'Yearly Revenue',{ role: "annotation" },{ role: > "tooltip" }], > [{v:0, f:'HO + ISM'}, 1, '1', 'Yearly Revenue: 1'], > [{v:1.36, f:'MAXXAM'}, 100, '100', 'Yearly Revenue: > 100'], > [{v:2.27, f:'CPS'}, 200, '200', 'Yearly Revenue: 200'], > [{v:3.18, f:'CTD'}, 300, '300', 'Yearly Revenue: 300'], > [{v:4.09, f:'MARINE & OFFSHORE'}, 400, '400', 'Yearly > Revenue: 400'], > [{v:5, f:'GSIT'}, 500, '500', 'Yearly Revenue: 500'], > [{v:5.9, f:'NORTH ASIA'}, 600.50, '600.50', 'Yearly > Revenue: 600.50'], > [{v:6.82, f:'MIRA'}, 700.55, '700.55', 'Yearly > Revenue: 700.55'], > [{v:7.72, f:'EUROPE'}, 800.65, '800.65', 'Yearly > Revenue: 800.65'], > [{v:8.66, f:'NORTH AMERICA'}, 8999.99, '8,999.99', > 'Yearly Revenue: 8,999.99'], > [{v:10, f:'LATIN AMERICA'}, 111, '111', 'Yearly > Revenue: 111'] > ]); > > var options = { > legend: 'none', > lineWidth: 0, > width:1200, height:600, > vAxis: { minValue: 0, maxValue: 1200, gridlineColor: > 'transparent'}, > > hAxis : {textColor: 'transparent', gridlineColor: > 'transparent'}, > > colors: ['#3366CC'], > pointSize: 20, > backgroundColor: { fill:'none' } > }; > > var chart = new > google.visualization.LineChart(document.getElementById('Chart_Div_Revenue')); > chart.draw(data, options); > } > </script> > </head> > > <body> > <div id="Chart_Div_1" style="width: 900px; height: 600px;"> </div> > <div id="Chart_Div_2" style="width: 900px; height: 600px; > position:relative; top: -600px"> </div> > <div id="Chart_Div_Revenue" style="width: 900px; height: 600px; > position:relative; top: -1200px"> </div> > </body> > </html> > > > I just have two things left that I am stumped with > > 1) How do I get the first and last points in Chart_Div_Revenue to line up > with the green column in Chart_Div_2? > 2) I need a vertical axes for Chart_Div_1 to the left of the one in > Chart_Div_Revenue. How do I get it to the left of the other one? > > > Thanks > > > > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> - 978-394-1058 [email protected] <[email protected]> 5CC, Cambridge MA [email protected] <[email protected]> 9 Juniper Ridge Road, Acton MA -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
