Centered Bars On A Google Chart Barchart?

Is there a way to use the Google Chart Javascript API to center bars on a bar chart similar to this - Google Chart Example? I would like to emulate a funnel graph wih Google Charts

Solution 1:

Yes that's possible. Basically what they're doing in this example is creating a basic bar chart (http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html). To get this 'funnel' effect, they create a stacked chart (in javascript see the isStacked property). The first element they color white and the next element in this example is orange.

You can see this for yourself by changing the color property: chco=ffffff,FF9900 to for instance chco=aaaaaa,FF9900.

http://chart.apis.google.com/chart?cht=bhs&chco=aaaaaa,FF9900&chxt=x,x,y&chxl=1:|Percentage%20converting|2:|Step%206|Step%205|Step%204|Step%203|Step%202|Step%201&chxp=1,50|3,50&chd=t:0,12.5,28,29,35.5,48.5|100,75,44,42,29,3&chbh=a&chs=800x230&chm=N**%,000000,1,-1,11,,c&chds=0,100

Then you'll see that it's a basic stacked chart, and not really a new kind of graph.

The following code shows how to do this:

    function drawVisualization() {
  // Create and populate the data table.vardata = new google.visualization.DataTable();
  var raw_data = [['Invisible', 10, 20, 30, 40],
                  ['Visible', 80, 60, 40, 20]];

  var years = ["Step1", "Step2", "Step3", "Step4"];

  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,
            colors: ['ffffff','aaaaaa'], 
            vAxis: {title: "Year"},
            hAxis: {title: "Cups", gridlineColor : 'ffffff'}, isStacked: true}
      );
}

​