GH-995 RequireJS + Google Material Charts

src/google/Common.js

@@ -12,6 +12,7 @@
 
         this._tag = "div";
 
+        this._chartLibrary = "visualization";
         this._selection = {};
     }
     Common.prototype = Object.create(HTMLWidget.prototype);
@@ -136,7 +137,7 @@
         if (this._chart) {
             return;
         }
-        this._chart = new google.visualization[this._chartType](domNode);
+        this._chart = new google[this._chartLibrary][this._chartType](domNode);
 
         var context = this;
         google.visualization.events.addListener(this._chart, "select", function () {

src/google/Common2D.js

@@ -1,7 +1,7 @@
 "use strict";
 (function (root, factory) {
     if (typeof define === "function" && define.amd) {
-        define(["d3", "../google/Common", "../api/I2DChart", "goog!visualization,1,packages:[corechart]"], factory);
+        define(["d3", "../google/Common", "../api/I2DChart"], factory);
     } else {
         root.google_Common2D = factory(root.d3, root.google_Common, root.api_I2DChart);
     }

src/google/CommonND.js

@@ -1,7 +1,7 @@
 "use strict";
 (function (root, factory) {
     if (typeof define === "function" && define.amd) {
-        define(["d3", "../google/Common", "../api/INDChart", "goog!visualization,1,packages:[corechart]"], factory);
+        define(["d3", "../google/Common", "../api/INDChart"], factory);
     } else {
         root.google_CommonND = factory(root.d3, root.google_Common, root.api_INDChart);
     }

src/google/MaterialBar.js

@@ -0,0 +1,52 @@
+"use strict";
+(function (root, factory) {
+    if (typeof define === "function" && define.amd) {
+        define(["d3", "require", "./CommonND"], factory);
+    } else {
+        root.google_MaterialBar = factory(root.d3, root.require, root.google_CommonND);
+    }
+}(this, function (d3, require, CommonND) {
+
+    function MaterialBar() {
+        CommonND.call(this);
+
+        this._chartLibrary = "charts";
+        this._chartType = "Bar";
+    }
+    MaterialBar.prototype = Object.create(CommonND.prototype);
+    MaterialBar.prototype.constructor = MaterialBar;
+    MaterialBar.prototype._class += " google_MaterialBar";
+
+    MaterialBar.prototype.getChartOptions = function () {
+        var retVal = CommonND.prototype.getChartOptions.apply(this, arguments);
+        retVal.bars = "horizontal";
+        return retVal;
+    };
+
+    function materialHack(callback, depth) {
+        depth = depth || 0;
+        try {
+            require([(document.location.protocol === "https:" ? "https" : "http") + "://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js", "goog!visualization,1.1,packages:[bar]"], function () {
+                try {
+                    require(["./CommonND"], function () {
+                        callback();
+                    });
+                } catch (e) {
+                    materialHack(callback, depth + 1);
+                }
+            });
+        } catch (e) {
+            materialHack(callback, depth + 1);
+        }
+    }
+
+    MaterialBar.prototype.render = function (callback) {
+        var context = this;
+        var args = arguments;
+        materialHack(function() {
+            CommonND.prototype.render.apply(context, args);
+        });
+    };
+
+    return MaterialBar;
+}));

test/googleFactory.js

@@ -25,6 +25,14 @@
                         .data(DataFactory.ND.subjects.data)
                     );
                 });
+            },
+            material: function (callback) {
+                require(["test/DataFactory", "src/google/MaterialBar"], function (DataFactory, Bar) {
+                    callback(new Bar()
+                        .columns(DataFactory.ND.subjects.columns)
+                        .data(DataFactory.ND.subjects.data)
+                    );
+                });
             }
         },
         Line: {