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.

Answer 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=800×230&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.
  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}
      );
}

​