Async load Google Chart Library

Simpler error handling
naoak · Jul 4, 2016 · d94a974 · wesalvaro · Jul 11, 2016 · d94a974
1 parent 38f9eb6
commit d94a974
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/charts-loader.html b/charts-loader.html
diff --git a/google-chart.html b/google-chart.html
@@ -1,7 +1,6 @@
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../iron-ajax/iron-request.html">
 <link rel="import" href="../promise-polyfill/promise-polyfill-lite.html">
-<link rel="import" href="charts-loader.html">
 
 <!--
 `google-chart` encapsulates Google Charts as a web component, allowing you to easily visualize
@@ -132,10 +131,12 @@
   var getChartPackage = function(opt_pkg) {
     var pkg = opt_pkg || DEFACTO_CHART_PACKAGE;
     if (pkgPromises[pkg]) return pkgPromises[pkg];
-    pkgPromises[pkg] = new Promise(function(resolve) {
-      google.charts.load('current', {packages: [pkg]});
-      google.charts.setOnLoadCallback(function() {
-        resolve(google.visualization);
+    pkgPromises[pkg] = libraryPromise.then(function() {
+      return new Promise(function(resolve) {
+        google.charts.load('current', {packages: [pkg]});
+        google.charts.setOnLoadCallback(function() {
+          resolve(google.visualization);
+        });
       });
     });
     return pkgPromises[pkg];
@@ -147,6 +148,15 @@
     return CHART_CONSTRUCTORS[type](chartElement);
   };
 
+  var libraryPromise = new Promise(function(resolve, reject) {
+    var script = document.createElement('script');
+    script.src = 'https://www.gstatic.com/charts/loader.js';
+    script.onload = resolve;
+    script.onerror = reject;
+    var s = document.querySelector('script') || document.body;
+    s.parentNode.insertBefore(script, s);
+  });
+
   // We can go ahead and load the defacto package because we'll need it to do
   // anything (e.g. creating the DataTable to render).
   var vizPkg = getChartPackage();
@@ -389,6 +399,10 @@
       return chart;
     },
 
+    _handleError: function() {
+      this.fire('google-chart-error');
+    },
+
     /**
      * Redraws the chart.
      *
@@ -409,7 +423,8 @@
             chart.draw(data, this.options || {});
             return chart;
           }.bind(this), function(error) {
-            this.$.chartdiv.innerHTML = error;
+            this._handleError(error);
+            this.$.chartdiv.innerHTML = '';
             throw error;
           }.bind(this));
       this._setSelection();