All geek questions in one place

Skeleton + visualization google api

I am trying to integrate google visualization diagram into my backbone.js application. I currently have google.load (render) and setOnLoadCallback (drawVisualization) calls in the render function of the ChartView class. The google visualization libraries seem to load correctly, however the callback is never executed.

Below is an example that shows the problem, if someone can help, I would 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>
+6
source share
4 answers

Well, write it down for posterity before another month passes. You can set the callback as arg for the google.load call itself rather than using the google.setOnLoadCallback method. I also had to tweak the code to get the first child jquery object, and it works great.

 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); } });
+12
source

If you use require.js for dependency management, I find that using a single call to load specific modules works fine.

  define( [ 'backbone' , 'socialPages/data/statCollection' , 'date' , 'https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart","table"]}]}' ], function( Backbone , StatsCollection ) { return Backbone.View.extend({ initialize: function() { _.bindAll( this , '_chartDataChanged' , '_drawChart' , '_fetchStats' , '_generateFields' , '_generateRows' , '_generateStatsTotals' , '_lineChartOptions' , '_onItemSelected' , '_padWithZeroValues' , '_setChartDimensions' , 'clean' , 'render' ); this._firstRender = true; this._sampleRate = 'month'; this.statsCollection = new StatsCollection(); this.dimensions = this._setChartDimensions(); this.statsCollection.bind( 'all' , this._chartDataChanged ); this._fetchStats(); if( window.google ) { google.setOnLoadCallback( this._drawChart ); } }
+3
source

You can use https://github.com/kontera-technologies/Backbone.GoogleChart

 chart = new Backbone.GoogleChart({ chartType: 'ColumnChart', dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'], [700, 300, 400, 500, 600, 800]], options: {'title': 'Countries'}, }); $("body").append(chart.render().el)
+2
source

I am currently using backbone.js with GoogleCharts. Instead of loading Google visualizations into your View () rendering method, you can load backbone.js in your script beyond your backlinks.

 <script> google.load('visualization', '1', {packages:'linechart'}); ChartView = Backbone.View.extend({ render:function () { this.drawVisualization(); return this; }, drawVisualization:function () { .... chart.draw(data, null, null); } </script>

This may result in another error. I noticed that calling “chart.draw” from rendering (at this point the “el” view is still not part of the DOM, causes Google Charts to throw an error “Your browser does not support charts”.

I would call the drawVisualization function after you are sure that the View 'el' has been inserted into the DOM for an example. on an event in a view (or its model). Say:

 <script> google.load('visualization', '1', {packages:'linechart'}); ChartView = Backbone.View.extend({ events:{ this.model.on('change',this.drawVisualization, this); }, render:function () { this.drawVisualization(); return this; }, drawVisualization:function () { .... chart.draw(data, null, null); } </script>

Hope this helps.

0
source

Source: https://habr.com/ru/post/917494/

More articles:


All Articles