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 -- 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.
