chartkick 1.2.2 → 1.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ca7e47f1dbaaa98f3c7e1ca1e4dc52ab6cb4262b
-  data.tar.gz: de76a0f1276d12212b37f2a8366649ff22f187e8
+  metadata.gz: c3d82466b6703318eaead4b787e2029ed81b6419
+  data.tar.gz: 6a94782f3c4fbfd27171e03e89e1288e97221287
 SHA512:
-  metadata.gz: 7d4f116d8ac99364ef648f5ee4f9416327c8ea77e647d5606028fe549c2c771c9245676b09b8032ac2df9b9b41e3bc47209911a7daecc562c73742077af8be96
-  data.tar.gz: c67bdceab693294cb60867edaf7d467a0ea2c46f05791bc1f294b1b35ace97aa9290851117e90eeda336ac0ebe08a8e7cec0af4bd09e525effc496ca19053385
+  metadata.gz: b14d7a3cd54eb4d67af1efa3776c7f9c5bf6c07c8d8d22aff8294312236095b1ab5de4850c330d938aae2f0b21108c31aacad0da73a0248b190da79fbf637884
+  data.tar.gz: ce3df7336aa518bc1c3859c7e113607bd851779c5efc23b483f1154fdc2913d207ab0fffc6ed86b82f9743a1d656f4034bba4e67520769c2bff06d851c006684

data/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 1.2.3
+
+- Added geo chart
+- Added `discrete` option
+
 ## 1.2.2
 
 - Added global `content_for` option

data/README.md

@@ -19,19 +19,19 @@ Line chart
 Pie chart
 
 ```erb
-<%= pie_chart Goal.group("name").count %>
+<%= pie_chart Goal.group(:name).count %>
 ```
 
 Column chart
 
 ```erb
-<%= column_chart Task.group_by_hour_of_day(:created_at).count %>
+<%= column_chart Task.group_by_hour_of_day(:created_at, format: "%l %P").count %>
 ```
 
 Bar chart
 
 ```erb
-<%= bar_chart Shirt.group("size").sum(:price) %>
+<%= bar_chart Shirt.group(:size).sum(:price) %>
 ```
 
 Area chart
@@ -40,11 +40,17 @@ Area chart
 <%= area_chart Visit.group_by_minute(:created_at).maximum(:load_time) %>
 ```
 
+Geo chart
+
+```erb
+<%= geo_chart Medal.group(:country).count %>
+```
+
 Multiple series (except pie chart)
 
 ```erb
 <%= line_chart @goals.map{|goal|
-    {:name => goal.name, :data => goal.feats.group_by_week(:created_at).count }
+    {name: goal.name, data: goal.feats.group_by_week(:created_at).count}
 } %>
 ```
 
@@ -61,43 +67,49 @@ And in your controller, pass the data as JSON.
 ```ruby
 class ChartsController < ApplicationController
   def completed_tasks
-    render :json => Task.group_by_day(:completed_at).count
+    render json: Task.group_by_day(:completed_at).count
   end
 end
 ```
 
-**Note:** This feature requires jQuery at the moment.
+**Note:** This feature requires [jQuery](http://jquery.com/) or [Zepto](http://zeptojs.com/) at the moment.
 
 ### Options
 
 Id and height
 
 ```erb
-<%= line_chart data, :id => "users-chart", :height => "500px" %>
+<%= line_chart data, id: "users-chart", height: "500px" %>
 ```
 
 Min and max values (except pie chart)
 
 ```erb
-<%= line_chart data, :min => 1000, :max => 5000 %>
+<%= line_chart data, min: 1000, max: 5000 %>
 ```
 
 Stacked columns or bars
 
 ```erb
-<%= column_chart data, :stacked => true %>
+<%= column_chart data, stacked: true %>
+```
+
+Discrete axis
+
+```erb
+<%= line_chart data, discrete: true %>
 ```
 
 You can pass options directly to the charting library with:
 
 ```erb
