chartkick 2.1.3 → 2.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1e8ed2c685106748108bd6e6e93cb468280b4b3d
-  data.tar.gz: e34741a63fde19a62466eb7624555664f62d66a8
+  metadata.gz: 9e1f932c952cad32abefb5bdfe6d3920ede7a2a2
+  data.tar.gz: 89b2fe66eb366657306bb063f9937e30d4d6c380
 SHA512:
-  metadata.gz: 8e613bf3f0291940255a08d8e4631b0dd218da32bdd9a57251ec41284a61a1fd76698621ca8bfa571a7a0d88397939d8af64bc96cb07c470c9e7cb57afc4555c
-  data.tar.gz: 3f4a411acbfc6a4968621c701543f8f9e42c2ee978d996b36462bc675bf15d8f36139143c412e5020d653373b9cf6fb20b9cb6c454be552577c7c73d0f396010
+  metadata.gz: 2e3f98e5f9c0066f3d478b8097d7a8562ee0ca5ad0c9138561a8a4ac598019c66721b955f80742ffd66aa02dd6303cf80a04da426617348abe7913798adabb1d
+  data.tar.gz: cca4ae3d594a9e71f1a16d4d20b10d103a7c8455704bbe575bb7bfb2884dddf0b9ca591c092cf1b2768b03e7f2749337f2a7a2a5f8f90468f832b616745715e3

data/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 2.2.0
+
+- Updated Chartkick.js to 2.2.0
+- Improved JavaScript API
+- Added `download` option - *Chart.js only*
+- Added `refresh` option
+- Added `donut` option to pie chart
+
 ## 2.1.3
 
 - Updated Chartkick.js to 2.1.2 - fixes missing zero values for Chart.js

data/README.md

@@ -146,13 +146,25 @@ Axis titles
 <%= line_chart data, xtitle: "Time", ytitle: "Population" %>
 ```
 
+Donut chart
+
+```erb
+<%= pie_chart data, donut: true %>
+```
+
+Refresh data from a remote source every `n` seconds
+
+```erb
+<%= line_chart url, refresh: 60 %>
+```
+
 You can pass options directly to the charting library with:
 
 ```erb
 <%= line_chart data, library: {backgroundColor: "#eee"} %>
 ```
 
-See the documentation for [Google Charts](https://developers.google.com/chart/interactive/docs/gallery), [Highcharts](http://api.highcharts.com/highcharts), and [Chart.js](http://www.chartjs.org/docs/) for more info.
+See the documentation for [Chart.js](http://www.chartjs.org/docs/), [Google Charts](https://developers.google.com/chart/interactive/docs/gallery), and [Highcharts](http://api.highcharts.com/highcharts) for more info.
 
 ### Global Options
 
@@ -186,6 +198,24 @@ Then, in your layout:
 
 This is great for including all of your JavaScript at the bottom of the page.
 
+### Download Charts
+
+*Chart.js only*
+
+Give users the ability to download charts. It all happens in the browser - no server-side code needed.
+
+```erb
+<%= line_chart data, download: true %>
+```
+
+Set the filename
+
+```erb
+<%= line_chart data, download: "boom" %>
+```
+
+**Note:** Safari will open the image in a new window instead of downloading.
+
 ### Data
 
 Pass data as a Hash or Array
@@ -289,21 +319,47 @@ If more than one charting library is loaded, choose between them with:
 Access a chart with:
 
 ```javascript
-var chart = Chartkick.charts["chart-id"];
+var chart = Chartkick.charts["chart-id"]
 ```
 
 Get the underlying chart object with:
 
 ```javascript
-chart.getChartObject();
+chart.getChartObject()
 ```
 
 You can also use:
 
 ```javascript
