Home/ Questions/Q 8212169
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T10:40:14+00:00

I’m trying to integrate a google visualisation chart into my backbone.js app. Currently I

  • 0

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.

Below is a example that shows the problem, if someone could assist I’d be very grateful!

<!doctype html>
<html>
<head>
    <title>App</title>
    <meta charset="utf-8">
</head>
<body>
<div id="content"></div>

<script src="lib/jquery-1.7.2.min.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="http://www.google.com/jsapi"></script>

<script>

    ChartView = Backbone.View.extend({

        render:function () {
            $(this.el).html('<p>gviz line chart:</p>' +
                    '<div id="gviz" style="width:600px; height:300px;"></div>');
            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();

</script>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, to record this for posterity before another month goes by. It’s possible to set the callback as an arg to the google.load call itself, rather than use the google.setOnLoadCallback method. Also had to tweak the code to get the first child of the jquery object and it works fine.

    ChartView = Backbone.View.extend({

    render:function () {
        $(this.el).html('<p>gviz line chart:</p>' +
                '<div id="gviz" style="width:600px; height:300px;"></div>');
        google.load('visualization', '1',  {'callback':this.drawVisualization,
            'packages':['linechart']});
        return this;
    },

    drawVisualization:function () {
        console.log("In draw visualization");
        var data = new google.visualization.DataTable();
        data.addColumn('date', '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);
        var chart = new google.visualization.LineChart(this.$('#gviz').get(0));
        chart.draw(data, null, null);
    }

});
    • 0