Using google charts with Backbone and require.js

Question

I would like to use Google charts (for some charts) with my backbone project. I am using require.js and now I have question how to load Google API using require.js.

Here is the official Google site that gives basic instructions how to use it

Reading upon this subject, I have found many references to a require.js plugin that was found in here

That is Mr. Miller Medeiros :) I have problem with using this script:

This is what I have done.

1. I downloaded async script from Mr. Miller GIT rep, and placed it in my project

2. In my main.js I have included it as follows:

   baseURL: '.',
   paths: {
       underscore  : 'lib/underscore',
       backbone    : 'lib/backbone',
       async       : 'lib/async',
       babysitter  : 'lib/backbone.babysitter',
       wreqr       : 'lib/backbone.wreqr',
       marionette  : 'lib/backbone.marionette',
       handlebars  : 'lib/handlebars',
       jquery      : 'lib/jquery', 
   },
   

3. Now my question is how do I use it? All of my js files have the following structure:

   define([
   'marionette',
   //more defines...    
   
   ], function(
     Marionette
   //more calls here
   ) {
   

4. How do I make Google code available to my application? I just need to use it on one or two places and that's it :)

Thanks

Answer 1

As far I can see from the author examples, the usage seems to be:

require([
    'async!http://maps.google.com/maps/api/js?sensor=false'
], function()
{
    //Google maps is available and all components are ready to use.
    var map = new google.maps.Map( 
    ...

so in your case could be something like this

require([
    'async!https://www.google.com/jsapi'
], function()
{
    google.load('visualization', '1.0', {'packages':['corechart']});
    ... 

or as defined also here

require(['goog!visualization,1,packages:[corechart,geochart]', 'goog!search,1'], function()
{
    // visualization + corechart + geochart + search are loaded
    // code copied from google charts docs:
    // http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html
    var data = new google.visualization.DataTable();

You need to load goog.js from repo (requirejs-plugins/src), put it in your lib folder and define it in your paths as:

paths : {
    //alias to plugins
    async : 'lib/async',
    goog : ' lib/goog',

Answer 2

Assuming the library is already AMD compatible, you can use it by simply pointing to it (path and all) right in your define() call:

define([
 'marionette',
 'path/to/google/charts'
], function(Marionette, GoogleCharts) {
  // Stuff
});

Now, if its not AMD compatible, you'll need to use a shim.