chartkick 1.5.2 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 82cdbb6b87fdf0a3c87795d5c28eb6eea52c2119
-  data.tar.gz: 3ffaddfafdd92df4ca5d71ebfc077fa4951301dd
+  metadata.gz: 31531f1eb7383e7a1d3a2a38a310bc278f8217f6
+  data.tar.gz: d8428bfeb19b0075d09abc12402e9df9bec763ea
 SHA512:
-  metadata.gz: 72048eaf74b2d83f1dfb46626eae9a351c1dfdd2f71ac42df9a84c7c66e9c6a4944689698eeff74c87b7f0e1e13eea4ef42270c185ff02c147c5efeed9003c9a
-  data.tar.gz: 176fe037e0ec8e0f149e73e267cc8cb0656709576ba33addca4494d1b64346e67316fac2f69a0d9631a69f5873d9dc360410ecdbf07cf240dccfd2423d226253
+  metadata.gz: 5f38b97716209f4e3f8b412d40325a86a644669852e86e5f6ebe0b589d51806dd608b47110d3b53f86102894ede129cd8594e32476cfd17386ae2d9104dd7915
+  data.tar.gz: 1bd3ab66e1615588a03308bd537e2216baf8c78229e07b39080ec6d57f11493941f266ba006d388e0ff0ac028de864f8a79f6d288c0f84d7785d45db1765b6b0

data/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 2.0.0
+
+- Chart.js is now the default adapter - yay open source!
+- Axis types are automatically detected - no need for `discrete: true`
+- Better date support
+- New JavaScript API
+
 ## 1.5.2
 
 - Fixed Sprockets error

data/README.md

