chartkick 2.2.1 → 2.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: bea917f4b3d61b2de8ba5af5798e34f1237e981b
-  data.tar.gz: 749aa947e87dece001f7df69aa86c7b6b4c2f8c1
+  metadata.gz: 50c3b4007d5f0cdb2e0f190a841a70c7ccf9e792
+  data.tar.gz: d872ab6cca73563160825ac9112d44959b57324a
 SHA512:
-  metadata.gz: 819ce02a5a9a3582757725f6ade62cd002df49bfa607a567e3e807a8c515cacc0a165a29d2f9a3066cf1daa11184c02358df3b17302b1545b673ce52672ebbf6
-  data.tar.gz: 2984ed7e244ae92da1a3faa61c77c90f0a921a123cd718a48df6417a444285039d39563a08c979cf076a8a3ca827f31ca026a13b499a7f43c16dea8a75b8546a
+  metadata.gz: e28ff4ac40e81455c479e49b414cfafe34614097b0bdcae3fddc9b2da34d1ff9165d45f1fa71c86e22173cb9932e0d40765ac820ced017259f12a4ca084404d7
+  data.tar.gz: dbb9590ab3e3ca4732cf32de2244adb4381b444cc3161125d7d5182fddf0c795a944d4743594666aec15f4b11ca34d407b6ef60ffda54e5155b4e468da1829d1

data/CHANGELOG.md

@@ -1,4 +1,8 @@
-## 2.2.1 [unreleased]
+## 2.2.2
+
+- Updated Chartkick.js to 2.2.2
+
+## 2.2.1
 
 - Updated Chartkick.js to 2.2.1
 

data/README.md

@@ -119,7 +119,7 @@ Min and max values
 Colors
 
 ```erb
-<%= line_chart data, colors: ["pink", "#999"] %>
+<%= line_chart data, colors: ["#b00", "#666"] %>
 ```
 
 Stacked columns or bars
@@ -191,7 +191,7 @@ To set options for all of your charts, create an initializer `config/initializer
 ```ruby
 Chartkick.options = {
   height: "400px",
-  colors: ["pink", "#999"]
+  colors: ["#b00", "#666"]
 }
 ```
 
@@ -216,24 +216,6 @@ 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
@@ -258,6 +240,24 @@ Times can be a time, a timestamp, or a string (strings are parsed)
 <%= line_chart({20.day.ago => 5, 1368174456 => 4, "2013-05-07 00:00:00 UTC" => 7}) %>
 ```
 
+### 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.
+
 ## Installation
 
 Add this line to your application's Gemfile:

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.2.1
+ * v2.2.2
  * MIT License
  */
 
@@ -15,6 +15,7 @@
   var Chartkick, ISO8601_PATTERN, DECIMAL_SEPARATOR, adapters = [];
   var DATE_PATTERN = /^(\d\d\d\d)(\-)?(\d\d)(\-)?(\d\d)$/i;
   var GoogleChartsAdapter, HighchartsAdapter, ChartjsAdapter;
+  var pendingRequests = [], runningRequests = 0, maxRequests = 4;
 
   // helpers
 
@@ -166,6 +167,27 @@
     element.style.color = "#ff0000";
   }
 
