Table chart

app/assets/javascripts/chartkick.js

@@ -616,7 +616,7 @@
           var cb, call;
           for (var i = 0; i < callbacks.length; i++) {
             cb = callbacks[i];
-            call = google.visualization && ((cb.pack === "corechart" && google.visualization.LineChart) || (cb.pack === "timeline" && google.visualization.Timeline));
+            call = google.visualization && ((cb.pack === "corechart" && google.visualization.LineChart) || (cb.pack === "timeline" && google.visualization.Timeline) || (cb.pack === 'table' && google.visualization.Table));
             if (call) {
               cb.callback();
               callbacks.splice(i, 1);
@@ -1008,6 +1008,28 @@
             });
           });
         };
+
+        this.renderTable = function (chart) {
+          waitForLoaded('table', function () {
+            var defaultOptions = {
+              fontName: "'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif"
+            };
+
+            var options = merge(defaultOptions, chart.options || {});
+
+            var data = new google.visualization.DataTable();
+            for (var i = 0; i < chart.data[0].length; i++) {
+              data.addColumn.apply(data, chart.data[0][i]);
+            }
+            data.addRows(chart.data.slice(1));
+
+            chart.chart = new google.visualization.Table(chart.element);
+
+            resize(function () {
+              chart.chart.draw(data, options);
+            });
+          });
+        };
       };
 
       adapters.push(GoogleChartsAdapter);
@@ -1789,6 +1811,9 @@
     Timeline: function (element, dataSource, options) {
       createChart("Timeline", this, element, dataSource, options, processTime);
     },
+    Table: function (element, dataSource, options) {
+      createChart("Table", this, element, dataSource, options);
+    },
     charts: {},
     configure: function (options) {
       for (var key in options) {

lib/chartkick/helper.rb

@@ -35,6 +35,10 @@ def timeline(data_source, options = {})
       chartkick_chart "Timeline", data_source, options
     end
 
+    def table(data_source, options = {})
+      chartkick_chart "Table", data_source, options
+    end
+
     private
 
     def chartkick_chart(klass, data_source, options)
@@ -47,7 +51,11 @@ def chartkick_chart(klass, data_source, options)
       # content_for: nil must override default
       content_for = options.key?(:content_for) ? options.delete(:content_for) : Chartkick.content_for
       nonce = options.key?(:nonce) ? " nonce=\"#{ERB::Util.html_escape(options.delete(:nonce))}\"" : nil
-      html = (options.delete(:html) || %(<div id="%{id}" style="height: %{height}; width: %{width}; text-align: center; color: #999; line-height: %{height}; font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;">Loading...</div>)) % {id: ERB::Util.html_escape(element_id), height: ERB::Util.html_escape(height), width: ERB::Util.html_escape(width)}
+      line_height = nil
+      unless klass == "Table"
+        line_height = "line-height: %{height};" % { height: ERB::Util.html_escape(height) }
+      end
+      html = (options.delete(:html) || %(<div id="%{id}" style="height: %{height}; width: %{width}; text-align: center; color: #999; #{line_height} font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;">Loading...</div>)) % { id: ERB::Util.html_escape(element_id), height: ERB::Util.html_escape(height), width: ERB::Util.html_escape(width) }
 
       createjs = "new Chartkick.#{klass}(#{element_id.to_json}, #{data_source.respond_to?(:chart_json) ? data_source.chart_json : data_source.to_json}, #{options.to_json});"
       if defer