@@ -4,7 +4,7 @@ Create beautiful JavaScript charts with one line of Ruby. No more fighting with
 
 [See it in action](http://ankane.github.io/chartkick/)
 
-Works with Rails, Sinatra and most browsers (including IE 6)
+**Chartkick 2.0 was just released!** See [instructions for upgrading](#20)
 
 :two_hearts: A perfect companion to [groupdate](https://github.com/ankane/groupdate), [hightop](https://github.com/ankane/hightop), and [active_median](https://github.com/ankane/active_median)
 
@@ -42,19 +42,19 @@ Area chart
 <%= area_chart Visit.group_by_minute(:created_at).maximum(:load_time) %>
 ```
 
-Scatter chart
+Scatter chart - *Google Charts and Highcharts*
 
 ```erb
 <%= scatter_chart City.pluck(:size, :population) %>
 ```
 
-Geo chart
+Geo chart - *Google Charts*
 
 ```erb
 <%= geo_chart Medal.group(:country).count %>
 ```
 
-Timeline
+Timeline - *Google Charts*
 
 ```erb
 <%= timeline [
@@ -226,6 +226,15 @@ Next, choose your charting library.
 
 **Note:** In the instructions below, `application.js` must be included **before** the helper methods in your views, unless using the `:content_for` option.
 
+#### Chart.js
+
+In `application.js`, add:
+
+```js
+//= require Chart.bundle
+//= require chartkick
+```
+
 #### Google Charts
 
 In `application.js`, add:
@@ -253,15 +262,6 @@ In `application.js`, add:
 
 Works with Highcharts 2.1+
 
-#### Chart.js (in beta)
-
-In `application.js`, add:
-
-```js
-//= require Chart.bundle
-//= require chartkick
-```
-
 ### For Rails 2.3 and 3.0
 
 You must include `chartkick.js` manually.  [Download it here](https://raw.github.com/ankane/chartkick/master/app/assets/javascripts/chartkick.js)
@@ -301,10 +301,42 @@ To specify a language for Google Charts, add:
 
 **before** the JavaScript files.
 
+## JavaScript API
+
+Access a chart with:
+
+```javascript
+var chart = Chartkick.charts["chart-id"];
+```
+
+Get the underlying chart object with:
+
+```javascript
+chart.getChartObject();
+```
+
+You can also use:
+
+```javascript
+chart.getElement();
+chart.getData();
+chart.getOptions();
+```
+
 ## No Ruby? No Problem
 
 Check out [chartkick.js](https://github.com/ankane/chartkick.js)
 
+## Upgrading
+
+### 2.0
+
+Breaking changes
+
+- Chart.js is now the default adapter if multiple are loaded - yay open source!
+- Axis types are automatically detected - no need for `discrete: true`
+- Better date support - dates are no longer treated as UTC
+
 ## Credits
 
 Chartkick uses [iso8601.js](https://github.com/Do/iso8601.js) to parse dates and times.

data/app/assets/javascripts/chartkick.js

@@ -2,7 +2,7 @@
  * Chartkick.js
  * Create beautiful JavaScript charts with minimal code
  * https://github.com/ankane/chartkick.js
- * v1.5.1
+ * v2.0.0
  * MIT License
  */
 
@@ -14,7 +14,7 @@
   var config = window.Chartkick || {};
   var Chartkick, ISO8601_PATTERN, DECIMAL_SEPARATOR, adapters = [];
   var DATE_PATTERN = /^(\d\d\d\d)(\-)?(\d\d)(\-)?(\d\d)$/i;
-  var adapters = [];
+  var GoogleChartsAdapter, HighchartsAdapter, ChartjsAdapter;
 
   // helpers
 
@@ -68,7 +68,8 @@
     if (type !== '[object String]') {
       return;
     }
-    if (matches = input.match(ISO8601_PATTERN)) {
+    matches = input.match(ISO8601_PATTERN);
+    if (matches) {
       year = parseInt(matches[1], 10);
       month = parseInt(matches[3], 10) - 1;
       day = parseInt(matches[5], 10);
@@ -211,7 +212,7 @@
     if (typeof n !== "object") {
       if (typeof n === "number") {
         n = new Date(n * 1000); // ms
-      } else if (config.smarterDates && (matches = n.match(DATE_PATTERN))) {
+      } else if ((matches = n.match(DATE_PATTERN))) {
         year = parseInt(matches[1], 10);
         month = parseInt(matches[3], 10) - 1;
         day = parseInt(matches[5], 10);
@@ -249,7 +250,7 @@
 
   function loadAdapters() {
     if (!HighchartsAdapter && "Highcharts" in window) {
-      var HighchartsAdapter = new function () {
+      HighchartsAdapter = new function () {
         var Highcharts = window.Highcharts;
 
         this.name = "highcharts";
@@ -385,7 +386,7 @@
         };
 
         this.renderColumnChart = function (chart, chartType) {
-          var chartType = chartType || "column";
+          chartType = chartType || "column";
           var series = chart.data;
           var options = jsOptions(series, chart.options), i, j, s, d, rows = [];
           options.chart.type = chartType;
@@ -441,7 +442,7 @@
       adapters.push(HighchartsAdapter);
     }
     if (!GoogleChartsAdapter && window.google && window.google.setOnLoadCallback) {
-      var GoogleChartsAdapter = new function () {
+      GoogleChartsAdapter = new function () {
         var google = window.google;
 
         this.name = "google";
@@ -453,7 +454,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));
             if (call) {
               cb.callback();
               callbacks.splice(i, 1);
@@ -557,7 +558,7 @@
         var setXtitle = function (options, title) {
           options.hAxis.title = title;
           options.hAxis.titleTextStyle.italic = false;
-        }
+        };
 
         var setYtitle = function (options, title) {
           options.vAxis.title = title;
@@ -769,7 +770,7 @@
       adapters.push(GoogleChartsAdapter);
     }
     if (!ChartjsAdapter && "Chart" in window) {
-      var ChartjsAdapter = new function () {
+      ChartjsAdapter = new function () {
         var Chart = window.Chart;
 
         this.name = "chartjs";
@@ -832,6 +833,16 @@
           options.scales.yAxes[0].ticks.max = max;
         };
 
+        var setBarMin = function (options, min) {
+          if (min !== null) {
+            options.scales.xAxes[0].ticks.min = min;
+          }
+        };
+
+        var setBarMax = function (options, max) {
+          options.scales.xAxes[0].ticks.max = max;
+        };
+
         var setStacked = function (options, stacked) {
           options.scales.xAxes[0].stacked = !!stacked;
           options.scales.yAxes[0].stacked = !!stacked;
@@ -889,6 +900,8 @@
           var dayOfWeek;
           var month = true;
           var year = true;
+          var hour = true;
+          var minute = true;
           var detectType = (chartType === "line" || chartType === "area") && !chart.options.discrete;
 
           var series = chart.data;
@@ -917,11 +930,10 @@
           }
 
           var rows2 = [];
-          for (var j = 0; j < series.length; j++) {
+          for (j = 0; j < series.length; j++) {
             rows2.push([]);
           }
 
-          var day = true;
           var value;
           var k;
           for (k = 0; k < sortedLabels.length; k++) {
@@ -936,17 +948,19 @@
               week = week && isWeek(value, dayOfWeek);
               month = month && isMonth(value);
               year = year && isYear(value);
+              hour = hour && isHour(value);
+              minute = minute && isMinute(value);
             } else {
               value = i;
             }
             labels.push(value);
-            for (var j = 0; j < series.length; j++) {
-              rows2[j].push(rows[i][j])
+            for (j = 0; j < series.length; j++) {
+              rows2[j].push(rows[i][j]);
             }
           }
 
-          for (var i = 0; i < series.length; i++) {
-            var s = series[i];
+          for (i = 0; i < series.length; i++) {
+            s = series[i];
 
             var backgroundColor = chartType !== "line" ? addOpacity(colors[i], 0.5) : colors[i];
 
@@ -989,6 +1003,13 @@
               } else if (day || timeDiff > 10) {
                 options.scales.xAxes[0].time.unit = "day";
                 step = 1;
+              } else if (hour) {
+                options.scales.xAxes[0].time.unit = "hour";
+                step = 1 / 24.0;
+              } else if (minute) {
+                options.scales.xAxes[0].time.displayFormats = {minute: "h:mm a"};
+                options.scales.xAxes[0].time.unit = "minute";
+                step = 1 / 24.0 / 60.0;
               }
 
               if (step && timeDiff > 0) {
@@ -1000,8 +1021,14 @@
               }
             }
 
-            if (!options.scales.xAxes[0].time.tooltipFormat && day) {
-              options.scales.xAxes[0].time.tooltipFormat = "ll";
+            if (!options.scales.xAxes[0].time.tooltipFormat) {
+              if (day) {
+                options.scales.xAxes[0].time.tooltipFormat = "ll";
+              } else if (hour) {
+                options.scales.xAxes[0].time.tooltipFormat = "MMM D, h a";
+              } else if (minute) {
+                options.scales.xAxes[0].time.tooltipFormat = "h:mm a";
+              }
             }
           }
 
@@ -1019,6 +1046,11 @@
             // TODO fix area stacked
             // areaOptions.stacked = true;
           }
+          // fix for https://github.com/chartjs/Chart.js/issues/2441
+          if (!chart.options.max && allZeros(chart.data)) {
+            chart.options.max = 1;
+          }
+
           var options = jsOptions(chart.data, merge(areaOptions, chart.options));
 
           var data = createDataTable(chart, options, chartType || "line");
@@ -1026,7 +1058,7 @@
           options.scales.xAxes[0].type = chart.options.discrete ? "category" : "time";
 
           drawChart(chart, "line", data, options);
-        }
+        };
 
         this.renderPieChart = function (chart) {
           var options = merge(baseOptions, chart.options.library || {});
@@ -1050,14 +1082,19 @@
           };
 
           drawChart(chart, "pie", data, options);
-        }
+        };
 
         this.renderColumnChart = function (chart, chartType) {
-          var options = jsOptions(chart.data, chart.options);
+          var options;
+          if (chartType === "bar") {
+            options = jsOptionsFunc(merge(baseOptions, defaultOptions), hideLegend, setBarMin, setBarMax, setStacked)(chart.data, chart.options);
+          } else {
+            options = jsOptions(chart.data, chart.options);
+          }
           var data = createDataTable(chart, options, "column");
           setLabelSize(chart, data, options);
           drawChart(chart, (chartType === "bar" ? "horizontalBar" : "bar"), data, options);
-        }
+        };
 
         var self = this;
 
@@ -1066,11 +1103,11 @@
         };
 
         this.renderBarChart = function (chart) {
-          self.renderColumnChart(chart, "bar")
-        }
-      }
+          self.renderColumnChart(chart, "bar");
+        };
+      };
 
-      adapters.push(ChartjsAdapter);
+      adapters.unshift(ChartjsAdapter);
     }
   }
 
@@ -1081,9 +1118,7 @@
     fnName = "render" + chartType;
     adapterName = chart.options.adapter;
 
-    if (adapters.length == 0) {
-      loadAdapters();
-    }
+    loadAdapters();
 
     for (i = 0; i < adapters.length; i++) {
       adapter = adapters[i];
@@ -1119,8 +1154,16 @@
     return r;
   };
 
+  function isMinute(d) {
+    return d.getMilliseconds() === 0 && d.getSeconds() === 0;
+  }
+
+  function isHour(d) {
+    return isMinute(d) && d.getMinutes() === 0;
+  }
+
   function isDay(d) {
-    return d.getMilliseconds() + d.getSeconds() + d.getMinutes() + d.getHours() === 0;
+    return isHour(d) && d.getHours() === 0;
   }
 
   function isWeek(d, dayOfWeek) {
@@ -1139,6 +1182,19 @@
     return !isNaN(toDate(obj)) && toStr(obj).length >= 6;
   }
 
+  function allZeros(data) {
+    var i, j, d;
+    for (i = 0; i < data.length; i++) {
+      d = data[i].data;
+      for (j = 0; j < d.length; j++) {
+        if (d[j][1] != 0) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
   function detectDiscrete(series) {
     var i, j, data;
     for (i = 0; i < series.length; i++) {
@@ -1162,7 +1218,7 @@
     } else {
       opts.hideLegend = false;
     }
-    if (config.smarterDiscrete && (opts.discrete === null || opts.discrete === undefined)) {
+    if ((opts.discrete === null || opts.discrete === undefined)) {
       opts.discrete = detectDiscrete(series);
     }
     if (opts.discrete) {
@@ -1242,6 +1298,18 @@
     chart.element = element;
     chart.options = opts || {};
     chart.dataSource = dataSource;
+    chart.getElement = function () {
+      return element;
+    };
+    chart.getData = function () {
+      return chart.data;
+    };
+    chart.getOptions = function () {
+      return opts || {};
+    };
+    chart.getChartObject = function () {
+      return chart.chart;
+    };
     Chartkick.charts[element.id] = chart;
     fetchDataSource(chart, callback);
   }
@@ -1276,5 +1344,9 @@
     charts: {}
   };
 
-  window.Chartkick = Chartkick;
+  if (typeof module === "object" && typeof module.exports === "object") {
+    module.exports = Chartkick;
+  } else {
+    window.Chartkick = Chartkick;
+  }
 }(window));

data/lib/chartkick/version.rb

@@ -1,3 +1,3 @@
 module Chartkick
-  VERSION = "1.5.2"
+  VERSION = "2.0.0"
 end