This is my code
<!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', 'COST AVOIDANCE', { role: 'style' }, { role: 'annotation' }], ['BUDGET&15 (FULL YEAR) (D)', 10446, 'color: #CEB7B7', 10446 ], ['REVIEWED 2015 TARGET', 11121, 'color: #E5DE20', 11121], ['DIRECT SAVINGS (YTD) (B)', 6091, 'color: #99ED55', 6091] ] ); new google.visualization.ColumnChart(document.getElementById( 'Chart_Div_1')). draw(data,{ legend: 'none', width:600, height:600, vAxis: { minValue: -1000, maxValue: 1500,textColor: 'transparent',baselineColor: 'transparent'}, hAxis : {baselineColor: 'transparent'}, backgroundColor: { fill:'none' }, bar: {groupWidth: 60 }, tooltip: { trigger: 'none' } } ); } google.setOnLoadCallback(drawChart2); function drawChart2() { // Create and populate the data table. var data = google.visualization.arrayToDataTable([ ['X', 'COST AVOIDANCE', { role: 'style' }, { role: 'annotation' }], [{v:0, f:'BUDGET&15 (FULL YEAR) (D)'}, 10446, 'color: transparent', 10446], [{v:1, f:'REVIEWED 2015 TARGET'}, 11121, 'color: transparent', 11121], [{v:2, f:'DIRECT SAVINGS (YTD) (B'}, 6091, 'color: transparent', 6091] ] ); // Create and draw the visualization. new google.visualization.ColumnChart(document.getElementById( 'Chart_Div_2')). draw(data,{ legend: 'none', width:600, height:600, vAxis: { minValue: -1000, maxValue: 1500, gridlineColor: 'transparent', baselineColor: 'transparent'}, hAxis : {textColor: 'transparent', gridlineColor: 'transparent' }, backgroundColor: { fill:'none' }, bar: {groupWidth: 60 }, chartArea:{left:53}, tooltip: { trigger: 'none' } } ); } </script> </head> <body> <div id="Chart_Div_1" style="width: 600px; height: 600px;"> </div> <div id="Chart_Div_2" style="width: 600px; height: 600px; position:relative; top: -600px"> </div> </body> </html> I have three problems 1) There is a gap in the vertical axes around 10,000 for some reason and I can't see why 2) I want the minimum to be -1000 but it it -5000 even thought I have put -1000 3) Can the gap between the horizontal lines be every 2,000 or am I stuck with every 5,000 4) Am I right in thinking that the annotation has to be at the top of the bar? I would like it half way down if possible. 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. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/3d8a05c7-bc55-4bd6-9c0d-926389d468f5%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
