diff --git a/heatgrid.js b/heatgrid.js
new file mode 100644
index 0000000..628383f
--- /dev/null
+++ b/heatgrid.js
@@ -0,0 +1,161 @@
+/*
+ * Copyright 2013 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+var HeatGrid = function(el) {
+  this.el = $(el);
+
+  var rgb = function(r, g, b) {
+    return 'rgb(' + parseInt(r) + ',' + parseInt(g) + ',' + parseInt(b) + ')';
+  }
+
+  var frac = function(minval, maxval, fraction) {
+    return minval + fraction * (maxval - minval);
+  }
+
+  var gradient = function(mincolor, zerocolor, maxcolor,
+                          ofs) {
+    if (ofs == 0) {
+      return [zerocolor[0], zerocolor[1], zerocolor[2], 0];
+    } else if (ofs < 0) {
+      return [frac(zerocolor[0], mincolor[0], -ofs/3),
+              frac(zerocolor[1], mincolor[1], -ofs/3),
+              frac(zerocolor[2], mincolor[2], -ofs/3)];
+    } else if (ofs > 0) {
+      return [frac(zerocolor[0], maxcolor[0], ofs/3),
+              frac(zerocolor[1], maxcolor[1], ofs/3),
+              frac(zerocolor[2], maxcolor[2], ofs/3)];
+    }
+  }
+
+  this.draw = function(grid) {
+    console.debug('heatgrid.draw', grid);
+    this.el.html('<div id="heatgrid"><canvas></canvas>' +
+                 '<div id="heatgrid-popover"></div></div>');
+    var heatgrid = this.el.find('#heatgrid');
+    heatgrid.css({
+      position: 'relative',
+      overflow: 'scroll',
+      width: '100%',
+      height: '100%',
+    });
+    var popover = this.el.find('#heatgrid-popover');
+    popover.css({
+      position: 'absolute',
+      top: 0, left: 0,
+      background: '#aaa',
+      border: '1px dotted black',
+      'white-space': 'pre'
+    });
+    var canvas = this.el.find('canvas');
+    var xmult = parseInt(1000 / grid.headers.length);
+    if (xmult < 1) xmult = 1;
+    var xsize = grid.headers.length * xmult;
+    var ysize = grid.data.length;
+    canvas.attr({width: xsize, height: ysize});
+    canvas.css({
+      background: '#fff',
+      width: '100%',
+      height: ysize //'100%',
+    });
+    console.debug('heatgrid canvas size is: x y =', xsize, ysize);
+    var ctx = canvas[0].getContext('2d');
+
+    if (!grid.data.length || !grid.data[0].length) {
+      return;
+    }
+
+    // TODO(apenwarr): offsetX/Y are flakey, use something else
+    var movefunc = function(offX, offY) {
+      var x = parseInt(offX / canvas.width() * grid.headers.length);
+      var y = parseInt(offY / canvas.height() * grid.data.length);
+      if (x > grid.headers.length || y > grid.data.length) return;
+      var info = [];
+      for (var i = 0; i < grid.headers.length; i++) {
+        if (grid.types[i] != 'number') {
+          info.push(grid.data[y][i]);
+        } else {
+          break;
+        }
+      }
+      info.push(grid.headers[x]);
+      info.push('value=' + grid.data[y][x]);
+
+      popover.css({
+        left: (x + 0.4) / grid.headers.length * canvas.width(),
+        top: (y + 0.4) / grid.data.length * canvas.height(),
+      });
+      popover.text(info.join('\n'));
+    };
+    heatgrid.mousemove(function(ev) {
+      var pos = canvas.position();
+      movefunc(ev.pageX - pos.left, ev.pageY - pos.top);
+    });
+    heatgrid.mouseleave(function() {
+      popover.hide();
+    });
+    heatgrid.mouseenter(function() {
+      popover.show();
+    });
+
+
+    var total = 0, count = 0;
+    for (var y = 0; y < grid.data.length; y++) {
+      for (var x = 0; x < grid.data[y].length; x++) {
+        if (grid.types[x] != 'number') continue;
+        var cell = parseFloat(grid.data[y][x]);
+        if (!isNaN(cell)) {
+          total += cell;
+          count++;
+        }
+      }
+    }
+    var avg = total / count;
+
+    var tdiff = 0;
+    for (var y = 0; y < grid.data.length; y++) {
+      for (var x = 0; x < grid.data[y].length; x++) {
+        if (grid.types[x] != 'number') continue;
+        var cell = parseFloat(grid.data[y][x]);
+        if (!isNaN(cell)) {
+          tdiff += (cell - avg) * (cell - avg);
+        }
+      }
+    }
+    var stddev = Math.sqrt(tdiff / count);
+
+    var img = ctx.createImageData(xsize, ysize);
+    for (var y = 0; y < grid.data.length; y++) {
+      for (var x = 0; x < grid.data[y].length; x++) {
+        if (grid.types[x] != 'number') continue;
+        var cell = parseFloat(grid.data[y][x]);
+        if (isNaN(cell)) continue;
+        var color = gradient(//[255,0,0], [192,192,192], [0,0,255],
+                             [192,192,192], [192,192,255], [0,0,255],
+                             (cell - avg) / stddev);
+        var pix = (y * xsize + x*xmult) * 4;
+        for (var i = 0; i < xmult; i++) {
+          img.data[pix + 0] = color[0];
+          img.data[pix + 1] = color[1];
+          img.data[pix + 2] = color[2];
+          img.data[pix + 3] = 255;
+          pix += 4;
+        }
+      }
+    }
+    ctx.putImageData(img, 0, 0);
+  }
+};
diff --git a/render.html b/render.html
index 5199565..e27a804 100644
--- a/render.html
+++ b/render.html
@@ -67,6 +67,7 @@
     packages: ['table', 'corechart', 'treemap', 'annotatedtimeline']
   });
   </script>
+  <script src="heatgrid.js"></script>
   <script src="render.js"></script>
 </head>
 
diff --git a/render.js b/render.js
index 36b816b..5a1f6b8 100644
--- a/render.js
+++ b/render.js
@@ -1315,6 +1315,8 @@
           if (charttype == 'dygraph+errors') {
             options.errorBars = true;
           }
+        } else if (charttype == 'heatgrid') {
+          t = new HeatGrid(el);
         } else {
           throw new Error('unknown chart type "' + charttype + '"');
         }
@@ -1325,19 +1327,24 @@
         gridoptions.allowHtml = true;
         options.allowHtml = true;
       }
-      datatable = dataToGvizTable(grid, gridoptions);
 
-      var dateformat = new google.visualization.DateFormat({
-        pattern: 'yyyy-MM-dd'
-      });
-      var datetimeformat = new google.visualization.DateFormat({
-        pattern: 'yyyy-MM-dd HH:mm:ss'
-      });
-      for (var coli = 0; coli < grid.types.length; coli++) {
-        if (grid.types[coli] === T_DATE) {
-          dateformat.format(datatable, coli);
-        } else if (grid.types[coli] === T_DATETIME) {
-          datetimeformat.format(datatable, coli);
+      if (charttype == 'heatgrid') {
+        datatable = grid;
+      } else {
+        datatable = dataToGvizTable(grid, gridoptions);
+
+        var dateformat = new google.visualization.DateFormat({
+          pattern: 'yyyy-MM-dd'
+        });
+        var datetimeformat = new google.visualization.DateFormat({
+          pattern: 'yyyy-MM-dd HH:mm:ss'
+        });
+        for (var coli = 0; coli < grid.types.length; coli++) {
+          if (grid.types[coli] === T_DATE) {
+            dateformat.format(datatable, coli);
+          } else if (grid.types[coli] === T_DATETIME) {
+            datetimeformat.format(datatable, coli);
+          }
         }
       }
       done(grid);
@@ -1346,18 +1353,18 @@
     enqueue(queue, chartops ? 'chart=' + chartops : 'view',
             function(grid, done) {
       if (grid.data.length) {
-	var doRender = function() {
-	  var wantwidth = trace ? window.innerWidth - 40 : window.innerWidth;
-	  $(el).width(wantwidth);
-	  $(el).height(window.innerHeight);
-	  options.height = window.innerHeight;
-	  t.draw(datatable, options);
-	}
-	doRender();
-	$(window).resize(function() {
-	  clearTimeout(resizeTimer);
-	  resizeTimer = setTimeout(doRender, 200);
-	});
+        var doRender = function() {
+          var wantwidth = trace ? window.innerWidth - 40 : window.innerWidth;
+          $(el).width(wantwidth);
+          $(el).height(window.innerHeight);
+          options.height = window.innerHeight;
+          t.draw(datatable, options);
+        }
+        doRender();
+        $(window).resize(function() {
+          clearTimeout(resizeTimer);
+          resizeTimer = setTimeout(doRender, 200);
+        });
       } else {
         el.innerHTML = 'Empty dataset.';
       }