chartkick 1.4.1 → 1.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e884c8071edd2367d5909032ad1c76059ef9538a
-  data.tar.gz: 1b975a28bfc9ab29e7aeaa5fed374fee7d17f830
+  metadata.gz: 30bd21c65fb97d053acf056e67d24b9982d77eed
+  data.tar.gz: de5da367cefd5d077af3d2132b1ac948d7e8207c
 SHA512:
-  metadata.gz: 69d2400ca853b90f1729e6253ab0e66a1a73260e9ddd342ee5ea24fb594f2a77cc1315b81ca9fbf661b9b42d8de8fc9bdf370ce66690a9d90b5701193c85d17c
-  data.tar.gz: 4f2ea6893ce4b3f2447f3ca3bb3d44599e309d89c921ff54e1c12ae62e31dbc0b0d8c7bd316c04133825599ddb9d6ed3488562b2719d33eaacba7fac66a9078a
+  metadata.gz: 3a786415ad5316e7bc7237f67a0dc70407eaf9f96dcfa6ec9c99a78fbdcb036c848c1bb8363ce18ac109fc4cb9815f177b3f1758b7dac445c83ff207bbdcf62d
+  data.tar.gz: 8173102a5c963174a9659ce964af53015489bad6674eb0ded65753b904c4164de8fe6db9403439cd68ae6e9c5a0acec52a01480e45f5712522b01c584a4069a4

data/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 1.4.2
+
+- Added `width` option
+- Added `label` option
+- Added support for `stacked: false` for area charts
+- Lazy load adapters
+- Better tooltip for dates for Google Charts
+- Fixed asset precompilation issue with Rails 5
+
 ## 1.4.1
 
 - Fixed regression with `min: nil`

data/README.md

@@ -1,6 +1,6 @@
 # Chartkick
 
