title: backbone view + google visualisation api
body: <p>I'm trying to integrate a google visualisation chart into my backbone.js app. Currently I have both the google.load(visualization) and setOnLoadCallback(drawVisualization) calls in the render function of a ChartView class. The google visualisation libraries seem to be loading correctly, however the callback is never executed.</p>
  
  <p>Below is a example that shows the problem, if someone could assist I'd be very grateful!</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;App&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="content"&gt;&lt;/div&gt;
  
  &lt;script src="lib/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="lib/underscore.js"&gt;&lt;/script&gt;
  &lt;script src="lib/backbone.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
      ChartView = Backbone.View.extend({
  
          render:function () {
              $(this.el).html('&lt;p&gt;gviz line chart:&lt;/p&gt;' +
                      '&lt;div id="gviz" style="width:600px; height:300px;"&gt;&lt;/div&gt;');
              google.load('visualization', '1', {packages:'linechart'});
              google.setOnLoadCallback(this.drawVisualization);
              return this;
          },
  
          //This never gets called
          drawVisualization:function () {
              console.log("In draw visualization");
              var data = this.createDataTable('date');
              var chart = new google.visualization.LineChart(this.$('#gviz'));
              chart.draw(data, null, null);
          },
  
          createDataTable:function (dateType) {
              console.log("Creating datatable");
              var data = new google.visualization.DataTable();
              data.addColumn(dateType, 'Date');
              data.addColumn('number', 'Column A');
              data.addColumn('number', 'Column B');
              data.addRows(4);
              data.setCell(0, 0, new Date("2009/07/01"));
              data.setCell(0, 1, 1);
              data.setCell(0, 2, 7);
              data.setCell(1, 0, new Date("2009/07/08"));
              data.setCell(1, 1, 2);
              data.setCell(1, 2, 4);
              console.log("Created datatable " + data.toJSON());
              return data;
          }
  
      });
  
      var AppRouter = Backbone.Router.extend({
          routes:{
              "":"chart"
          },
          chart:function () {
              console.log("Showing chart");
              $("#content").append(new ChartView().render().el);
  
          }
      });
  
      router = new AppRouter();
      Backbone.history.start();
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>