-<%= line_chart data, :library => {:backgroundColor => "#eee"} %>
+<%= line_chart data, library: {backgroundColor: "#eee"} %>
 ```
 
 You can also pass a content_for option, which will put the javascript in a content block.  This is great for including all of your javascript at the bottom of the page.
 
 ```erb
-<%= line_chart data, :content_for => :charts_js %>
+<%= line_chart data, content_for: :charts_js %>
 ```
 Then, in your layout:
 
@@ -125,8 +137,8 @@ For multiple series, use the format
 
 ```erb
 <%= line_chart [
-  {:name => "Series A", :data => series_a},
-  {:name => "Series B", :data => series_b}
+  {name: "Series A", data: series_a},
+  {name: "Series B", data: series_b}
 ] %>
 ```
 

data/app/assets/javascripts/chartkick.js

@@ -2,21 +2,18 @@
  * Chartkick.js
  * Create beautiful Javascript charts with minimal code
  * https://github.com/ankane/chartkick.js
- * v1.1.1
+ * v1.2.1
  * MIT License
  */
 
 /*jslint browser: true, indent: 2, plusplus: true, vars: true */
-/*global google, Highcharts, $*/
 
-(function () {
+(function (window) {
   'use strict';
 
-  var Chartkick, ISO8601_PATTERN, DECIMAL_SEPARATOR, defaultOptions, hideLegend,
-    setMin, setMax, setStacked, jsOptions, loaded, waitForLoaded, setBarMin, setBarMax, createDataTable, resize;
+  var Chartkick, ISO8601_PATTERN, DECIMAL_SEPARATOR, adapters = [];
 
-  // only functions that need defined specific to charting library
-  var renderLineChart, renderPieChart, renderColumnChart, renderBarChart, renderAreaChart;
+  var $ = window.jQuery || window.Zepto || window.$;
 
   // helpers
 
@@ -153,7 +150,7 @@
   }
 
   function getJSON(element, url, success) {
-    jQuery.ajax({
+    $.ajax({
       dataType: "json",
       url: url,
       success: success,
@@ -164,22 +161,24 @@
     });
   }
 
-  function errorCatcher(element, data, opts, callback) {
+  function errorCatcher(chart, callback) {
     try {
-      callback(element, data, opts);
+      callback(chart);
     } catch (err) {
-      chartError(element, err.message);
+      chartError(chart.element, err.message);
       throw err;
     }
   }
 
-  function fetchDataSource(element, dataSource, opts, callback) {
-    if (typeof dataSource === "string") {
-      getJSON(element, dataSource, function (data, textStatus, jqXHR) {
-        errorCatcher(element, data, opts, callback);
+  function fetchDataSource(chart, callback) {
+    if (typeof chart.dataSource === "string") {
+      getJSON(chart.element, chart.dataSource, function (data, textStatus, jqXHR) {
+        chart.data = data;
+        errorCatcher(chart, callback);
       });
     } else {
-      errorCatcher(element, dataSource, opts, callback);
+      chart.data = chart.dataSource;
+      errorCatcher(chart, callback);
     }
   }
 
@@ -225,371 +224,416 @@
   }
 
   if ("Highcharts" in window) {
-
-    defaultOptions = {
-      chart: {},
-      xAxis: {
-        labels: {
-          style: {
-            fontSize: "12px"
+    var HighchartsAdapter = new function () {
+      var Highcharts = window.Highcharts;
+
+      var defaultOptions = {
+        chart: {},
+        xAxis: {
+          labels: {
+            style: {
+              fontSize: "12px"
+            }
           }
-        }
-      },
-      yAxis: {
+        },
+        yAxis: {
+          title: {
+            text: null
+          },
+          labels: {
+            style: {
+              fontSize: "12px"
+            }
+          }
+        },
         title: {
           text: null
         },
-        labels: {
+        credits: {
+          enabled: false
+        },
+        legend: {
+          borderWidth: 0
+        },
+        tooltip: {
           style: {
             fontSize: "12px"
           }
+        },
+        plotOptions: {
+          areaspline: {},
+          series: {
+            marker: {}
+          }
         }
-      },
-      title: {
-        text: null
-      },
-      credits: {
-        enabled: false
-      },
-      legend: {
-        borderWidth: 0
-      },
-      tooltip: {
-        style: {
-          fontSize: "12px"
+      };
+
+      var hideLegend = function (options) {
+        options.legend.enabled = false;
+      };
+
+      var setMin = function (options, min) {
+        options.yAxis.min = min;
+      };
+
+      var setMax = function (options, max) {
+        options.yAxis.max = max;
+      };
+
+      var setStacked = function (options) {
+        options.plotOptions.series.stacking = "normal";
+      };
+
+      var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked);
+
+      this.renderLineChart = function (chart, chartType) {
+        chartType = chartType || "spline";
+        var chartOptions = {};
+        if (chartType === "areaspline") {
+          chartOptions = {
+            plotOptions: {
+              areaspline: {
+                stacking: "normal"
+              },
+              series: {
+                marker: {
+                  enabled: false
+                }
+              }
+            }
+          };
         }
-      },
-      plotOptions: {
-        areaspline: {},
-        series: {
-          marker: {}
+        var options = jsOptions(chart.data, chart.options, chartOptions), data, i, j;
+        options.xAxis.type = chart.options.discrete ? "category" : "datetime";
+        options.chart.type = chartType;
+        options.chart.renderTo = chart.element.id;
+
+        var series = chart.data;
+        for (i = 0; i < series.length; i++) {
+          data = series[i].data;
+          if (!chart.options.discrete) {
+            for (j = 0; j < data.length; j++) {
+              data[j][0] = data[j][0].getTime();
+            }
+          }
+          series[i].marker = {symbol: "circle"};
         }
-      }
-    };
-
-    hideLegend = function (options) {
-      options.legend.enabled = false;
-    };
-
-    setMin = function (options, min) {
-      options.yAxis.min = min;
-    };
-
-    setMax = function (options, max) {
-      options.yAxis.max = max;
-    };
-
-    setStacked = function (options) {
-      options.plotOptions.series.stacking = "normal";
-    };
-
-    jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked);
-
-    renderLineChart = function (element, series, opts, chartType) {
-      chartType = chartType || "spline";
-      var chartOptions = {};
-      if (chartType === "areaspline") {
-        chartOptions = {
-          plotOptions: {
-            areaspline: {
-              stacking: "normal"
-            },
-            series: {
-              marker: {
-                enabled: false
-              }
+        options.series = series;
+        new Highcharts.Chart(options);
+      };
+
+      this.renderPieChart = function (chart) {
+        var options = merge(defaultOptions, chart.options.library || {});
+        options.chart.renderTo = chart.element.id;
+        options.series = [{
+          type: "pie",
+          name: "Value",
+          data: chart.data
+        }];
+        new Highcharts.Chart(options);
+      };
+
+      this.renderColumnChart = function (chart, chartType) {
+        var chartType = chartType || "column";
+        var series = chart.data;
+        var options = jsOptions(series, chart.options), i, j, s, d, rows = [];
+        options.chart.type = chartType;
+        options.chart.renderTo = chart.element.id;
+
+        for (i = 0; i < series.length; i++) {
+          s = series[i];
+
+          for (j = 0; j < s.data.length; j++) {
+            d = s.data[j];
+            if (!rows[d[0]]) {
+              rows[d[0]] = new Array(series.length);
             }
+            rows[d[0]][i] = d[1];
           }
-        };
-      }
-      var options = jsOptions(series, opts, chartOptions), data, i, j;
-      options.xAxis.type = "datetime";
-      options.chart.type = chartType;
-      options.chart.renderTo = element.id;
-
-      for (i = 0; i < series.length; i++) {
-        data = series[i].data;
-        for (j = 0; j < data.length; j++) {
-          data[j][0] = data[j][0].getTime();
         }
-        series[i].marker = {symbol: "circle"};
-      }
-      options.series = series;
-      new Highcharts.Chart(options);
-    };
-
-    renderPieChart = function (element, series, opts) {
-      var options = merge(defaultOptions, opts.library || {});
-      options.chart.renderTo = element.id;
-      options.series = [{
-        type: "pie",
-        name: "Value",
-        data: series
-      }];
-      new Highcharts.Chart(options);
-    };
-
-    renderColumnChart = function (element, series, opts, chartType) {
-      chartType = chartType || "column";
-      var options = jsOptions(series, opts), i, j, s, d, rows = [];
-      options.chart.type = chartType;
-      options.chart.renderTo = element.id;
 
-      for (i = 0; i < series.length; i++) {
-        s = series[i];
-
-        for (j = 0; j < s.data.length; j++) {
-          d = s.data[j];
-          if (!rows[d[0]]) {
-            rows[d[0]] = new Array(series.length);
+        var categories = [];
+        for (i in rows) {
+          if (rows.hasOwnProperty(i)) {
+            categories.push(i);
           }
-          rows[d[0]][i] = d[1];
         }
-      }
+        options.xAxis.categories = categories;
 
-      var categories = [];
-      for (i in rows) {
-        if (rows.hasOwnProperty(i)) {
-          categories.push(i);
-        }
-      }
-      options.xAxis.categories = categories;
+        var newSeries = [];
+        for (i = 0; i < series.length; i++) {
+          d = [];
+          for (j = 0; j < categories.length; j++) {
+            d.push(rows[categories[j]][i] || 0);
+          }
 
-      var newSeries = [];
-      for (i = 0; i < series.length; i++) {
-        d = [];
-        for (j = 0; j < categories.length; j++) {
-          d.push(rows[categories[j]][i] || 0);
+          newSeries.push({
+            name: series[i].name,
+            data: d
+          });
         }
+        options.series = newSeries;
 
-        newSeries.push({
-          name: series[i].name,
-          data: d
-        });
-      }
-      options.series = newSeries;
+        new Highcharts.Chart(options);
+      };
 
-      new Highcharts.Chart(options);
-    };
+      var self = this;
 
-    renderBarChart = function (element, series, opts) {
-      renderColumnChart(element, series, opts, "bar");
-    };
-
-    renderAreaChart = function (element, series, opts) {
-      renderLineChart(element, series, opts, "areaspline");
-    };
-  } else if ("google" in window) { // Google charts
-    // load from google
-    loaded = false;
-    google.setOnLoadCallback(function () {
-      loaded = true;
-    });
-    var loadOptions = {"packages": ["corechart"]};
-    var config = window.Chartkick || {};
-    if (config.language) {
-      loadOptions.language = config.language;
-    }
-    google.load("visualization", "1.0", loadOptions);
+      this.renderBarChart = function (chart) {
+        self.renderColumnChart(chart, "bar");
+      };
 
-    waitForLoaded = function (callback) {
-      google.setOnLoadCallback(callback); // always do this to prevent race conditions (watch out for other issues due to this)
-      if (loaded) {
-        callback();
-      }
+      this.renderAreaChart = function (chart) {
+        self.renderLineChart(chart, "areaspline");
+      };
     };
+    adapters.push(HighchartsAdapter);
+  }
+  if ("google" in window) {
+    var GoogleChartsAdapter = new function () {
+      var google = window.google;
+
+      // load from google
+      var loaded = false;
+      google.setOnLoadCallback(function () {
+        loaded = true;
+      });
+      google.load("visualization", "1.0", {"packages": ["corechart"]});
 
-    // Set chart options
-    defaultOptions = {
-      chartArea: {},
-      fontName: "'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif",
-      pointSize: 6,
-      legend: {
-        textStyle: {
-          fontSize: 12,
-          color: "#444"
-        },
-        alignment: "center",
-        position: "right"
-      },
-      curveType: "function",
-      hAxis: {
-        textStyle: {
-          color: "#666",
-          fontSize: 12
+      var waitForLoaded = function (callback) {
+        google.setOnLoadCallback(callback); // always do this to prevent race conditions (watch out for other issues due to this)
+        if (loaded) {
+          callback();
+        }
+      };
+
+      // Set chart options
+      var defaultOptions = {
+        chartArea: {},
+        fontName: "'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif",
+        pointSize: 6,
+        legend: {
+          textStyle: {
+            fontSize: 12,
+            color: "#444"
+          },
+          alignment: "center",
+          position: "right"
         },
-        gridlines: {
-          color: "transparent"
+        curveType: "function",
+        hAxis: {
+          textStyle: {
+            color: "#666",
+            fontSize: 12
+          },
+          gridlines: {
+            color: "transparent"
+          },
+          baselineColor: "#ccc",
+          viewWindow: {}
         },
-        baselineColor: "#ccc",
-        viewWindow: {}
-      },
-      vAxis: {
-        textStyle: {
-          color: "#666",
-          fontSize: 12
+        vAxis: {
+          textStyle: {
+            color: "#666",
+            fontSize: 12
+          },
+          baselineColor: "#ccc",
+          viewWindow: {}
         },
-        baselineColor: "#ccc",
-        viewWindow: {}
-      },
-      tooltip: {
-        textStyle: {
-          color: "#666",
-          fontSize: 12
+        tooltip: {
+          textStyle: {
+            color: "#666",
+            fontSize: 12
+          }
         }
-      }
-    };
+      };
 
-    hideLegend = function (options) {
-      options.legend.position = "none";
-    };
+      var hideLegend = function (options) {
+        options.legend.position = "none";
+      };
 
-    setMin = function (options, min) {
-      options.vAxis.viewWindow.min = min;
-    };
+      var setMin = function (options, min) {
+        options.vAxis.viewWindow.min = min;
+      };
 
-    setMax = function (options, max) {
-      options.vAxis.viewWindow.max = max;
-    };
+      var setMax = function (options, max) {
+        options.vAxis.viewWindow.max = max;
+      };
 
-    setBarMin = function (options, min) {
-      options.hAxis.viewWindow.min = min;
-    };
+      var setBarMin = function (options, min) {
+        options.hAxis.viewWindow.min = min;
+      };
 
-    setBarMax = function (options, max) {
-      options.hAxis.viewWindow.max = max;
-    };
-
-    setStacked = function (options) {
-      options.isStacked = true;
-    };
-
-    jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked);
+      var setBarMax = function (options, max) {
+        options.hAxis.viewWindow.max = max;
+      };
 
-    // cant use object as key
-    createDataTable = function (series, columnType) {
-      var data = new google.visualization.DataTable();
-      data.addColumn(columnType, "");
+      var setStacked = function (options) {
+        options.isStacked = true;
+      };
 
-      var i, j, s, d, key, rows = [];
-      for (i = 0; i < series.length; i++) {
-        s = series[i];
-        data.addColumn("number", s.name);
+      var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked);
 
-        for (j = 0; j < s.data.length; j++) {
-          d = s.data[j];
-          key = (columnType === "datetime") ? d[0].getTime() : d[0];
-          if (!rows[key]) {
-            rows[key] = new Array(series.length);
+      // cant use object as key
+      var createDataTable = function (series, columnType) {
+        var data = new google.visualization.DataTable();
+        data.addColumn(columnType, "");
+
+        var i, j, s, d, key, rows = [];
+        for (i = 0; i < series.length; i++) {
+          s = series[i];
+          data.addColumn("number", s.name);
+
+          for (j = 0; j < s.data.length; j++) {
+            d = s.data[j];
+            key = (columnType === "datetime") ? d[0].getTime() : d[0];
+            if (!rows[key]) {
+              rows[key] = new Array(series.length);
+            }
+            rows[key][i] = toFloat(d[1]);
           }
-          rows[key][i] = toFloat(d[1]);
         }
-      }
 
-      var rows2 = [];
-      for (i in rows) {
-        if (rows.hasOwnProperty(i)) {
-          rows2.push([(columnType === "datetime") ? new Date(toFloat(i)) : i].concat(rows[i]));
+        var rows2 = [];
+        for (i in rows) {
+          if (rows.hasOwnProperty(i)) {
+            rows2.push([(columnType === "datetime") ? new Date(toFloat(i)) : i].concat(rows[i]));
+          }
         }
-      }
-      if (columnType === "datetime") {
-        rows2.sort(sortByTime);
-      }
-      data.addRows(rows2);
-
-      return data;
-    };
+        if (columnType === "datetime") {
+          rows2.sort(sortByTime);
+        }
+        data.addRows(rows2);
 
-    resize = function (callback) {
-      if (window.attachEvent) {
-        window.attachEvent("onresize", callback);
-      } else if (window.addEventListener) {
-        window.addEventListener("resize", callback, true);
-      }
-      callback();
-    };
+        return data;
+      };
 
-    renderLineChart = function (element, series, opts) {
-      waitForLoaded(function () {
-        var options = jsOptions(series, opts);
-        var data = createDataTable(series, "datetime");
-        var chart = new google.visualization.LineChart(element);
-        resize(function () {
-          chart.draw(data, options);
+      var resize = function (callback) {
+        if (window.attachEvent) {
+          window.attachEvent("onresize", callback);
+        } else if (window.addEventListener) {
+          window.addEventListener("resize", callback, true);
+        }
+        callback();
+      };
+
+      this.renderLineChart = function (chart) {
+        waitForLoaded(function () {
+          var options = jsOptions(chart.data, chart.options);
+          var data = createDataTable(chart.data, chart.options.discrete ? "string" : "datetime");
+          chart.chart = new google.visualization.LineChart(chart.element);
+          resize(function () {
+            chart.chart.draw(data, options);
+          });
         });
-      });
-    };
-
-    renderPieChart = function (element, series, opts) {
-      waitForLoaded(function () {
-        var chartOptions = {
-          chartArea: {
-            top: "10%",
-            height: "80%"
-          }
-        };
-        var options = merge(merge(defaultOptions, chartOptions), opts.library || {});
-
-        var data = new google.visualization.DataTable();
-        data.addColumn("string", "");
-        data.addColumn("number", "Value");
-        data.addRows(series);
-
-        var chart = new google.visualization.PieChart(element);
-        resize(function () {
-          chart.draw(data, options);
+      };
+
+      this.renderPieChart = function (chart) {
+        waitForLoaded(function () {
+          var chartOptions = {
+            chartArea: {
+              top: "10%",
+              height: "80%"
+            }
+          };
+          var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
+
+          var data = new google.visualization.DataTable();
+          data.addColumn("string", "");
+          data.addColumn("number", "Value");
+          data.addRows(chart.data);
+
+          chart.chart = new google.visualization.PieChart(chart.element);
+          resize(function () {
+            chart.chart.draw(data, options);
+          });
         });
-      });
-    };
-
-    renderColumnChart = function (element, series, opts) {
-      waitForLoaded(function () {
-        var options = jsOptions(series, opts);
-        var data = createDataTable(series, "string");
-        var chart = new google.visualization.ColumnChart(element);
-        resize(function () {
-          chart.draw(data, options);
+      };
+
+      this.renderColumnChart = function (chart) {
+        waitForLoaded(function () {
+          var options = jsOptions(chart.data, chart.options);
+          var data = createDataTable(chart.data, "string");
+          chart.chart = new google.visualization.ColumnChart(chart.element);
+          resize(function () {
+            chart.chart.draw(data, options);
+          });
         });
-      });
-    };
-
-    renderBarChart = function (element, series, opts) {
-      waitForLoaded(function () {
-        var chartOptions = {
-          hAxis: {
-            gridlines: {
-              color: "#ccc"
+      };
+
+      this.renderBarChart = function (chart) {
+        waitForLoaded(function () {
+          var chartOptions = {
+            hAxis: {
+              gridlines: {
+                color: "#ccc"
+              }
             }
-          }
-        };
-        var options = jsOptionsFunc(defaultOptions, hideLegend, setBarMin, setBarMax, setStacked)(series, opts, chartOptions);
-        var data = createDataTable(series, "string");
-        var chart = new google.visualization.BarChart(element);
-        resize(function () {
-          chart.draw(data, options);
+          };
+          var options = jsOptionsFunc(defaultOptions, hideLegend, setBarMin, setBarMax, setStacked)(chart.data, chart.options, chartOptions);
+          var data = createDataTable(chart.data, "string");
+          chart.chart = new google.visualization.BarChart(chart.element);
+          resize(function () {
+            chart.chart.draw(data, options);
+          });
         });
-      });
-    };
-
-    renderAreaChart = function (element, series, opts) {
-      waitForLoaded(function () {
-        var chartOptions = {
-          isStacked: true,
-          pointSize: 0,
-          areaOpacity: 0.5
-        };
-        var options = jsOptions(series, opts, chartOptions);
-        var data = createDataTable(series, "datetime");
-        var chart = new google.visualization.AreaChart(element);
-        resize(function () {
-          chart.draw(data, options);
+      };
+
+      this.renderAreaChart = function (chart) {
+        waitForLoaded(function () {
+          var chartOptions = {
+            isStacked: true,
+            pointSize: 0,
+            areaOpacity: 0.5
+          };
+          var options = jsOptions(chart.data, chart.options, chartOptions);
+          var data = createDataTable(chart.data, chart.options.discrete ? "string" : "datetime");
+          chart.chart = new google.visualization.AreaChart(chart.element);
+          resize(function () {
+            chart.chart.draw(data, options);
+          });
         });
-      });
-    };
-  } else { // no chart library installed
-    renderLineChart = renderPieChart = renderColumnChart = renderBarChart = renderAreaChart = function () {
-      throw new Error("Please install Google Charts or Highcharts");
+      };
+
+      this.renderGeoChart = function (chart) {
+        waitForLoaded(function () {
+          var chartOptions = {
+            legend: "none",
+            colorAxis: {
+              colors: ["#f6c7b6", "#ce502d"]
+            }
+          };
+          var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
+
+          var data = new google.visualization.DataTable();
+          data.addColumn("string", "");
+          data.addColumn("number", "Value");
+          data.addRows(chart.data);
+
+          chart.chart = new google.visualization.GeoChart(chart.element);
+          resize(function () {
+            chart.chart.draw(data, options);
+          });
+        });
+      };
     };
+    adapters.push(GoogleChartsAdapter);
+  }
+
+  // TODO add adapter option
+  // TODO remove chartType if cross-browser way
+  // to get the name of the chart class
+  function renderChart(chartType, chart) {
+    var i, adapter, fnName;
+    fnName = "render" + chartType + "Chart";
+
+    for (i = 0; i < adapters.length; i++) {
+      adapter = adapters[i];
+      if (isFunction(adapter[fnName])) {
+        return adapter[fnName](chart);
+      }
+    }
+    throw new Error("No adapter found");
   }
 
   // process data
@@ -604,6 +648,9 @@
     } else {
       opts.hideLegend = false;
     }
+    if (opts.discrete) {
+      time = false;
+    }
 
     // right format
     for (i = 0; i < series.length; i++) {
@@ -623,56 +670,78 @@
     return series;
   }
 
-  function processLineData(element, data, opts) {
-    renderLineChart(element, processSeries(data, opts, true), opts);
-  }
-
-  function processColumnData(element, data, opts) {
-    renderColumnChart(element, processSeries(data, opts, false), opts);
-  }
-
-  function processPieData(element, data, opts) {
+  function processSimple(data) {
     var perfectData = toArr(data), i;
     for (i = 0; i < perfectData.length; i++) {
       perfectData[i] = [toStr(perfectData[i][0]), toFloat(perfectData[i][1])];
     }
-    renderPieChart(element, perfectData, opts);
+    return perfectData;
+  }
+
+  function processLineData(chart) {
+    chart.data = processSeries(chart.data, chart.options, true);
+    renderChart("Line", chart);
+  }
+
+  function processColumnData(chart) {
+    chart.data = processSeries(chart.data, chart.options, false);
+    renderChart("Column", chart);
   }
 
-  function processBarData(element, data, opts) {
-    renderBarChart(element, processSeries(data, opts, false), opts);
+  function processPieData(chart) {
+    chart.data = processSimple(chart.data);
+    renderChart("Pie", chart);
   }
 
-  function processAreaData(element, data, opts) {
-    renderAreaChart(element, processSeries(data, opts, true), opts);
+  function processBarData(chart) {
+    chart.data = processSeries(chart.data, chart.options, false);
+    renderChart("Bar", chart);
   }
 
-  function setElement(element, data, opts, callback) {
+  function processAreaData(chart) {
+    chart.data = processSeries(chart.data, chart.options, true);
+    renderChart("Area", chart);
+  }
+
+  function processGeoData(chart) {
+    chart.data = processSimple(chart.data);
+    renderChart("Geo", chart);
+  }
+
+  function setElement(chart, element, dataSource, opts, callback) {
     if (typeof element === "string") {
       element = document.getElementById(element);
     }
-    fetchDataSource(element, data, opts || {}, callback);
+    chart.element = element;
+    chart.options = opts || {};
+    chart.dataSource = dataSource;
+    Chartkick.charts[element.id] = chart;
+    fetchDataSource(chart, callback);
   }
 
   // define classes
 
   Chartkick = {
     LineChart: function (element, dataSource, opts) {
-      setElement(element, dataSource, opts, processLineData);
+      setElement(this, element, dataSource, opts, processLineData);
     },
     PieChart: function (element, dataSource, opts) {
-      setElement(element, dataSource, opts, processPieData);
+      setElement(this, element, dataSource, opts, processPieData);
     },
     ColumnChart: function (element, dataSource, opts) {
-      setElement(element, dataSource, opts, processColumnData);
+      setElement(this, element, dataSource, opts, processColumnData);
     },
     BarChart: function (element, dataSource, opts) {
-      setElement(element, dataSource, opts, processBarData);
+      setElement(this, element, dataSource, opts, processBarData);
     },
     AreaChart: function (element, dataSource, opts) {
-      setElement(element, dataSource, opts, processAreaData);
-    }
+      setElement(this, element, dataSource, opts, processAreaData);
+    },
+    GeoChart: function (element, dataSource, opts) {
+      setElement(this, element, dataSource, opts, processGeoData);
+    },
+    charts: {}
   };
 
   window.Chartkick = Chartkick;
-}());
+}(window));

data/lib/chartkick/helper.rb

@@ -24,6 +24,10 @@ module Chartkick
       chartkick_chart "AreaChart", data_source, options
     end
 
+    def geo_chart(data_source, options = {})
+      chartkick_chart "GeoChart", data_source, options
+    end
+
     private
 
     def chartkick_chart(klass, data_source, options, &block)

data/lib/chartkick/version.rb

@@ -1,3 +1,3 @@
 module Chartkick
-  VERSION = "1.2.2"
+  VERSION = "1.2.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: chartkick
 version: !ruby/object:Gem::Version
-  version: 1.2.2
+  version: 1.2.3
 platform: ruby
 authors:
 - Andrew Kane
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-02-23 00:00:00.000000000 Z
+date: 2014-03-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -95,7 +95,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.2.0
+rubygems_version: 2.2.2
 signing_key: 
 specification_version: 4
 summary: Create beautiful Javascript charts with one line of Ruby