Work around issue 200: Android 3.0: dygraph does not show

Android's canvas implementation is buggy. It doesn't support clipping.
For now, I manually detect the Android browser and disable clipping.

diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index b184717..e1c24b9 100644 (file)
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -56,15 +56,19 @@ var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) {
   if (this.dygraph_.isUsingExcanvas_) {
     this._createIEClipArea();
   } else {
-    var ctx = this.dygraph_.canvas_ctx_;
-    ctx.beginPath();
-    ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
-    ctx.clip();
+    // on Android 3 and 4, setting a clipping area on a canvas prevents it from
+    // displaying anything.
+    if (!Dygraph.isAndroid()) {
+      var ctx = this.dygraph_.canvas_ctx_;
+      ctx.beginPath();
+      ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
+      ctx.clip();
 
-    ctx = this.dygraph_.hidden_ctx_;
-    ctx.beginPath();
-    ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
-    ctx.clip();
+      ctx = this.dygraph_.hidden_ctx_;
+      ctx.beginPath();
+      ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
+      ctx.clip();
+    }
   }
 };
 

diff --git a/dygraph-utils.js b/dygraph-utils.js
index 82d9189..104d00f 100644 (file)
--- a/dygraph-utils.js
+++ b/dygraph-utils.js
@@ -618,6 +618,15 @@ Dygraph.createCanvas = function() {
 
 /**
  * @private
+ * Checks whether the user is on an Android browser.
+ * Android does not fully support the <canvas> tag, e.g. w/r/t/ clipping.
+ */
+Dygraph.isAndroid = function() {
+  return /Android/.test(navigator.userAgent);
+};
+
+/**
+ * @private
  * Call a function N times at a given interval, then call a cleanup function
  * once. repeat_fn is called once immediately, then (times - 1) times
  * asynchronously. If times=1, then cleanup_fn() is also called synchronously.