+  function pushRequest(element, url, success) {
+    pendingRequests.push([element, url, success]);
+    runNext();
+  }
+
+  function runNext() {
+    if (runningRequests < maxRequests) {
+      var request = pendingRequests.shift()
+      if (request) {
+        runningRequests++;
+        getJSON(request[0], request[1], request[2]);
+        runNext();
+      }
+    }
+  }
+
+  function requestComplete() {
+    runningRequests--;
+    runNext();
+  }
+
   function getJSON(element, url, success) {
     ajaxCall(url, success, function (jqXHR, textStatus, errorThrown) {
       var message = (typeof errorThrown === "string") ? errorThrown : errorThrown.message;
@@ -181,13 +203,15 @@
         dataType: "json",
         url: url,
         success: success,
-        error: error
+        error: error,
+        complete: requestComplete
       });
     } else {
       var xhr = new XMLHttpRequest();
       xhr.open("GET", url, true);
       xhr.setRequestHeader("Content-Type", "application/json");
       xhr.onload = function () {
+        requestComplete();
         if (xhr.status === 200) {
           success(JSON.parse(xhr.responseText), xhr.statusText, xhr);
         } else {
@@ -209,7 +233,7 @@
 
   function fetchDataSource(chart, callback, dataSource) {
     if (typeof dataSource === "string") {
-      getJSON(chart.element, dataSource, function (data, textStatus, jqXHR) {
+      pushRequest(chart.element, dataSource, function (data, textStatus, jqXHR) {
         chart.rawData = data;
         errorCatcher(chart, callback);
       });
@@ -891,7 +915,24 @@
           waitForLoaded(function () {
             var chartOptions = {};
             var options = jsOptions(chart, chart.options, chartOptions);
-            var data = createDataTable(chart.data, "number");
+
+            var series = chart.data, rows2 = [], i, j, data, d;
+            for (i = 0; i < series.length; i++) {
+              d = series[i].data;
+              for (j = 0; j < d.length; j++) {
+                var row = new Array(series.length + 1);
+                row[0] = d[j][0];
+                row[i + 1] = d[j][1];
+                rows2.push(row);
+              }
+            }
+
+            var data = new google.visualization.DataTable();
+            data.addColumn("number", "");
+            for (i = 0; i < series.length; i++) {
+              data.addColumn("number", series[i].name);
+            }
+            data.addRows(rows2);
 
             chart.chart = new google.visualization.ScatterChart(chart.element);
             resize(function () {
@@ -1146,15 +1187,16 @@
           for (i = 0; i < series.length; i++) {
             s = series[i];
 
-            var backgroundColor = chartType !== "line" ? addOpacity(colors[i], 0.5) : colors[i];
+            var color = s.color || colors[i];
+            var backgroundColor = chartType !== "line" ? addOpacity(color, 0.5) : color;
 
             var dataset = {
               label: s.name,
               data: rows2[i],
               fill: chartType === "area",
-              borderColor: colors[i],
+              borderColor: color,
               backgroundColor: backgroundColor,
-              pointBackgroundColor: colors[i],
+              pointBackgroundColor: color,
               borderWidth: 2
             };
 
@@ -1308,7 +1350,9 @@
           self.renderColumnChart(chart, "bar");
         };
 
-        this.renderScatterChart = function (chart) {
+        this.renderScatterChart = function (chart, chartType) {
+          chartType = chartType || "line";
+
           var options = jsOptions(chart, chart.options);
 
           var colors = chart.options.colors || defaultColors;
@@ -1319,19 +1363,25 @@
             var s = series[i];
             var d = [];
             for (var j = 0; j < s.data.length; j++) {
-              d.push({
+              var point = {
                 x: toFloat(s.data[j][0]),
                 y: toFloat(s.data[j][1])
-              });
+              };
+              if (chartType === "bubble") {
+                point.r = toFloat(s.data[j][2]);
+              }
+              d.push(point);
             }
 
+            var color = s.color || colors[i];
+
             datasets.push({
               label: s.name,
               showLine: false,
               data: d,
-              borderColor: colors[i],
-              backgroundColor: colors[i],
-              pointBackgroundColor: colors[i]
+              borderColor: color,
+              backgroundColor: color,
+              pointBackgroundColor: color
             })
           }
 
@@ -1340,7 +1390,11 @@
           options.scales.xAxes[0].type = "linear";
           options.scales.xAxes[0].position = "bottom";
 
-          drawChart(chart, "line", data, options);
+          drawChart(chart, chartType, data, options);
+        };
+
+        this.renderBubbleChart = function (chart) {
+          this.renderScatterChart(chart, "bubble");
         };
       };
 
@@ -1390,8 +1444,12 @@
   var formatSeriesData = function (data, keyType) {
     var r = [], key, j;
     for (j = 0; j < data.length; j++) {
-      key = toFormattedKey(data[j][0], keyType);
-      r.push([key, toFloat(data[j][1])]);
+      if (keyType === "bubble") {
+        r.push([toFloat(data[j][0]), toFloat(data[j][1]), toFloat(data[j][2])]);
+      } else {
+        key = toFormattedKey(data[j][0], keyType);
+        r.push([key, toFloat(data[j][1])]);
+      }
     }
     if (keyType === "datetime") {
       r.sort(sortByTime);
@@ -1466,7 +1524,7 @@
     } else {
       chart.hideLegend = false;
     }
-    if ((opts.discrete === null || opts.discrete === undefined)) {
+    if ((opts.discrete === null || opts.discrete === undefined) && keyType !== "bubble" && keyType !== "number") {
       chart.discrete = detectDiscrete(series);
     } else {
       chart.discrete = opts.discrete;
@@ -1502,46 +1560,30 @@
   }
 
   function processLineData(chart) {
-    chart.data = processSeries(chart, "datetime");
-    renderChart("LineChart", chart);
+    return processSeries(chart, "datetime");
   }
 
   function processColumnData(chart) {
-    chart.data = processSeries(chart, "string");
-    renderChart("ColumnChart", chart);
-  }
-
-  function processPieData(chart) {
-    chart.data = processSimple(chart);
-    renderChart("PieChart", chart);
+    return processSeries(chart, "string");
   }
 
   function processBarData(chart) {
-    chart.data = processSeries(chart, "string");
-    renderChart("BarChart", chart);
+    return processSeries(chart, "string");
   }
 
   function processAreaData(chart) {
-    chart.data = processSeries(chart, "datetime");
-    renderChart("AreaChart", chart);
-  }
-
-  function processGeoData(chart) {
-    chart.data = processSimple(chart);
-    renderChart("GeoChart", chart);
+    return processSeries(chart, "datetime");
   }
 
   function processScatterData(chart) {
-    chart.data = processSeries(chart, "number");
-    renderChart("ScatterChart", chart);
+    return processSeries(chart, "number");
   }
 
-  function processTimelineData(chart) {
-    chart.data = processTime(chart);
-    renderChart("Timeline", chart);
+  function processBubbleData(chart) {
+    return processSeries(chart, "bubble");
   }
 
-  function setElement(chart, element, dataSource, opts, callback) {
+  function createChart(chartType, chart, element, dataSource, opts, processData) {
     var elementId;
     if (typeof element === "string") {
       elementId = element;
@@ -1556,6 +1598,12 @@
     chart.options = opts;
     chart.dataSource = dataSource;
 
+    if (!processData) {
+      processData = function (chart) {
+        return chart.rawData;
+      }
+    }
+
     // getters
     chart.getElement = function () {
       return element;
@@ -1576,6 +1624,11 @@
       return chart.adapter;
     };
 
+    var callback = function () {
+      chart.data = processData(chart);
+      renderChart(chartType, chart);
+    };
+
     // functions
     chart.updateData = function (dataSource, options) {
       chart.dataSource = dataSource;
@@ -1626,29 +1679,32 @@
   // define classes
 
   Chartkick = {
-    LineChart: function (element, dataSource, opts) {
-      setElement(this, element, dataSource, opts, processLineData);
+    LineChart: function (element, dataSource, options) {
+      createChart("LineChart", this, element, dataSource, options, processLineData);
+    },
+    PieChart: function (element, dataSource, options) {
+      createChart("PieChart", this, element, dataSource, options, processSimple);
     },
-    PieChart: function (element, dataSource, opts) {
-      setElement(this, element, dataSource, opts, processPieData);
+    ColumnChart: function (element, dataSource, options) {
+      createChart("ColumnChart", this, element, dataSource, options, processColumnData);
     },
-    ColumnChart: function (element, dataSource, opts) {
-      setElement(this, element, dataSource, opts, processColumnData);
+    BarChart: function (element, dataSource, options) {
+      createChart("BarChart", this, element, dataSource, options, processBarData);
     },
-    BarChart: function (element, dataSource, opts) {
-      setElement(this, element, dataSource, opts, processBarData);
+    AreaChart: function (element, dataSource, options) {
+      createChart("AreaChart", this, element, dataSource, options, processAreaData);
     },
-    AreaChart: function (element, dataSource, opts) {
-      setElement(this, element, dataSource, opts, processAreaData);
+    GeoChart: function (element, dataSource, options) {
+      createChart("GeoChart", this, element, dataSource, options, processSimple);
     },
-    GeoChart: function (element, dataSource, opts) {
-      setElement(this, element, dataSource, opts, processGeoData);
+    ScatterChart: function (element, dataSource, options) {
+      createChart("ScatterChart", this, element, dataSource, options, processScatterData);
     },
-    ScatterChart: function (element, dataSource, opts) {
-      setElement(this, element, dataSource, opts, processScatterData);
+    BubbleChart: function (element, dataSource, options) {
+      createChart("BubbleChart", this, element, dataSource, options, processBubbleData);
     },
-    Timeline: function (element, dataSource, opts) {
-      setElement(this, element, dataSource, opts, processTimelineData);
+    Timeline: function (element, dataSource, options) {
+      createChart("Timeline", this, element, dataSource, options, processTime);
     },
     charts: {},
     configure: function (options) {
@@ -1665,7 +1721,9 @@
         }
       }
     },
-    options: {}
+    options: {},
+    adapters: adapters,
+    createChart: createChart
   };
 
   if (typeof module === "object" && typeof module.exports === "object") {

data/lib/chartkick/version.rb

@@ -1,3 +1,3 @@
 module Chartkick
-  VERSION = "2.2.1"
+  VERSION = "2.2.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: chartkick
 version: !ruby/object:Gem::Version
-  version: 2.2.1
+  version: 2.2.2
 platform: ruby
 authors:
 - Andrew Kane
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-12-05 00:00:00.000000000 Z
+date: 2017-01-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -96,7 +96,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.1
+rubygems_version: 2.6.8
 signing_key: 
 specification_version: 4
 summary: Create beautiful JavaScript charts with one line of Ruby