-Create beautiful Javascript charts with one line of Ruby. No more fighting with charting libraries!
+Create beautiful JavaScript charts with one line of Ruby. No more fighting with charting libraries!
 
 [See it in action](http://ankane.github.io/chartkick/)
 
@@ -67,7 +67,7 @@ Timeline
 Multiple series
 
 ```erb
-<%= line_chart @goals.map{|goal|
+<%= line_chart @goals.map { |goal|
     {name: goal.name, data: goal.feats.group_by_week(:created_at).count}
 } %>
 ```
@@ -106,10 +106,10 @@ render json: Task.group(:goal_id).group_by_day(:completed_at).count.chart_json
 
 ### Options
 
-Id and height
+Id, width, and height
 
 ```erb
-<%= line_chart data, id: "users-chart", height: "500px" %>
+<%= line_chart data, id: "users-chart", width: "800px", height: "500px" %>
 ```
 
 Min and max values
@@ -138,6 +138,12 @@ Discrete axis
 <%= line_chart data, discrete: true %>
 ```
 
+Label (for single series)
+
+```erb
+<%= line_chart data, label: "Value" %>
+```
+
 Axis titles
 
 ```erb
@@ -169,7 +175,7 @@ Customize the html
 Chartkick.options[:html] = '<div id="%{id}" style="height: %{height};">Loading...</div>'
 ```
 
-You capture the javascript in a content block with:
+You capture the JavaScript in a content block with:
 
 ```ruby
 Chartkick.options[:content_for] = :charts_js
@@ -182,7 +188,7 @@ Then, in your layout:
 <%= yield_content :charts_js %> <%# Padrino %>
 ```
 
-This is great for including all of your javascript at the bottom of the page.
+This is great for including all of your JavaScript at the bottom of the page.
 
 ### Data
 
@@ -216,12 +222,12 @@ Add this line to your application's Gemfile:
 gem "chartkick"
 ```
 
-And add the javascript files to your views.  These files must be included **before** the helper methods, unless using the `:content_for` option.
+And add the JavaScript files to your views.  These files must be included **before** the helper methods, unless using the `:content_for` option.
 
 For Google Charts, use:
 
 ```erb
-<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
+<%= javascript_include_tag "https://www.google.com/jsapi", "chartkick" %>
 ```
 
 If you prefer Highcharts, use:
@@ -241,7 +247,7 @@ You must include `chartkick.js` manually.  [Download it here](https://raw.github
 For Rails 2.3, you must use a script tag for Google Charts due to [this bug](https://rails.lighthouseapp.com/projects/8994/tickets/1664-javascript_include_tag-shouldnt-append-a-js-onto-external-urls).
 
 ```html
-<script src="//www.google.com/jsapi"></script>
+<script src="https://www.google.com/jsapi"></script>
 ```
 
 ### For Sinatra
@@ -249,7 +255,7 @@ For Rails 2.3, you must use a script tag for Google Charts due to [this bug](htt
 You must include `chartkick.js` manually.  [Download it here](https://raw.github.com/ankane/chartkick/master/app/assets/javascripts/chartkick.js)
 
 ```html
-<script src="//www.google.com/jsapi"></script>
+<script src="https://www.google.com/jsapi"></script>
 <script src="chartkick.js"></script>
 ```
 
@@ -273,7 +279,7 @@ To specify a language for Google Charts, add:
 </script>
 ```
 
-**before** the javascript files.
+**before** the JavaScript files.
 
 ## No Ruby? No Problem
 

data/app/assets/javascripts/chartkick.js

@@ -1,8 +1,8 @@
 /*
  * Chartkick.js
- * Create beautiful Javascript charts with minimal code
+ * Create beautiful JavaScript charts with minimal code
  * https://github.com/ankane/chartkick.js
- * v1.4.1
+ * v1.4.2
  * MIT License
  */
 
@@ -13,6 +13,7 @@
 
   var config = window.Chartkick || {};
   var Chartkick, ISO8601_PATTERN, DECIMAL_SEPARATOR, adapters = [];
+  var adapters = [];
 
   // helpers
 
@@ -124,8 +125,8 @@
         setMax(options, opts.max);
       }
 
-      if (opts.stacked) {
-        setStacked(options);
+      if ("stacked" in opts) {
+        setStacked(options, opts.stacked);
       }
 
       if (opts.colors) {
@@ -235,518 +236,526 @@
     return a[0].getTime() - b[0].getTime();
   }
 
-  if ("Highcharts" in window) {
-    var HighchartsAdapter = new function () {
-      var Highcharts = window.Highcharts;
+  function loadAdapters() {
+    if (!HighchartsAdapter && "Highcharts" in window) {
+      var HighchartsAdapter = new function () {
+        var Highcharts = window.Highcharts;
 
-      this.name = "highcharts";
+        this.name = "highcharts";
 
-      var defaultOptions = {
-        chart: {},
-        xAxis: {
-          title: {
-            text: null
+        var defaultOptions = {
+          chart: {},
+          xAxis: {
+            title: {
+              text: null
+            },
+            labels: {
+              style: {
+                fontSize: "12px"
+              }
+            }
           },
-          labels: {
-            style: {
-              fontSize: "12px"
+          yAxis: {
+            title: {
+              text: null
+            },
+            labels: {
+              style: {
+                fontSize: "12px"
+              }
             }
-          }
-        },
-        yAxis: {
+          },
           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"
-          }
-        },
-        plotOptions: {
-          areaspline: {},
-          series: {
-            marker: {}
-          }
-        }
-      };
+        };
 
-      var hideLegend = function (options) {
-        options.legend.enabled = false;
-      };
+        var hideLegend = function (options) {
+          options.legend.enabled = false;
+        };
 
-      var setMin = function (options, min) {
-        options.yAxis.min = min;
-      };
+        var setMin = function (options, min) {
+          options.yAxis.min = min;
+        };
 
-      var setMax = function (options, max) {
-        options.yAxis.max = max;
-      };
+        var setMax = function (options, max) {
+          options.yAxis.max = max;
+        };
 
-      var setStacked = function (options) {
-        options.plotOptions.series.stacking = "normal";
-      };
+        var setStacked = function (options, stacked) {
+          options.plotOptions.series.stacking = stacked ? "normal" : null;
+        };
 
-      var setXtitle = function (options, title) {
-        options.xAxis.title.text = title;
-      };
+        var setXtitle = function (options, title) {
+          options.xAxis.title.text = title;
+        };
 
-      var setYtitle = function (options, title) {
-        options.yAxis.title.text = title;
-      };
+        var setYtitle = function (options, title) {
+          options.yAxis.title.text = title;
+        };
+
+        var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle);
 
-      var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle);
-
-      this.renderLineChart = function (chart, chartType) {
-        chartType = chartType || "spline";
-        var chartOptions = {};
-        if (chartType === "areaspline") {
-          chartOptions = {
-            plotOptions: {
-              areaspline: {
-                stacking: "normal"
-              },
-              series: {
-                marker: {
-                  enabled: false
+        this.renderLineChart = function (chart, chartType) {
+          chartType = chartType || "spline";
+          var chartOptions = {};
+          if (chartType === "areaspline") {
+            chartOptions = {
+              plotOptions: {
+                areaspline: {
+                  stacking: "normal"
+                },
+                series: {
+                  marker: {
+                    enabled: false
+                  }
                 }
               }
+            };
+          }
+          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();
+              }
             }
-          };
-        }
-        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"};
           }
-          series[i].marker = {symbol: "circle"};
-        }
-        options.series = series;
-        new Highcharts.Chart(options);
-      };
-
-      this.renderScatterChart = function (chart) {
-        var chartOptions = {};
-        var options = jsOptions(chart.data, chart.options, chartOptions);
-        options.chart.type = 'scatter';
-        options.chart.renderTo = chart.element.id;
-        options.series = chart.data;
-        new Highcharts.Chart(options);
-      };
-
-      this.renderPieChart = function (chart) {
-        var chartOptions = {};
-        if (chart.options.colors) {
-          chartOptions.colors = chart.options.colors;
-        }
-        var options = merge(merge(defaultOptions, chartOptions), 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;
+          options.series = series;
+          new Highcharts.Chart(options);
+        };
 
-        for (i = 0; i < series.length; i++) {
-          s = series[i];
+        this.renderScatterChart = function (chart) {
+          var chartOptions = {};
+          var options = jsOptions(chart.data, chart.options, chartOptions);
+          options.chart.type = 'scatter';
+          options.chart.renderTo = chart.element.id;
+          options.series = chart.data;
+          new Highcharts.Chart(options);
+        };
 
-          for (j = 0; j < s.data.length; j++) {
-            d = s.data[j];
-            if (!rows[d[0]]) {
-              rows[d[0]] = new Array(series.length);
+        this.renderPieChart = function (chart) {
+          var chartOptions = {};
+          if (chart.options.colors) {
+            chartOptions.colors = chart.options.colors;
+          }
+          var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
+          options.chart.renderTo = chart.element.id;
+          options.series = [{
+            type: "pie",
+            name: chart.options.label || "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];
             }
-            rows[d[0]][i] = d[1];
           }
-        }
 
-        var categories = [];
-        for (i in rows) {
-          if (rows.hasOwnProperty(i)) {
-            categories.push(i);
+          var categories = [];
+          for (i in rows) {
+            if (rows.hasOwnProperty(i)) {
+              categories.push(i);
+            }
           }
-        }
-        options.xAxis.categories = categories;
+          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;
+        var self = this;
 
-      this.renderBarChart = function (chart) {
-        self.renderColumnChart(chart, "bar");
-      };
+        this.renderBarChart = function (chart) {
+          self.renderColumnChart(chart, "bar");
+        };
 
-      this.renderAreaChart = function (chart) {
-        self.renderLineChart(chart, "areaspline");
+        this.renderAreaChart = function (chart) {
+          self.renderLineChart(chart, "areaspline");
+        };
       };
-    };
-    adapters.push(HighchartsAdapter);
-  }
-  if (window.google && window.google.setOnLoadCallback) {
-    var GoogleChartsAdapter = new function () {
-      var google = window.google;
-
-      this.name = "google";
-
-      var loaded = {};
-      var callbacks = [];
-
-      var runCallbacks = function () {
-        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))
-          if (call) {
-            cb.callback();
-            callbacks.splice(i, 1);
-            i--;
+      adapters.push(HighchartsAdapter);
+    }
+    if (!GoogleChartsAdapter && window.google && window.google.setOnLoadCallback) {
+      var GoogleChartsAdapter = new function () {
+        var google = window.google;
+
+        this.name = "google";
+
+        var loaded = {};
+        var callbacks = [];
+
+        var runCallbacks = function () {
+          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))
+            if (call) {
+              cb.callback();
+              callbacks.splice(i, 1);
+              i--;
+            }
           }
-        }
-      };
+        };
 
-      var waitForLoaded = function (pack, callback) {
-        if (!callback) {
-          callback = pack;
-          pack = "corechart";
-        }
+        var waitForLoaded = function (pack, callback) {
+          if (!callback) {
+            callback = pack;
+            pack = "corechart";
+          }
 
-        callbacks.push({pack: pack, callback: callback});
+          callbacks.push({pack: pack, callback: callback});
 
-        if (loaded[pack]) {
-          runCallbacks();
-        } else {
-          loaded[pack] = true;
+          if (loaded[pack]) {
+            runCallbacks();
+          } else {
+            loaded[pack] = true;
 
-          // https://groups.google.com/forum/#!topic/google-visualization-api/fMKJcyA2yyI
-          var loadOptions = {
-            packages: [pack],
-            callback: runCallbacks
-          };
-          if (config.language) {
-            loadOptions.language = config.language;
+            // https://groups.google.com/forum/#!topic/google-visualization-api/fMKJcyA2yyI
+            var loadOptions = {
+              packages: [pack],
+              callback: runCallbacks
+            };
+            if (config.language) {
+              loadOptions.language = config.language;
+            }
+            google.load("visualization", "1", loadOptions);
           }
-          google.load("visualization", "1", loadOptions);
-        }
-      };
-
-      // 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"
+        };
+
+        // 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"
           },
-          alignment: "center",
-          position: "right"
-        },
-        curveType: "function",
-        hAxis: {
-          textStyle: {
-            color: "#666",
-            fontSize: 12
+          curveType: "function",
+          hAxis: {
+            textStyle: {
+              color: "#666",
+              fontSize: 12
+            },
+            titleTextStyle: {},
+            gridlines: {
+              color: "transparent"
+            },
+            baselineColor: "#ccc",
+            viewWindow: {}
           },
-          titleTextStyle: {},
-          gridlines: {
-            color: "transparent"
+          vAxis: {
+            textStyle: {
+              color: "#666",
+              fontSize: 12
+            },
+            titleTextStyle: {},
+            baselineColor: "#ccc",
+            viewWindow: {}
           },
-          baselineColor: "#ccc",
-          viewWindow: {}
-        },
-        vAxis: {
-          textStyle: {
-            color: "#666",
-            fontSize: 12
-          },
-          titleTextStyle: {},
-          baselineColor: "#ccc",
-          viewWindow: {}
-        },
-        tooltip: {
-          textStyle: {
-            color: "#666",
-            fontSize: 12
+          tooltip: {
+            textStyle: {
+              color: "#666",
+              fontSize: 12
+            }
           }
-        }
-      };
+        };
 
-      var hideLegend = function (options) {
-        options.legend.position = "none";
-      };
+        var hideLegend = function (options) {
+          options.legend.position = "none";
+        };
 
-      var setMin = function (options, min) {
-        options.vAxis.viewWindow.min = min;
-      };
+        var setMin = function (options, min) {
+          options.vAxis.viewWindow.min = min;
+        };
 
-      var setMax = function (options, max) {
-        options.vAxis.viewWindow.max = max;
-      };
+        var setMax = function (options, max) {
+          options.vAxis.viewWindow.max = max;
+        };
 
-      var setBarMin = function (options, min) {
-        options.hAxis.viewWindow.min = min;
-      };
+        var setBarMin = function (options, min) {
+          options.hAxis.viewWindow.min = min;
+        };
 
-      var setBarMax = function (options, max) {
-        options.hAxis.viewWindow.max = max;
-      };
+        var setBarMax = function (options, max) {
+          options.hAxis.viewWindow.max = max;
+        };
 
-      var setStacked = function (options) {
-        options.isStacked = true;
-      };
+        var setStacked = function (options, stacked) {
+          options.isStacked = !!stacked;
+        };
 
-      var setXtitle = function (options, title) {
-        options.hAxis.title = title;
-        options.hAxis.titleTextStyle.italic = false;
-      }
-
-      var setYtitle = function (options, title) {
-        options.vAxis.title = title;
-        options.vAxis.titleTextStyle.italic = false;
-      };
+        var setXtitle = function (options, title) {
+          options.hAxis.title = title;
+          options.hAxis.titleTextStyle.italic = false;
+        }
 
-      var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle);
+        var setYtitle = function (options, title) {
+          options.vAxis.title = title;
+          options.vAxis.titleTextStyle.italic = false;
+        };
 
-      // cant use object as key
-      var createDataTable = function (series, columnType) {
-        var data = new google.visualization.DataTable();
-        data.addColumn(columnType, "");
+        var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle);
 
-        var i, j, s, d, key, rows = [];
-        for (i = 0; i < series.length; i++) {
-          s = series[i];
-          data.addColumn("number", s.name);
+        // cant use object as key
+        var createDataTable = function (series, columnType) {
+          var i, j, s, d, key, rows = [];
+          for (i = 0; i < series.length; i++) {
+            s = series[i];
 
-          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);
+            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 = [];
-        var value;
-        for (i in rows) {
-          if (rows.hasOwnProperty(i)) {
-            if (columnType === "datetime") {
-              value = new Date(toFloat(i));
-            } else if (columnType === "number") {
-              value = toFloat(i);
-            } else {
-              value = i;
+          var rows2 = [];
+          var day = true;
+          var value;
+          for (i in rows) {
+            if (rows.hasOwnProperty(i)) {
+              if (columnType === "datetime") {
+                value = new Date(toFloat(i));
+                day = day && isDay(value);
+              } else if (columnType === "number") {
+                value = toFloat(i);
+              } else {
+                value = i;
+              }
+              rows2.push([value].concat(rows[i]));
             }
-            rows2.push([value].concat(rows[i]));
           }
-        }
-        if (columnType === "datetime") {
-          rows2.sort(sortByTime);
-        }
-        data.addRows(rows2);
+          if (columnType === "datetime") {
+            rows2.sort(sortByTime);
+          }
 
-        return data;
-      };
+          // create datatable
+          var data = new google.visualization.DataTable();
+          columnType = columnType === "datetime" && day ? "date" : columnType;
+          data.addColumn(columnType, "");
+          for (i = 0; i < series.length; i++) {
+            data.addColumn("number", series[i].name);
+          }
+          data.addRows(rows2);
 
-      var resize = function (callback) {
-        if (window.attachEvent) {
-          window.attachEvent("onresize", callback);
-        } else if (window.addEventListener) {
-          window.addEventListener("resize", callback, true);
-        }
-        callback();
-      };
+          return data;
+        };
 
-      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);
+        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);
+            });
           });
-        });
-      };
-
-      this.renderPieChart = function (chart) {
-        waitForLoaded(function () {
-          var chartOptions = {
-            chartArea: {
-              top: "10%",
-              height: "80%"
+        };
+
+        this.renderPieChart = function (chart) {
+          waitForLoaded(function () {
+            var chartOptions = {
+              chartArea: {
+                top: "10%",
+                height: "80%"
+              }
+            };
+            if (chart.options.colors) {
+              chartOptions.colors = chart.options.colors;
             }
-          };
-          if (chart.options.colors) {
-            chartOptions.colors = chart.options.colors;
-          }
-          var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
+            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);
+            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);
+            chart.chart = new google.visualization.PieChart(chart.element);
+            resize(function () {
+              chart.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);
+        };
+
+        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);
+            });
           });
-        });
-      };
-
-      this.renderBarChart = function (chart) {
-        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)(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);
+            };
+            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);
+            });
           });
-        });
-      };
-
-      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);
+        };
+
+        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);
+            });
           });
-        });
-      };
-
-      this.renderGeoChart = function (chart) {
-        waitForLoaded(function () {
-          var chartOptions = {
-            legend: "none",
-            colorAxis: {
-              colors: chart.options.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);
+        };
+
+        this.renderGeoChart = function (chart) {
+          waitForLoaded(function () {
+            var chartOptions = {
+              legend: "none",
+              colorAxis: {
+                colors: chart.options.colors || ["#f6c7b6", "#ce502d"]
+              }
+            };
+            var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
+
+            var data = new google.visualization.DataTable();
+            data.addColumn("string", "");
+            data.addColumn("number", chart.options.label || "Value");
+            data.addRows(chart.data);
+
+            chart.chart = new google.visualization.GeoChart(chart.element);
+            resize(function () {
+              chart.chart.draw(data, options);
+            });
           });
-        });
-      };
-
-      this.renderScatterChart = function (chart) {
-        waitForLoaded(function () {
-          var chartOptions = {};
-          var options = jsOptions(chart.data, chart.options, chartOptions);
-          var data = createDataTable(chart.data, "number");
-
-          chart.chart = new google.visualization.ScatterChart(chart.element);
-          resize(function () {
-            chart.chart.draw(data, options);
+        };
+
+        this.renderScatterChart = function (chart) {
+          waitForLoaded(function () {
+            var chartOptions = {};
+            var options = jsOptions(chart.data, chart.options, chartOptions);
+            var data = createDataTable(chart.data, "number");
+
+            chart.chart = new google.visualization.ScatterChart(chart.element);
+            resize(function () {
+              chart.chart.draw(data, options);
+            });
           });
-        });
-      };
+        };
 
-      this.renderTimeline = function (chart) {
-        waitForLoaded("timeline", function () {
-          var chartOptions = {
-            legend: "none"
-          };
+        this.renderTimeline = function (chart) {
+          waitForLoaded("timeline", function () {
+            var chartOptions = {
+              legend: "none"
+            };
 
-          if (chart.options.colors) {
-            chartOptions.colors = chart.options.colors;
-          }
-          var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
+            if (chart.options.colors) {
+              chartOptions.colors = chart.options.colors;
+            }
+            var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
 
-          var data = new google.visualization.DataTable();
-          data.addColumn({type: "string", id: "Name"});
-          data.addColumn({type: "date", id: "Start"});
-          data.addColumn({type: "date", id: "End"});
-          data.addRows(chart.data);
+            var data = new google.visualization.DataTable();
+            data.addColumn({type: "string", id: "Name"});
+            data.addColumn({type: "date", id: "Start"});
+            data.addColumn({type: "date", id: "End"});
+            data.addRows(chart.data);
 
-          chart.chart = new google.visualization.Timeline(chart.element);
+            chart.chart = new google.visualization.Timeline(chart.element);
 
-          resize(function () {
-            chart.chart.draw(data, options);
+            resize(function () {
+              chart.chart.draw(data, options);
+            });
           });
-        });
+        };
       };
-    };
 
-    adapters.push(GoogleChartsAdapter);
+      adapters.push(GoogleChartsAdapter);
+    }
   }
 
   // TODO remove chartType if cross-browser way
@@ -756,6 +765,10 @@
     fnName = "render" + chartType;
     adapterName = chart.options.adapter;
 
+    if (adapters.length == 0) {
+      loadAdapters();
+    }
+
     for (i = 0; i < adapters.length; i++) {
       adapter = adapters[i];
       if ((!adapterName || adapterName === adapter.name) && isFunction(adapter[fnName])) {
@@ -790,12 +803,16 @@
     return r;
   };
 
+  function isDay(d) {
+    return d.getMilliseconds() + d.getSeconds() + d.getMinutes() + d.getHours() === 0;
+  }
+
   function processSeries(series, opts, keyType) {
     var i;
 
     // see if one series or multiple
     if (!isArray(series) || typeof series[0] !== "object" || isArray(series[0])) {
-      series = [{name: "Value", data: series}];
+      series = [{name: opts.label || "Value", data: series}];
       opts.hideLegend = true;
     } else {
       opts.hideLegend = false;

data/chartkick.gemspec

@@ -8,8 +8,8 @@ Gem::Specification.new do |spec|
   spec.version       = Chartkick::VERSION
   spec.authors       = ["Andrew Kane"]
   spec.email         = ["acekane1@gmail.com"]
-  spec.description   = "Create beautiful Javascript charts with one line of Ruby"
-  spec.summary       = "Create beautiful Javascript charts with one line of Ruby"
+  spec.description   = "Create beautiful JavaScript charts with one line of Ruby"
+  spec.summary       = "Create beautiful JavaScript charts with one line of Ruby"
   spec.homepage      = "http://chartkick.com"
   spec.license       = "MIT"
 

data/lib/chartkick/engine.rb

@@ -1,8 +1,12 @@
 module Chartkick
   class Engine < ::Rails::Engine
     initializer "precompile", group: :all do |app|
-      # use a proc instead of a string
-      app.config.assets.precompile << proc { |path| path == "chartkick.js" }
+      if Rails::VERSION::MAJOR >= 5
+        app.config.assets.precompile << "chartkick.js"
+      else
+        # use a proc instead of a string
+        app.config.assets.precompile << proc { |path| path == "chartkick.js" }
+      end
     end
 
     initializer "helper" do

data/lib/chartkick/helper.rb

@@ -42,10 +42,11 @@ module Chartkick
       options = chartkick_deep_merge(Chartkick.options, options)
       element_id = options.delete(:id) || "chart-#{@chartkick_chart_id += 1}"
       height = options.delete(:height) || "300px"
+      width = options.delete(:width) || "100%"
       # content_for: nil must override default
       content_for = options.key?(:content_for) ? options.delete(:content_for) : Chartkick.content_for
 
-      html = (options.delete(:html) || %(<div id="%{id}" style="height: %{height}; 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)}
+      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)}
 
       js = <<JS
 <script type="text/javascript">

data/lib/chartkick/version.rb

@@ -1,3 +1,3 @@
 module Chartkick
-  VERSION = "1.4.1"
+  VERSION = "1.4.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: chartkick
 version: !ruby/object:Gem::Version
-  version: 1.4.1
+  version: 1.4.2
 platform: ruby
 authors:
 - Andrew Kane
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-09-08 00:00:00.000000000 Z
+date: 2016-02-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -52,7 +52,7 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-description: Create beautiful Javascript charts with one line of Ruby
+description: Create beautiful JavaScript charts with one line of Ruby
 email:
 - acekane1@gmail.com
 executables: []
@@ -95,10 +95,10 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.5
+rubygems_version: 2.5.2
 signing_key: 
 specification_version: 4
-summary: Create beautiful Javascript charts with one line of Ruby
+summary: Create beautiful JavaScript charts with one line of Ruby
 test_files:
 - test/chartkick_test.rb
 - test/test_helper.rb