Google charts- changing orientation of bars in a bar chart

Question

I'm trying to create a bar chart with two series of data. I want one series to be drawn to the right, and one series to be drawn to the left.

If I put negative values in for Austria, then it will draw those values oriented towards the left. Is there any way that I can have the data series for Austria oriented towards the left, and the data series for Bulgaria pointed towards the right, without making values negative?

I was playing with one of the examples from Google's Vizualization API, and here's what I came up with (It's probably easiest to paste the code below into http://code.google.com/apis/ajax/playground/?type=visualization#bar_chart):

     function drawVisualization() {
       // Create and populate the data table.
       var data = new google.visualization.DataTable();
       var raw_data = [['Austria', -1336060, -1538156, -1576579, -1600652, -1968113, 1901067],
                       ['Bulgaria', 400361, 366849, 440514, 434552, 393032, 517206],
                       //['Denmark', 1001582, 1119450, 993360, 1004163, 979198, 916965],
                       //['Greece', 997974, 941795, 930593, 897127, 1080887, 1056036]
                      ];

       var years = [2003, 2004, 2005, 2006, 2007, 2008];

       data.addColumn('string', 'Year');
       for (var i = 0; i  < raw_data.length; ++i) {
         data.addColumn('number', raw_data[i][0]);    
       }

       data.addRows(years.length);

       for (var j = 0; j < years.length; ++j) {    
         data.setValue(j, 0, years[j].toString());    
       }
       for (var i = 0; i  < raw_data.length; ++i) {
         for (var j = 1; j  < raw_data[i].length; ++j) {
            data.setValue(j-1, i+1, raw_data[i][j]);    
         }
       }

       // Create and draw the visualization.
       new google.visualization.BarChart(document.getElementById('visualization')).
            draw(data,
                 {title:"Yearly Coffee Consumption by Country",
                  width:600, height:400,
                  isStacked: 'true',
                  vAxis: {title: "Year"},
                  hAxis: {title: "Cups"}}
            );
      }

Thanks a bunch, let me know if I can clarify anything.

​

Answer 1

Use the series option to define two separate horizontal axes for the chart. Set the direction option on the second horizontal axis to -1 to make the values extend from the right side of the chart.

series:{1:{targetAxisIndex:1}}, hAxes:{1:{direction:-1}}