-chart.getElement();
-chart.getData();
-chart.getOptions();
+chart.getElement()
+chart.getData()
+chart.getOptions()
+```
+
+Update the data with:
+
+```javascript
+chart.updateData(newData)
+```
+
+You can also specify new options:
+
+```javascript
+chart.updateData(newData, newOptions)
+```
+
+Refresh the data from a remote source:
+
+```javascript
+chart.refreshData()
+```
+
+Loop over charts with:
+
+```javascript
+Chartkick.eachChart( function(chart) {
+  // do something
+})
 ```
 
 ## No Ruby? No Problem

data/app/assets/javascripts/chartkick.js

@@ -2,7 +2,7 @@
  * Chartkick.js
  * Create beautiful charts with one line of JavaScript
  * https://github.com/ankane/chartkick.js
- * v2.1.2
+ * v2.2.0
  * MIT License
  */
 
@@ -105,13 +105,12 @@
   }
 
   function jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle) {
-    return function (series, opts, chartOptions) {
+    return function (chart, opts, chartOptions) {
+      var series = chart.data;
       var options = merge({}, defaultOptions);
       options = merge(options, chartOptions || {});
 
-      // hide legend
-      // this is *not* an external option!
-      if (opts.hideLegend) {
+      if (chart.hideLegend) {
         hideLegend(options);
       }
 
@@ -204,18 +203,79 @@
     }
   }
 
-  function fetchDataSource(chart, callback) {
-    if (typeof chart.dataSource === "string") {
-      getJSON(chart.element, chart.dataSource, function (data, textStatus, jqXHR) {
+  function fetchDataSource(chart, callback, dataSource) {
+    if (typeof dataSource === "string") {
+      getJSON(chart.element, dataSource, function (data, textStatus, jqXHR) {
         chart.data = data;
         errorCatcher(chart, callback);
       });
     } else {
-      chart.data = chart.dataSource;
+      chart.data = dataSource;
       errorCatcher(chart, callback);
     }
   }
 
+  function addDownloadButton(chart) {
+    var element = chart.element;
+    var link = document.createElement("a");
+    link.download = chart.options.download === true ? "chart.png" : chart.options.download; // http://caniuse.com/download
+    link.style.position = "absolute";
+    link.style.top = "20px";
+    link.style.right = "20px";
+    link.style.zIndex = 1000;
+    link.style.lineHeight = "20px";
+    link.target = "_blank"; // for safari
+    var image = document.createElement("img");
+    image.alt = "Download";
+    image.style.border = "none";
+    // icon from font-awesome
+    // http://fa2png.io/
+    image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAABCFBMVEUAAADMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMywEsqxAAAAV3RSTlMAAQIDBggJCgsMDQ4PERQaHB0eISIjJCouLzE0OTo/QUJHSUpLTU5PUllhYmltcHh5foWLjI+SlaCio6atr7S1t7m6vsHHyM7R2tze5Obo7fHz9ff5+/1hlxK2AAAA30lEQVQYGUXBhVYCQQBA0TdYWAt2d3d3YWAHyur7/z9xgD16Lw0DW+XKx+1GgX+FRzM3HWQWrHl5N/oapW5RPe0PkBu+UYeICvozTWZVK23Ao04B79oJrOsJDOoxkZoQPWgX29pHpCZEk7rEvQYiNSFq1UMqvlCjJkRBS1R8hb00Vb/TajtBL7nTHE1X1vyMQF732dQhyF2o6SAwrzP06iUQzvwsArlnzcOdrgBhJyHa1QOgO9U1GsKuvjUTjavliZYQ8nNPapG6sap/3nrIdJ6bOWzmX/fy0XVpfzZP3S8OJT3g9EEiJwAAAABJRU5ErkJggg==";
+    link.appendChild(image);
+    element.style.position = "relative";
+
+    chart.downloadAttached = true;
+
+    // mouseenter
+    addEvent(element, "mouseover", function(e) {
+      var related = e.relatedTarget;
+      // check download option again to ensure it wasn't changed
+      if (!related || (related !== this && !childOf(this, related)) && chart.options.download) {
+        link.href = chart.toImage();
+        element.appendChild(link);
+      }
+    });
+
+    // mouseleave
+    addEvent(element, "mouseout", function(e) {
+      var related = e.relatedTarget;
+      if (!related || (related !== this && !childOf(this, related))) {
+        if (link.parentNode) {
+          link.parentNode.removeChild(link);
+        }
+      }
+    });
+  }
+
+  // http://stackoverflow.com/questions/10149963/adding-event-listener-cross-browser
+  function addEvent(elem, event, fn) {
+    if (elem.addEventListener) {
+      elem.addEventListener(event, fn, false);
+    } else {
+      elem.attachEvent("on" + event, function() {
+        // set the this pointer same as addEventListener when fn is called
+        return(fn.call(elem, window.event));
+      });
+    }
+  }
+
+  // https://gist.github.com/shawnbot/4166283
+  function childOf(p, c) {
+    if (p === c) return false;
+    while (c && c !== p) c = c.parentNode;
+    return c === p;
+  }
+
   // type conversions
 
   function toStr(n) {
@@ -361,8 +421,8 @@
               }
             };
           }
-          var options = jsOptions(chart.data, chart.options, chartOptions), data, i, j;
-          options.xAxis.type = chart.options.discrete ? "category" : "datetime";
+          var options = jsOptions(chart, chart.options, chartOptions), data, i, j;
+          options.xAxis.type = chart.discrete ? "category" : "datetime";
           if (!options.chart.type) {
             options.chart.type = chartType;
           }
@@ -371,7 +431,7 @@
           var series = chart.data;
           for (i = 0; i < series.length; i++) {
             data = series[i].data;
-            if (!chart.options.discrete) {
+            if (!chart.discrete) {
               for (j = 0; j < data.length; j++) {
                 data[j][0] = data[j][0].getTime();
               }
@@ -379,16 +439,16 @@
             series[i].marker = {symbol: "circle"};
           }
           options.series = series;
-          new Highcharts.Chart(options);
+          chart.chart = new Highcharts.Chart(options);
         };
 
         this.renderScatterChart = function (chart) {
           var chartOptions = {};
-          var options = jsOptions(chart.data, chart.options, chartOptions);
+          var options = jsOptions(chart, chart.options, chartOptions);
           options.chart.type = "scatter";
           options.chart.renderTo = chart.element.id;
           options.series = chart.data;
-          new Highcharts.Chart(options);
+          chart.chart = new Highcharts.Chart(options);
         };
 
         this.renderPieChart = function (chart) {
@@ -396,6 +456,9 @@
           if (chart.options.colors) {
             chartOptions.colors = chart.options.colors;
           }
+          if (chart.options.donut) {
+            chartOptions.plotOptions = {pie: {innerSize: "50%"}};
+          }
           var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
           options.chart.renderTo = chart.element.id;
           options.series = [{
@@ -403,13 +466,13 @@
             name: chart.options.label || "Value",
             data: chart.data
           }];
-          new Highcharts.Chart(options);
+          chart.chart = new Highcharts.Chart(options);
         };
 
         this.renderColumnChart = function (chart, chartType) {
           chartType = chartType || "column";
           var series = chart.data;
-          var options = jsOptions(series, chart.options), i, j, s, d, rows = [];
+          var options = jsOptions(chart, chart.options), i, j, s, d, rows = [];
           options.chart.type = chartType;
           options.chart.renderTo = chart.element.id;
 
@@ -447,7 +510,7 @@
           }
           options.series = newSeries;
 
-          new Highcharts.Chart(options);
+          chart.chart = new Highcharts.Chart(options);
         };
 
         var self = this;
@@ -652,8 +715,8 @@
 
         this.renderLineChart = function (chart) {
           waitForLoaded(function () {
-            var options = jsOptions(chart.data, chart.options);
-            var data = createDataTable(chart.data, chart.options.discrete ? "string" : "datetime");
+            var options = jsOptions(chart, chart.options);
+            var data = createDataTable(chart.data, chart.discrete ? "string" : "datetime");
             chart.chart = new google.visualization.LineChart(chart.element);
             resize(function () {
               chart.chart.draw(data, options);
@@ -672,6 +735,9 @@
             if (chart.options.colors) {
               chartOptions.colors = chart.options.colors;
             }
+            if (chart.options.donut) {
+              chartOptions.pieHole = 0.5;
+            }
             var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
 
             var data = new google.visualization.DataTable();
@@ -688,7 +754,7 @@
 
         this.renderColumnChart = function (chart) {
           waitForLoaded(function () {
-            var options = jsOptions(chart.data, chart.options);
+            var options = jsOptions(chart, chart.options);
             var data = createDataTable(chart.data, "string");
             chart.chart = new google.visualization.ColumnChart(chart.element);
             resize(function () {
@@ -706,7 +772,7 @@
                 }
               }
             };
-            var options = jsOptionsFunc(defaultOptions, hideLegend, setBarMin, setBarMax, setStacked, setXtitle, setYtitle)(chart.data, chart.options, chartOptions);
+            var options = jsOptionsFunc(defaultOptions, hideLegend, setBarMin, setBarMax, setStacked, setXtitle, setYtitle)(chart, chart.options, chartOptions);
             var data = createDataTable(chart.data, "string");
             chart.chart = new google.visualization.BarChart(chart.element);
             resize(function () {
@@ -722,8 +788,8 @@
               pointSize: 0,
               areaOpacity: 0.5
             };
-            var options = jsOptions(chart.data, chart.options, chartOptions);
-            var data = createDataTable(chart.data, chart.options.discrete ? "string" : "datetime");
+            var options = jsOptions(chart, chart.options, chartOptions);
+            var data = createDataTable(chart.data, chart.discrete ? "string" : "datetime");
             chart.chart = new google.visualization.AreaChart(chart.element);
             resize(function () {
               chart.chart.draw(data, options);
@@ -756,7 +822,7 @@
         this.renderScatterChart = function (chart) {
           waitForLoaded(function () {
             var chartOptions = {};
-            var options = jsOptions(chart.data, chart.options, chartOptions);
+            var options = jsOptions(chart, chart.options, chartOptions);
             var data = createDataTable(chart.data, "number");
 
             chart.chart = new google.visualization.ScatterChart(chart.element);
@@ -803,7 +869,10 @@
 
         var baseOptions = {
           maintainAspectRatio: false,
-          animation: false
+          animation: false,
+          tooltips: {
+            displayColors: false
+          }
         };
 
         var defaultOptions = {
@@ -835,10 +904,7 @@
               }
             ]
           },
-          legend: {},
-          tooltips: {
-            displayColors: false
-          }
+          legend: {}
         };
 
         // http://there4.io/2012/05/02/google-chart-color-list/
@@ -888,9 +954,13 @@
         };
 
         var drawChart = function(chart, type, data, options) {
-          chart.element.innerHTML = "<canvas></canvas>";
-          var ctx = chart.element.getElementsByTagName("CANVAS")[0];
+          if (chart.chart) {
+            chart.chart.destroy();
+          } else {
+            chart.element.innerHTML = "<canvas></canvas>";
+          }
 
+          var ctx = chart.element.getElementsByTagName("CANVAS")[0];
           chart.chart = new Chart(ctx, {
             type: type,
             data: data,
@@ -934,7 +1004,7 @@
           var year = true;
           var hour = true;
           var minute = true;
-          var detectType = (chartType === "line" || chartType === "area") && !chart.options.discrete;
+          var detectType = (chartType === "line" || chartType === "area") && !chart.discrete;
 
           var series = chart.data;
 
@@ -988,7 +1058,7 @@
             labels.push(value);
             for (j = 0; j < series.length; j++) {
               // Chart.js doesn't like undefined
-              rows2[j].push((typeof rows[i][j] === "undefined") ? null : rows[i][j]);
+              rows2[j].push(rows[i][j] === undefined ? null : rows[i][j]);
             }
           }
 
@@ -1085,17 +1155,21 @@
             chart.options.max = 1;
           }
 
-          var options = jsOptions(chart.data, merge(areaOptions, chart.options));
+          var options = jsOptions(chart, merge(areaOptions, chart.options));
 
           var data = createDataTable(chart, options, chartType || "line");
 
-          options.scales.xAxes[0].type = chart.options.discrete ? "category" : "time";
+          options.scales.xAxes[0].type = chart.discrete ? "category" : "time";
 
           drawChart(chart, "line", data, options);
         };
 
         this.renderPieChart = function (chart) {
-          var options = merge(baseOptions, chart.options.library || {});
+          var options = merge({}, baseOptions);
+          if (chart.options.donut) {
+            options.cutoutPercentage = 50;
+          }
+          options = merge(options, chart.options.library || {});
 
           var labels = [];
           var values = [];
@@ -1121,9 +1195,9 @@
         this.renderColumnChart = function (chart, chartType) {
           var options;
           if (chartType === "bar") {
-            options = jsOptionsFunc(merge(baseOptions, defaultOptions), hideLegend, setBarMin, setBarMax, setStacked, setXtitle, setYtitle)(chart.data, chart.options);
+            options = jsOptionsFunc(merge(baseOptions, defaultOptions), hideLegend, setBarMin, setBarMax, setStacked, setXtitle, setYtitle)(chart, chart.options);
           } else {
-            options = jsOptions(chart.data, chart.options);
+            options = jsOptions(chart, chart.options);
           }
           var data = createDataTable(chart, options, "column");
           setLabelSize(chart, data, options);
@@ -1141,7 +1215,7 @@
         };
 
         this.renderScatterChart = function (chart) {
-          var options = jsOptions(chart.data, chart.options);
+          var options = jsOptions(chart, chart.options);
 
           var colors = chart.options.colors || defaultColors;
 
@@ -1180,9 +1254,16 @@
     }
   }
 
+  function renderChart(chartType, chart) {
+    callAdapter(chartType, chart);
+    if (chart.options.download && !chart.downloadAttached && chart.adapter === "chartjs") {
+      addDownloadButton(chart);
+    }
+  }
+
   // TODO remove chartType if cross-browser way
   // to get the name of the chart class
-  function renderChart(chartType, chart) {
+  function callAdapter(chartType, chart) {
     var i, adapter, fnName, adapterName;
     fnName = "render" + chartType;
     adapterName = chart.options.adapter;
@@ -1192,6 +1273,7 @@
     for (i = 0; i < adapters.length; i++) {
       adapter = adapters[i];
       if ((!adapterName || adapterName === adapter.name) && isFunction(adapter[fnName])) {
+        chart.adapter = adapter.name;
         return adapter[fnName](chart);
       }
     }
@@ -1277,20 +1359,25 @@
     return false;
   }
 
-  function processSeries(series, opts, keyType) {
+  function processSeries(chart, keyType) {
     var i;
 
+    var opts = chart.options;
+    var series = chart.data;
+
     // see if one series or multiple
     if (!isArray(series) || typeof series[0] !== "object" || isArray(series[0])) {
       series = [{name: opts.label || "Value", data: series}];
-      opts.hideLegend = true;
+      chart.hideLegend = true;
     } else {
-      opts.hideLegend = false;
+      chart.hideLegend = false;
     }
     if ((opts.discrete === null || opts.discrete === undefined)) {
-      opts.discrete = detectDiscrete(series);
+      chart.discrete = detectDiscrete(series);
+    } else {
+      chart.discrete = opts.discrete;
     }
-    if (opts.discrete) {
+    if (chart.discrete) {
       keyType = "string";
     }
 
@@ -1321,12 +1408,12 @@
   }
 
   function processLineData(chart) {
-    chart.data = processSeries(chart.data, chart.options, "datetime");
+    chart.data = processSeries(chart, "datetime");
     renderChart("LineChart", chart);
   }
 
   function processColumnData(chart) {
-    chart.data = processSeries(chart.data, chart.options, "string");
+    chart.data = processSeries(chart, "string");
     renderChart("ColumnChart", chart);
   }
 
@@ -1336,12 +1423,12 @@
   }
 
   function processBarData(chart) {
-    chart.data = processSeries(chart.data, chart.options, "string");
+    chart.data = processSeries(chart, "string");
     renderChart("BarChart", chart);
   }
 
   function processAreaData(chart) {
-    chart.data = processSeries(chart.data, chart.options, "datetime");
+    chart.data = processSeries(chart, "datetime");
     renderChart("AreaChart", chart);
   }
 
@@ -1351,7 +1438,7 @@
   }
 
   function processScatterData(chart) {
-    chart.data = processSeries(chart.data, chart.options, "number");
+    chart.data = processSeries(chart, "number");
     renderChart("ScatterChart", chart);
   }
 
@@ -1369,23 +1456,67 @@
         throw new Error("No element with id " + elementId);
       }
     }
+
     chart.element = element;
-    chart.options = opts || {};
+    opts = merge(Chartkick.options, opts || {});
+    chart.options = opts;
     chart.dataSource = dataSource;
+
+    // getters
     chart.getElement = function () {
       return element;
     };
+    chart.getDataSource = function () {
+      return chart.dataSource;
+    };
     chart.getData = function () {
       return chart.data;
     };
     chart.getOptions = function () {
-      return opts || {};
+      return chart.options;
     };
     chart.getChartObject = function () {
       return chart.chart;
     };
+
+    // functions
+    chart.updateData = function (dataSource, options) {
+      chart.dataSource = dataSource;
+      if (options) {
+        chart.options = merge(Chartkick.options, options);
+      }
+      fetchDataSource(chart, callback, dataSource);
+    };
+    chart.refreshData = function () {
+      if (typeof dataSource === "string") {
+        // prevent browser from caching
+        var sep = dataSource.indexOf("?") === -1 ? "?" : "&";
+        var url = dataSource + sep + "_=" + (new Date()).getTime();
+        fetchDataSource(chart, callback, url);
+      }
+    };
+    chart.stopRefresh = function () {
+      if (chart.intervalId) {
+        clearInterval(chart.intervalId);
+      }
+    };
+    chart.toImage = function () {
+      if (chart.adapter === "chartjs") {
+        return chart.chart.toBase64Image();
+      } else {
+        return null;
+      }
+    }
+
     Chartkick.charts[element.id] = chart;
-    fetchDataSource(chart, callback);
+
+    fetchDataSource(chart, callback, dataSource);
+
+    if (opts.refresh) {
+      chart.intervalId = setInterval( function () {
+        chart.refreshData();
+      }, opts.refresh * 1000);
+    }
   }
 
   // define classes
@@ -1422,7 +1553,15 @@
           config[key] = options[key];
         }
       }
-    }
+    },
+    eachChart: function (callback) {
+      for (var chartId in Chartkick.charts) {
+        if (Chartkick.charts.hasOwnProperty(chartId)) {
+          callback(Chartkick.charts[chartId]);
+        }
+      }
+    },
+    options: {}
   };
 
   if (typeof module === "object" && typeof module.exports === "object") {

data/lib/chartkick/version.rb

@@ -1,3 +1,3 @@
 module Chartkick
-  VERSION = "2.1.3"
+  VERSION = "2.2.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: chartkick
 version: !ruby/object:Gem::Version
-  version: 2.1.3
+  version: 2.2.0
 platform: ruby
 authors:
 - Andrew Kane
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-11-29 00:00:00.000000000 Z
+date: 2016-12-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler