Centered bars on a Google Chart BarChart?

Question

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. Google Charts does not support a funnel type of graph.

Jos Dirksen Jos Dirksen · Accepted Answer · 2011-07-18T14:40:17

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.

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.
  var data = 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}
      );
}

Centered bars on a Google Chart BarChart?

1 Answers