Using Google's Visualization API and Closure to generate a BarChart.

Question

I have a web page that uses Google's Visualization API to generate a timeline but now that I'm trying to add some jQuery stuff to it, things are falling over. So, I'm trying to do it with Closure. However I can't seem to find any examples of how to use the Visualization API under Closure. Does anyone know where I can find any examples?

What I've got now is based on (read copied wholesale) the Google Annotated Timeline Example with a little modification to load the data via AJAX as JSON. Right now the AJAX quiery is to a hard coded URL and I'm trying to make it construct the URL from a form.

---

I've found how to do time lines:

goog.require('gviz.AnnotatedTimeLine');
goog.require('gviz.DataTable');
goog.require('gviz.DataView');

//...

var dataTable = new gviz.DataTable(json_string, 0.6);
var ChartDiv = document.getElementById(chart_id);
chart = new gviz.AnnotatedTimeLine(ChartDiv);
chart.draw(dataTable, {'displayAnnotations': true});

Unfortunately, I have yet to find how to make a Bar/Column Chart (asking for 'gviz.BarChart' results in compile time errors).

---

What ended up working:

In the HTML:

<script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt; 
<script type="text/javascript" src="My.js"></script> 
<script type="text/javascript">
  google.load("visualization", "1", {packages:["columnchart"]})
  var ChartGen = function(x) {
    return new google.visualization.ColumnChart(x);
  }
  drawBar(ChartGen);
</script>

In the JS:

function drawBar(Lambda) {
  dataTable = new gviz.DataTable(json_string, 0.6);
  var ChartDiv = document.getElementById('chart');
  chart = Lambda(ChartDiv);
  chart.draw(dataTable, {});
}

Answer 1

Go to the Google Chart Wizard and click on the chart style that you want.

The next page has a button on the right hand side: "Embed with Visualization API". Clicking this will give you the code you need. If you want to customise the chart, you can do that before clicking this button.