chartkick 2.2.5 → 2.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1576b841c5b83307b5ca0560bc85d8251f302d02
-  data.tar.gz: c054b5fc5d5f103cf0b99b628e43a104373c4fe9
+  metadata.gz: 4c58fc2c0725fcf5226fd394c02d7e7a08eed251
+  data.tar.gz: 4809227124c7b7fa8bb3e1907859e65d7476746c
 SHA512:
-  metadata.gz: 0dca756bfabddcfdb9fa97a032aec3debd92fad504e4ef1ae7f7b22a8f1baaefd26fdf3b430912a7b8d16f9604f1450ee4663f4994bd34c04705d0999a528ed9
-  data.tar.gz: b5f2e783660f36509f34299a62550a222f6abcf57bd4c79a2ecd2a31298e896bf69c3b1c841d7a17b98c58c6c395191c97b24c7625c73dfb473e224c1ab48c0d
+  metadata.gz: a5cfd768e87a01679cb843a18365f226a9e7014ee942606a8cdab144c51b05e315d9be2fab068668aad1a55022ce9d67bad30254dd9e7445da7e0f634a38fb0b
+  data.tar.gz: d7430b45f2d189d6e711cb9eefbf5e4edc4939200bcc0ba3a813aed1da0e24f47436a38c8c8fc64c8c86dc958be4a71c65e823c2a61dd8dc2d23dba7d58fd7c1

data/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 2.3.0
+
+- Fixed deep merge error for non-Rails apps
+- Updated Chartkick.js to 2.3.0
+
 ## 2.2.5
 
 - Updated Chart.js to 2.7.1

data/CONTRIBUTING.md

@@ -0,0 +1,42 @@
+# Contributing
+
+First, thanks for wanting to contribute. You’re awesome! :heart:
+
+## Questions
+
+Use [Stack Overflow](https://stackoverflow.com/) with the tag `chartkick`.
+
+## Feature Requests
+
+Create an issue. Start the title with `[Idea]`.
+
+## Issues
+
+Think you’ve discovered an issue?
+
+1. Search existing issues to see if it’s been reported.
+2. Try the `master` branch to make sure it hasn’t been fixed.
+
+```rb
+gem "chartkick", github: "ankane/chartkick"
+```
+
+If the above steps don’t help, create an issue.
+
+- Include the JavaScript rendered by Chartkick.
+- For exceptions, include the complete backtrace.
+
+## Pull Requests
+
+Fork the project and create a pull request. A few tips:
+
+- Keep changes to a minimum. If you have multiple features or fixes, submit multiple pull requests.
+- Follow the existing style. The code should read like it’s written by a single person.
+
+Feel free to open an issue to get feedback on your idea before spending too much time on it.
+
+Also, note that we aren’t currently accepting new chart types.
+
+---
+
+This contributing guide is released under [CCO](https://creativecommons.org/publicdomain/zero/1.0/) (public domain). Use it for your own project without attribution.

data/ISSUE_TEMPLATE.md

@@ -0,0 +1,7 @@
+Hi,
+
+Before creating an issue, please check out the Contributing Guide:
+
+https://github.com/ankane/chartkick/blob/master/CONTRIBUTING.md
+
+Thanks!

data/README.md

@@ -170,12 +170,48 @@ Specify legend position
 <%= line_chart data, legend: "bottom" %>
 ```
 
+Defer chart creation until after the page loads
+
+```erb
+<%= line_chart data, defer: true %>
+```
+
 Donut chart
 
 ```erb
 <%= pie_chart data, donut: true %>
 ```
 
+Prefix, useful for currency - *Chart.js, Highcharts*
+
+```erb
+<%= line_chart data, prefix: "$" %>
+```
+
+Suffix, useful for percentages - *Chart.js, Highcharts*
+
+```erb
+<%= line_chart data, suffix: "%" %>
+```
+
+Set a thousands separator - *Chart.js, Highcharts*
+
+```erb
+<%= line_chart data, thousands: "," %>
+```
+
+Set a decimal separator - *Chart.js, Highcharts*
+
+```erb
+<%= line_chart data, decimal: "," %>
+```
+
+Show a message when data is empty
+
+```erb
+<%= line_chart data, messages: {empty: "No data"} %>
+```
+
 Refresh data from a remote source every `n` seconds
 
 ```erb
@@ -314,7 +350,7 @@ Works with Highcharts 2.1+
 
 ### Sinatra and Padrino
 
-You must include `chartkick.js` manually. [Download it here](https://raw.github.com/ankane/chartkick/master/app/assets/javascripts/chartkick.js)
+You must include `chartkick.js` manually. [Download it here](https://raw.githubusercontent.com/ankane/chartkick/master/vendor/assets/javascripts/chartkick.js)
 
 ```html
 <script src="chartkick.js"></script>
@@ -335,7 +371,7 @@ after the JavaScript files and before your charts.
 If more than one charting library is loaded, choose between them with:
 
 ```erb
-<%= line_chart data, adapter: "google" %> <!-- or highcharts -->
+<%= line_chart data, adapter: "google" %> <!-- or highcharts or chartjs -->
 ```
 
 ## JavaScript API

data/chartkick.gemspec

@@ -8,9 +8,8 @@ Gem::Specification.new do |spec|
   spec.version       = Chartkick::VERSION
   spec.authors       = ["Andrew Kane"]
   spec.email         = ["andrew@chartkick.com"]
-  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.homepage      = "https://www.chartkick.com"
   spec.license       = "MIT"
 
   spec.files         = `git ls-files`.split($INPUT_RECORD_SEPARATOR)
@@ -18,7 +17,7 @@ Gem::Specification.new do |spec|
   spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
   spec.require_paths = ["lib"]
 
-  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "bundler"
   spec.add_development_dependency "rake"
   spec.add_development_dependency "minitest"
 end

data/lib/chartkick/helper.rb

@@ -87,7 +87,7 @@ JS
       hash_a = hash_a.dup
       hash_b.each_pair do |k, v|
         tv = hash_a[k]
-        hash_a[k] = tv.is_a?(Hash) && v.is_a?(Hash) ? tv.deep_merge(v) : v
+        hash_a[k] = tv.is_a?(Hash) && v.is_a?(Hash) ? chartkick_deep_merge(tv, v) : v
       end
       hash_a
     end

data/lib/chartkick/version.rb

@@ -1,3 +1,3 @@
 module Chartkick
-  VERSION = "2.2.5"
+  VERSION = "2.3.0"
 end

data/test/chartkick_test.rb

@@ -26,4 +26,18 @@ class TestChartkick < Minitest::Test
     line_chart @data, options
     assert_equal "boom", options[:id]
   end
+
+  def test_chartkick_deep_merge_different_inner_key
+    global_option = {library: {backgroundColor: "#eee"}}
+    local_option = {library: {title: "test"}}
+    correct_merge = {library: {backgroundColor: "#eee", title: "test"}}
+    assert_equal chartkick_deep_merge(global_option, local_option), correct_merge
+  end
+
+  def test_chartkick_deep_merge_same_inner_key
+    global_option = {library: {backgroundColor: "#eee"}}
+    local_option = {library: {backgroundColor: "#fff"}}
+    correct_merge = {library: {backgroundColor: "#fff"}}
+    assert_equal chartkick_deep_merge(global_option, local_option), correct_merge
+  end
 end

data/{app → vendor}/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.4
+ * v2.3.0
  * MIT License
  */
 
@@ -174,7 +174,7 @@
 
   function runNext() {
     if (runningRequests < maxRequests) {
-      var request = pendingRequests.shift()
+      var request = pendingRequests.shift();
       if (request) {
         runningRequests++;
         getJSON(request[0], request[1], request[2]);
@@ -319,16 +319,19 @@
     if (typeof n !== "object") {
       if (typeof n === "number") {
         n = new Date(n * 1000); // ms
-      } else if ((matches = n.match(DATE_PATTERN))) {
+      } else {
+        n = toStr(n);
+        if ((matches = n.match(DATE_PATTERN))) {
         year = parseInt(matches[1], 10);
         month = parseInt(matches[3], 10) - 1;
         day = parseInt(matches[5], 10);
         return new Date(year, month, day);
-      } else { // str
-        // try our best to get the str into iso8601
-        // TODO be smarter about this
-        var str = n.replace(/ /, "T").replace(" ", "").replace("UTC", "Z");
-        n = parseISO8601(str) || new Date(n);
+        } else { // str
+          // try our best to get the str into iso8601
+          // TODO be smarter about this
+          var str = n.replace(/ /, "T").replace(" ", "").replace("UTC", "Z");
+          n = parseISO8601(str) || new Date(n);
+        }
       }
     }
     return n;
@@ -360,1113 +363,1238 @@
   }
 
   function loadAdapters() {
-    if (!HighchartsAdapter && "Highcharts" in window) {
-      HighchartsAdapter = new function () {
-        var Highcharts = window.Highcharts;
+    if (!ChartjsAdapter && "Chart" in window) {
+      ChartjsAdapter = (function () {
+        var Chart = window.Chart;
 
-        this.name = "highcharts";
+        var baseOptions = {
+          maintainAspectRatio: false,
+          animation: false,
+          tooltips: {
+            displayColors: false,
+            callbacks: {}
+          },
+          legend: {},
+          title: {fontSize: 20, fontColor: "#333"}
+        };
 
         var defaultOptions = {
-          chart: {},
-          xAxis: {
-            title: {
-              text: null
-            },
-            labels: {
-              style: {
-                fontSize: "12px"
+          scales: {
+            yAxes: [
+              {
+                ticks: {
+                  maxTicksLimit: 4
+                },
+                scaleLabel: {
+                  fontSize: 16,
+                  // fontStyle: "bold",
+                  fontColor: "#333"
+                }
               }
-            }
-          },
-          yAxis: {
-            title: {
-              text: null
-            },
-            labels: {
-              style: {
-                fontSize: "12px"
+            ],
+            xAxes: [
+              {
+                gridLines: {
+                  drawOnChartArea: false
+                },
+                scaleLabel: {
+                  fontSize: 16,
+                  // fontStyle: "bold",
+                  fontColor: "#333"
+                },
+                time: {},
+                ticks: {}
               }
-            }
-          },
-          title: {
-            text: null
-          },
-          credits: {
-            enabled: false
-          },
-          legend: {
-            borderWidth: 0
-          },
-          tooltip: {
-            style: {
-              fontSize: "12px"
-            }
-          },
-          plotOptions: {
-            areaspline: {},
-            series: {
-              marker: {}
-            }
+            ]
           }
         };
 
+        // http://there4.io/2012/05/02/google-chart-color-list/
+        var defaultColors = [
+          "#3366CC", "#DC3912", "#FF9900", "#109618", "#990099", "#3B3EAC", "#0099C6",
+          "#DD4477", "#66AA00", "#B82E2E", "#316395", "#994499", "#22AA99", "#AAAA11",
+          "#6633CC", "#E67300", "#8B0707", "#329262", "#5574A6", "#651067"
+        ];
+
         var hideLegend = function (options, legend, hideLegend) {
           if (legend !== undefined) {
-            options.legend.enabled = !!legend;
+            options.legend.display = !!legend;
             if (legend && legend !== true) {
-              if (legend === "top" || legend === "bottom") {
-                options.legend.verticalAlign = legend;
-              } else {
-                options.legend.layout = "vertical";
-                options.legend.verticalAlign = "middle";
-                options.legend.align = legend;
-              }
+              options.legend.position = legend;
             }
           } else if (hideLegend) {
-            options.legend.enabled = false;
+            options.legend.display = false;
           }
         };
 
         var setTitle = function (options, title) {
+          options.title.display = true;
           options.title.text = title;
         };
 
         var setMin = function (options, min) {
-          options.yAxis.min = min;
+          if (min !== null) {
+            options.scales.yAxes[0].ticks.min = toFloat(min);
+          }
         };
 
         var setMax = function (options, max) {
-          options.yAxis.max = max;
+          options.scales.yAxes[0].ticks.max = toFloat(max);
+        };
+
+        var setBarMin = function (options, min) {
+          if (min !== null) {
+            options.scales.xAxes[0].ticks.min = toFloat(min);
+          }
+        };
+
+        var setBarMax = function (options, max) {
+          options.scales.xAxes[0].ticks.max = toFloat(max);
         };
 
         var setStacked = function (options, stacked) {
-          options.plotOptions.series.stacking = stacked ? "normal" : null;
+          options.scales.xAxes[0].stacked = !!stacked;
+          options.scales.yAxes[0].stacked = !!stacked;
         };
 
         var setXtitle = function (options, title) {
-          options.xAxis.title.text = title;
+          options.scales.xAxes[0].scaleLabel.display = true;
+          options.scales.xAxes[0].scaleLabel.labelString = title;
         };
 
         var setYtitle = function (options, title) {
-          options.yAxis.title.text = title;
+          options.scales.yAxes[0].scaleLabel.display = true;
+          options.scales.yAxes[0].scaleLabel.labelString = title;
         };
 
-        var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setTitle, setMin, setMax, setStacked, setXtitle, setYtitle);
-
-        this.renderLineChart = function (chart, chartType) {
-          chartType = chartType || "spline";
-          var chartOptions = {};
-          if (chartType === "areaspline") {
-            chartOptions = {
-              plotOptions: {
-                areaspline: {
-                  stacking: "normal"
-                },
-                area: {
-                  stacking: "normal"
-                },
-                series: {
-                  marker: {
-                    enabled: false
-                  }
-                }
-              }
-            };
+        var drawChart = function(chart, type, data, options) {
+          if (chart.chart) {
+            chart.chart.destroy();
+          } else {
+            chart.element.innerHTML = "<canvas></canvas>";
           }
 
-          if (chart.options.curve === false) {
-            if (chartType === "areaspline") {
-              chartType = "area";
-            } else if (chartType === "spline") {
-              chartType = "line";
-            }
-          }
+          var ctx = chart.element.getElementsByTagName("CANVAS")[0];
+          chart.chart = new Chart(ctx, {
+            type: type,
+            data: data,
+            options: options
+          });
+        };
 
-          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;
+        // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
+        var addOpacity = function(hex, opacity) {
+          var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+          return result ? "rgba(" + parseInt(result[1], 16) + ", " + parseInt(result[2], 16) + ", " + parseInt(result[3], 16) + ", " + opacity + ")" : hex;
+        };
+
+        var setLabelSize = function (chart, data, options) {
+          var maxLabelSize = Math.ceil(chart.element.offsetWidth / 4.0 / data.labels.length);
+          if (maxLabelSize > 25) {
+            maxLabelSize = 25;
           }
-          options.chart.renderTo = chart.element.id;
+          options.scales.xAxes[0].ticks.callback = function (value) {
+            value = toStr(value);
+            if (value.length > maxLabelSize) {
+              return value.substring(0, maxLabelSize - 2) + "...";
+            } else {
+              return value;
+            }
+          };
+        };
 
-          var series = chart.data;
-          for (i = 0; i < series.length; i++) {
-            data = series[i].data;
-            if (!chart.discrete) {
-              for (j = 0; j < data.length; j++) {
-                data[j][0] = data[j][0].getTime();
+        var setFormatOptions = function(chart, options, chartType) {
+          var formatOptions = {
+            prefix: chart.options.prefix,
+            suffix: chart.options.suffix,
+            thousands: chart.options.thousands,
+            decimal: chart.options.decimal
+          };
+
+          if (formatOptions.prefix || formatOptions.suffix || formatOptions.thousands || formatOptions.decimal) {
+            if (chartType !== "pie") {
+              var myAxes = options.scales.yAxes;
+              if (chartType === "bar") {
+                myAxes = options.scales.xAxes;
+              }
+
+              if (!myAxes[0].ticks.callback) {
+                myAxes[0].ticks.callback = function (value, index, values) {
+                  return formatValue("", value, formatOptions);
+                };
               }
             }
-            series[i].marker = {symbol: "circle"};
-            if (chart.options.points === false) {
-              series[i].marker.enabled = false;
+
+            if (!options.tooltips.callbacks.label) {
+              if (chartType !== "pie") {
+                var valueLabel = chartType === "bar" ? "xLabel" : "yLabel";
+                options.tooltips.callbacks.label = function (tooltipItem, data) {
+                  var label = data.datasets[tooltipItem.datasetIndex].label || '';
+                  if (label) {
+                    label += ': ';
+                  }
+                  return formatValue(label, tooltipItem[valueLabel], formatOptions);
+                };
+              } else {
+                // need to use separate label for pie charts
+                options.tooltips.callbacks.label = function (tooltipItem, data) {
+                  var dataLabel = data.labels[tooltipItem.index];
+                  var value = ': ';
+
+                  if (isArray(dataLabel)) {
+                    // show value on first line of multiline label
+                    // need to clone because we are changing the value
+                    dataLabel = dataLabel.slice();
+                    dataLabel[0] += value;
+                  } else {
+                    dataLabel += value;
+                  }
+
+                  return formatValue(dataLabel, data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index], formatOptions);
+                };
+              }
             }
           }
-          options.series = series;
-          chart.chart = new Highcharts.Chart(options);
-        };
-
-        this.renderScatterChart = function (chart) {
-          var chartOptions = {};
-          var options = jsOptions(chart, chart.options, chartOptions);
-          options.chart.type = "scatter";
-          options.chart.renderTo = chart.element.id;
-          options.series = chart.data;
-          chart.chart = new Highcharts.Chart(options);
         };
 
-        this.renderPieChart = function (chart) {
-          var chartOptions = merge(defaultOptions, {});
-
-          if (chart.options.colors) {
-            chartOptions.colors = chart.options.colors;
-          }
-          if (chart.options.donut) {
-            chartOptions.plotOptions = {pie: {innerSize: "50%"}};
-          }
+        var jsOptions = jsOptionsFunc(merge(baseOptions, defaultOptions), hideLegend, setTitle, setMin, setMax, setStacked, setXtitle, setYtitle);
 
-          if ("legend" in chart.options) {
-            hideLegend(chartOptions, chart.options.legend);
-          }
+        var createDataTable = function (chart, options, chartType) {
+          var datasets = [];
+          var labels = [];
 
-          if (chart.options.title) {
-            setTitle(chartOptions, chart.options.title);
-          }
+          var colors = chart.options.colors || defaultColors;
 
-          var options = merge(chartOptions, chart.options.library || {});
-          options.chart.renderTo = chart.element.id;
-          options.series = [{
-            type: "pie",
-            name: chart.options.label || "Value",
-            data: chart.data
-          }];
-          chart.chart = new Highcharts.Chart(options);
-        };
+          var day = true;
+          var week = true;
+          var dayOfWeek;
+          var month = true;
+          var year = true;
+          var hour = true;
+          var minute = true;
+          var detectType = (chartType === "line" || chartType === "area") && !chart.discrete;
 
-        this.renderColumnChart = function (chart, chartType) {
-          chartType = chartType || "column";
           var series = chart.data;
-          var options = jsOptions(chart, chart.options), i, j, s, d, rows = [], categories = [];
-          options.chart.type = chartType;
-          options.chart.renderTo = chart.element.id;
 
+          var sortedLabels = [];
+
+          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];
-              if (!rows[d[0]]) {
-                rows[d[0]] = new Array(series.length);
-                categories.push(d[0]);
+              key = detectType ? d[0].getTime() : d[0];
+              if (!rows[key]) {
+                rows[key] = new Array(series.length);
+              }
+              rows[key][i] = toFloat(d[1]);
+              if (sortedLabels.indexOf(key) === -1) {
+                sortedLabels.push(key);
               }
-              rows[d[0]][i] = d[1];
             }
           }
 
-          if (chart.options.xtype === "number") {
-            categories.sort(sortByNumber);
+          if (detectType || chart.options.xtype === "number") {
+            sortedLabels.sort(sortByNumber);
           }
 
-          options.xAxis.categories = categories;
-
-          var newSeries = [], d2;
-          for (i = 0; i < series.length; i++) {
-            d = [];
-            for (j = 0; j < categories.length; j++) {
-              d.push(rows[categories[j]][i] || 0);
-            }
+          var rows2 = [];
+          for (j = 0; j < series.length; j++) {
+            rows2.push([]);
+          }
 
-            d2 = {
-              name: series[i].name,
-              data: d
+          var value;
+          var k;
+          for (k = 0; k < sortedLabels.length; k++) {
+            i = sortedLabels[k];
+            if (detectType) {
+              value = new Date(toFloat(i));
+              // TODO make this efficient
+              day = day && isDay(value);
+              if (!dayOfWeek) {
+                dayOfWeek = value.getDay();
+              }
+              week = week && isWeek(value, dayOfWeek);
+              month = month && isMonth(value);
+              year = year && isYear(value);
+              hour = hour && isHour(value);
+              minute = minute && isMinute(value);
+            } else {
+              value = i;
             }
-            if (series[i].stack) {
-              d2.stack = series[i].stack;
+            labels.push(value);
+            for (j = 0; j < series.length; j++) {
+              // Chart.js doesn't like undefined
+              rows2[j].push(rows[i][j] === undefined ? null : rows[i][j]);
             }
-
-            newSeries.push(d2);
           }
-          options.series = newSeries;
-
-          chart.chart = new Highcharts.Chart(options);
-        };
 
-        var self = this;
+          for (i = 0; i < series.length; i++) {
+            s = series[i];
 
-        this.renderBarChart = function (chart) {
-          self.renderColumnChart(chart, "bar");
-        };
+            var color = s.color || colors[i];
+            var backgroundColor = chartType !== "line" ? addOpacity(color, 0.5) : color;
 
-        this.renderAreaChart = function (chart) {
-          self.renderLineChart(chart, "areaspline");
-        };
-      };
-      adapters.push(HighchartsAdapter);
-    }
-    if (!GoogleChartsAdapter && window.google && (window.google.setOnLoadCallback || window.google.charts)) {
-      GoogleChartsAdapter = new function () {
-        var google = window.google;
+            var dataset = {
+              label: s.name,
+              data: rows2[i],
+              fill: chartType === "area",
+              borderColor: color,
+              backgroundColor: backgroundColor,
+              pointBackgroundColor: color,
+              borderWidth: 2
+            };
 
-        this.name = "google";
+            if (s.stack) {
+              dataset.stack = s.stack;
+            }
 
-        var loaded = {};
-        var callbacks = [];
+            if (chart.options.curve === false) {
+              dataset.lineTension = 0;
+            }
 
-        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--;
+            if (chart.options.points === false) {
+              dataset.pointRadius = 0;
+              dataset.pointHitRadius = 5;
             }
-          }
-        };
 
-        var waitForLoaded = function (pack, callback) {
-          if (!callback) {
-            callback = pack;
-            pack = "corechart";
+            datasets.push(merge(dataset, s.library || {}));
           }
 
-          callbacks.push({pack: pack, callback: callback});
+          if (detectType && labels.length > 0) {
+            var minTime = labels[0].getTime();
+            var maxTime = labels[0].getTime();
+            for (i = 1; i < labels.length; i++) {
+              value = labels[i].getTime();
+              if (value < minTime) {
+                minTime = value;
+              }
+              if (value > maxTime) {
+                maxTime = value;
+              }
+            }
 
-          if (loaded[pack]) {
-            runCallbacks();
-          } else {
-            loaded[pack] = true;
+            var timeDiff = (maxTime - minTime) / (86400 * 1000.0);
 
-            // https://groups.google.com/forum/#!topic/google-visualization-api/fMKJcyA2yyI
-            var loadOptions = {
-              packages: [pack],
-              callback: runCallbacks
-            };
-            if (config.language) {
-              loadOptions.language = config.language;
-            }
-            if (pack === "corechart" && config.mapsApiKey) {
-              loadOptions.mapsApiKey = config.mapsApiKey;
+            if (!options.scales.xAxes[0].time.unit) {
+              var step;
+              if (year || timeDiff > 365 * 10) {
+                options.scales.xAxes[0].time.unit = "year";
+                step = 365;
+              } else if (month || timeDiff > 30 * 10) {
+                options.scales.xAxes[0].time.unit = "month";
+                step = 30;
+              } else if (day || timeDiff > 10) {
+                options.scales.xAxes[0].time.unit = "day";
+                step = 1;
+              } else if (hour || timeDiff > 0.5) {
+                options.scales.xAxes[0].time.displayFormats = {hour: "MMM D, h a"};
+                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) {
+                var unitStepSize = Math.ceil(timeDiff / step / (chart.element.offsetWidth / 100.0));
+                if (week && step === 1) {
+                  unitStepSize = Math.ceil(unitStepSize / 7.0) * 7;
+                }
+                options.scales.xAxes[0].time.unitStepSize = unitStepSize;
+              }
             }
 
-            if (window.google.setOnLoadCallback) {
-              google.load("visualization", "1", loadOptions);
-            } else {
-              google.charts.load("current", loadOptions);
+            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";
+              }
             }
           }
+
+          var data = {
+            labels: labels,
+            datasets: datasets
+          };
+
+          return data;
         };
 
-        // 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"
-          },
-          curveType: "function",
-          hAxis: {
-            textStyle: {
-              color: "#666",
-              fontSize: 12
-            },
-            titleTextStyle: {},
-            gridlines: {
-              color: "transparent"
-            },
-            baselineColor: "#ccc",
-            viewWindow: {}
-          },
-          vAxis: {
-            textStyle: {
-              color: "#666",
-              fontSize: 12
-            },
-            titleTextStyle: {},
-            baselineColor: "#ccc",
-            viewWindow: {}
-          },
-          tooltip: {
-            textStyle: {
-              color: "#666",
-              fontSize: 12
-            }
+        var renderLineChart = function (chart, chartType) {
+          if (chart.options.xtype === "number") {
+            return renderScatterChart(chart, chartType, true);
           }
-        };
 
-        var hideLegend = function (options, legend, hideLegend) {
-          if (legend !== undefined) {
-            var position;
-            if (!legend) {
-              position = "none";
-            } else if (legend === true) {
-              position = "right";
-            } else {
-              position = legend;
-            }
-            options.legend.position = position;
-          } else if (hideLegend) {
-            options.legend.position = "none";
+          var chartOptions = {};
+          if (chartType === "area") {
+            // TODO fix area stacked
+            // chartOptions.stacked = true;
+          }
+          // fix for https://github.com/chartjs/Chart.js/issues/2441
+          if (!chart.options.max && allZeros(chart.data)) {
+            chartOptions.max = 1;
           }
-        };
 
-        var setTitle = function (options, title) {
-          options.title = title;
-          options.titleTextStyle = {color: "#333", fontSize: "20px"};
-        };
+          var options = jsOptions(chart, merge(chartOptions, chart.options));
+          setFormatOptions(chart, options, chartType);
 
-        var setMin = function (options, min) {
-          options.vAxis.viewWindow.min = min;
-        };
+          var data = createDataTable(chart, options, chartType || "line");
 
-        var setMax = function (options, max) {
-          options.vAxis.viewWindow.max = max;
+          options.scales.xAxes[0].type = chart.discrete ? "category" : "time";
+
+          drawChart(chart, "line", data, options);
         };
 
-        var setBarMin = function (options, min) {
-          options.hAxis.viewWindow.min = min;
-        };
+        var renderPieChart = function (chart) {
+          var options = merge({}, baseOptions);
+          if (chart.options.donut) {
+            options.cutoutPercentage = 50;
+          }
 
-        var setBarMax = function (options, max) {
-          options.hAxis.viewWindow.max = max;
-        };
+          if ("legend" in chart.options) {
+            hideLegend(options, chart.options.legend);
+          }
 
-        var setStacked = function (options, stacked) {
-          options.isStacked = !!stacked;
+          if (chart.options.title) {
+            setTitle(options, chart.options.title);
+          }
+
+          options = merge(options, chart.options.library || {});
+          setFormatOptions(chart, options, "pie");
+
+          var labels = [];
+          var values = [];
+          for (var i = 0; i < chart.data.length; i++) {
+            var point = chart.data[i];
+            labels.push(point[0]);
+            values.push(point[1]);
+          }
+
+          var data = {
+            labels: labels,
+            datasets: [
+              {
+                data: values,
+                backgroundColor: chart.options.colors || defaultColors
+              }
+            ]
+          };
+
+          drawChart(chart, "pie", data, options);
         };
 
-        var setXtitle = function (options, title) {
-          options.hAxis.title = title;
-          options.hAxis.titleTextStyle.italic = false;
+        var renderColumnChart = function (chart, chartType) {
+          var options;
+          if (chartType === "bar") {
+            options = jsOptionsFunc(merge(baseOptions, defaultOptions), hideLegend, setTitle, setBarMin, setBarMax, setStacked, setXtitle, setYtitle)(chart, chart.options);
+          } else {
+            options = jsOptions(chart, chart.options);
+          }
+          setFormatOptions(chart, options, chartType);
+          var data = createDataTable(chart, options, "column");
+          if (chartType !== "bar") {
+            setLabelSize(chart, data, options);
+          }
+          drawChart(chart, (chartType === "bar" ? "horizontalBar" : "bar"), data, options);
         };
 
-        var setYtitle = function (options, title) {
-          options.vAxis.title = title;
-          options.vAxis.titleTextStyle.italic = false;
+        var renderAreaChart = function (chart) {
+          renderLineChart(chart, "area");
         };
 
-        var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setTitle, setMin, setMax, setStacked, setXtitle, setYtitle);
+        var renderBarChart = function (chart) {
+          renderColumnChart(chart, "bar");
+        };
 
-        // cant use object as key
-        var createDataTable = function (series, columnType, xtype) {
-          var i, j, s, d, key, rows = [], sortedLabels = [];
-          for (i = 0; i < series.length; i++) {
-            s = series[i];
+        var renderScatterChart = function (chart, chartType, lineChart) {
+          chartType = chartType || "line";
 
-            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);
-                sortedLabels.push(key);
-              }
-              rows[key][i] = toFloat(d[1]);
-            }
+          var options = jsOptions(chart, chart.options);
+          if (!lineChart) {
+            setFormatOptions(chart, options, chartType);
           }
 
-          var rows2 = [];
-          var day = true;
-          var value;
-          for (var j = 0; j < sortedLabels.length; j++) {
-            var i = sortedLabels[j];
-            if (columnType === "datetime") {
-              value = new Date(toFloat(i));
-              day = day && isDay(value);
-            } else if (columnType === "number") {
-              value = toFloat(i);
-            } else {
-              value = i;
+          var colors = chart.options.colors || defaultColors;
+
+          var datasets = [];
+          var series = chart.data;
+          for (var i = 0; i < series.length; i++) {
+            var s = series[i];
+            var d = [];
+            for (var j = 0; j < s.data.length; j++) {
+              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);
             }
-            rows2.push([value].concat(rows[i]));
-          }
-          if (columnType === "datetime") {
-            rows2.sort(sortByTime);
-          } else if (columnType === "number") {
-            rows2.sort(sortByNumberSeries);
-          }
 
-          if (xtype === "number") {
-            rows2.sort(sortByNumberSeries);
+            var color = s.color || colors[i];
+            var backgroundColor = chartType === "area" ? addOpacity(color, 0.5) : color;
 
-            for (var i = 0; i < rows2.length; i++) {
-              rows2[i][0] = toStr(rows2[i][0]);
-            }
+            datasets.push({
+              label: s.name,
+              showLine: lineChart || false,
+              data: d,
+              borderColor: color,
+              backgroundColor: backgroundColor,
+              pointBackgroundColor: color,
+              fill: chartType === "area"
+            });
           }
 
-          // 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);
+          if (chartType === "area") {
+            chartType = "line";
           }
-          data.addRows(rows2);
 
-          return data;
+          var data = {datasets: datasets};
+
+          options.scales.xAxes[0].type = "linear";
+          options.scales.xAxes[0].position = "bottom";
+
+          drawChart(chart, chartType, data, options);
         };
 
-        var resize = function (callback) {
-          if (window.attachEvent) {
-            window.attachEvent("onresize", callback);
-          } else if (window.addEventListener) {
-            window.addEventListener("resize", callback, true);
-          }
-          callback();
+        var renderBubbleChart = function (chart) {
+          renderScatterChart(chart, "bubble");
         };
 
-        this.renderLineChart = function (chart) {
-          waitForLoaded(function () {
-            var chartOptions = {};
+        return {
+          name: "chartjs",
+          renderLineChart: renderLineChart,
+          renderPieChart: renderPieChart,
+          renderColumnChart: renderColumnChart,
+          renderBarChart: renderBarChart,
+          renderAreaChart: renderAreaChart,
+          renderScatterChart: renderScatterChart,
+          renderBubbleChart: renderBubbleChart
+        };
+      })();
 
-            if (chart.options.curve === false) {
-              chartOptions.curveType = "none";
-            }
+      adapters.push(ChartjsAdapter);
+    }
 
-            if (chart.options.points === false) {
-              chartOptions.pointSize = 0;
-            }
+    if (!HighchartsAdapter && "Highcharts" in window) {
+      HighchartsAdapter = (function () {
+        var Highcharts = window.Highcharts;
 
-            var options = jsOptions(chart, chart.options, chartOptions);
-            var columnType = chart.discrete ? "string" : "datetime";
-            if (chart.options.xtype === "number") {
-              columnType = "number";
+        var defaultOptions = {
+          chart: {},
+          xAxis: {
+            title: {
+              text: null
+            },
+            labels: {
+              style: {
+                fontSize: "12px"
+              }
             }
-            var data = createDataTable(chart.data, columnType);
-            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%"
-              },
-              legend: {}
-            };
-            if (chart.options.colors) {
-              chartOptions.colors = chart.options.colors;
+          },
+          yAxis: {
+            title: {
+              text: null
+            },
+            labels: {
+              style: {
+                fontSize: "12px"
+              }
             }
-            if (chart.options.donut) {
-              chartOptions.pieHole = 0.5;
+          },
+          title: {
+            text: null
+          },
+          credits: {
+            enabled: false
+          },
+          legend: {
+            borderWidth: 0
+          },
+          tooltip: {
+            style: {
+              fontSize: "12px"
             }
-            if ("legend" in chart.options) {
-              hideLegend(chartOptions, chart.options.legend);
+          },
+          plotOptions: {
+            areaspline: {},
+            series: {
+              marker: {}
             }
-            if (chart.options.title) {
-              setTitle(chartOptions, chart.options.title);
+          }
+        };
+
+        var hideLegend = function (options, legend, hideLegend) {
+          if (legend !== undefined) {
+            options.legend.enabled = !!legend;
+            if (legend && legend !== true) {
+              if (legend === "top" || legend === "bottom") {
+                options.legend.verticalAlign = legend;
+              } else {
+                options.legend.layout = "vertical";
+                options.legend.verticalAlign = "middle";
+                options.legend.align = legend;
+              }
             }
-            var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
+          } else if (hideLegend) {
+            options.legend.enabled = false;
+          }
+        };
 
-            var data = new google.visualization.DataTable();
-            data.addColumn("string", "");
-            data.addColumn("number", "Value");
-            data.addRows(chart.data);
+        var setTitle = function (options, title) {
+          options.title.text = title;
+        };
 
-            chart.chart = new google.visualization.PieChart(chart.element);
-            resize(function () {
-              chart.chart.draw(data, options);
-            });
-          });
+        var setMin = function (options, min) {
+          options.yAxis.min = min;
         };
 
-        this.renderColumnChart = function (chart) {
-          waitForLoaded(function () {
-            var options = jsOptions(chart, chart.options);
-            var data = createDataTable(chart.data, "string", chart.options.xtype);
-            chart.chart = new google.visualization.ColumnChart(chart.element);
-            resize(function () {
-              chart.chart.draw(data, options);
-            });
-          });
+        var setMax = function (options, max) {
+          options.yAxis.max = max;
         };
 
-        this.renderBarChart = function (chart) {
-          waitForLoaded(function () {
-            var chartOptions = {
-              hAxis: {
-                gridlines: {
-                  color: "#ccc"
-                }
-              }
-            };
-            var options = jsOptionsFunc(defaultOptions, hideLegend, setTitle, setBarMin, setBarMax, setStacked, setXtitle, setYtitle)(chart, chart.options, chartOptions);
-            var data = createDataTable(chart.data, "string", chart.options.xtype);
-            chart.chart = new google.visualization.BarChart(chart.element);
-            resize(function () {
-              chart.chart.draw(data, options);
-            });
-          });
+        var setStacked = function (options, stacked) {
+          options.plotOptions.series.stacking = stacked ? "normal" : null;
         };
 
-        this.renderAreaChart = function (chart) {
-          waitForLoaded(function () {
-            var chartOptions = {
-              isStacked: true,
-              pointSize: 0,
-              areaOpacity: 0.5
-            };
+        var setXtitle = function (options, title) {
+          options.xAxis.title.text = title;
+        };
 
-            var options = jsOptions(chart, chart.options, chartOptions);
-            var columnType = chart.discrete ? "string" : "datetime";
-            if (chart.options.xtype === "number") {
-              columnType = "number";
+        var setYtitle = function (options, title) {
+          options.yAxis.title.text = title;
+        };
+
+        var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setTitle, setMin, setMax, setStacked, setXtitle, setYtitle);
+
+        var drawChart = function(chart, data, options) {
+          if (chart.chart) {
+            chart.chart.destroy();
+          }
+
+          options.chart.renderTo = chart.element.id;
+          options.series = data;
+          chart.chart = new Highcharts.Chart(options);
+        };
+
+        var setFormatOptions = function(chart, options, chartType) {
+          var formatOptions = {
+            prefix: chart.options.prefix,
+            suffix: chart.options.suffix,
+            thousands: chart.options.thousands,
+            decimal: chart.options.decimal
+          };
+
+          if (formatOptions.prefix || formatOptions.suffix || formatOptions.thousands || formatOptions.decimal) {
+            if (chartType !== "pie" && !options.yAxis.labels.formatter) {
+              options.yAxis.labels.formatter = function () {
+                return formatValue("", this.value, formatOptions);
+              };
             }
-            var data = createDataTable(chart.data, columnType);
-            chart.chart = new google.visualization.AreaChart(chart.element);
-            resize(function () {
-              chart.chart.draw(data, options);
-            });
-          });
+
+            if (!options.tooltip.pointFormatter) {
+              options.tooltip.pointFormatter = function () {
+                return '<span style="color:' + this.color + '>\u25CF</span> ' + formatValue(this.series.name + ': <b>', this.y, formatOptions) + '</b><br/>';
+              };
+            }
+          }
         };
 
-        this.renderGeoChart = function (chart) {
-          waitForLoaded(function () {
-            var chartOptions = {
-              legend: "none",
-              colorAxis: {
-                colors: chart.options.colors || ["#f6c7b6", "#ce502d"]
+        var renderLineChart = function (chart, chartType) {
+          chartType = chartType || "spline";
+          var chartOptions = {};
+          if (chartType === "areaspline") {
+            chartOptions = {
+              plotOptions: {
+                areaspline: {
+                  stacking: "normal"
+                },
+                area: {
+                  stacking: "normal"
+                },
+                series: {
+                  marker: {
+                    enabled: false
+                  }
+                }
               }
             };
-            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);
+          if (chart.options.curve === false) {
+            if (chartType === "areaspline") {
+              chartType = "area";
+            } else if (chartType === "spline") {
+              chartType = "line";
+            }
+          }
 
-            chart.chart = new google.visualization.GeoChart(chart.element);
-            resize(function () {
-              chart.chart.draw(data, options);
-            });
-          });
+          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;
+          }
+          setFormatOptions(chart, options, chartType);
+
+          var series = chart.data;
+          for (i = 0; i < series.length; i++) {
+            data = series[i].data;
+            if (!chart.discrete) {
+              for (j = 0; j < data.length; j++) {
+                data[j][0] = data[j][0].getTime();
+              }
+            }
+            series[i].marker = {symbol: "circle"};
+            if (chart.options.points === false) {
+              series[i].marker.enabled = false;
+            }
+          }
+
+          drawChart(chart, series, options);
         };
 
-        this.renderScatterChart = function (chart) {
-          waitForLoaded(function () {
-            var chartOptions = {};
-            var options = jsOptions(chart, chart.options, chartOptions);
+        var renderScatterChart = function (chart) {
+          var options = jsOptions(chart, chart.options, {});
+          options.chart.type = "scatter";
+          drawChart(chart, chart.data, options);
+        };
 
-            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 renderPieChart = function (chart) {
+          var chartOptions = merge(defaultOptions, {});
+
+          if (chart.options.colors) {
+            chartOptions.colors = chart.options.colors;
+          }
+          if (chart.options.donut) {
+            chartOptions.plotOptions = {pie: {innerSize: "50%"}};
+          }
+
+          if ("legend" in chart.options) {
+            hideLegend(chartOptions, chart.options.legend);
+          }
+
+          if (chart.options.title) {
+            setTitle(chartOptions, chart.options.title);
+          }
+
+          var options = merge(chartOptions, chart.options.library || {});
+          setFormatOptions(chart, options, "pie");
+          var series = [{
+            type: "pie",
+            name: chart.options.label || "Value",
+            data: chart.data
+          }];
+
+          drawChart(chart, series, options);
+        };
+
+        var renderColumnChart = function (chart, chartType) {
+          chartType = chartType || "column";
+          var series = chart.data;
+          var options = jsOptions(chart, chart.options), i, j, s, d, rows = [], categories = [];
+          options.chart.type = chartType;
+          setFormatOptions(chart, options, chartType);
+
+          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);
+                categories.push(d[0]);
               }
+              rows[d[0]][i] = d[1];
             }
+          }
 
-            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);
+          if (chart.options.xtype === "number") {
+            categories.sort(sortByNumber);
+          }
 
-            chart.chart = new google.visualization.ScatterChart(chart.element);
-            resize(function () {
-              chart.chart.draw(data, options);
-            });
-          });
-        };
+          options.xAxis.categories = categories;
 
-        this.renderTimeline = function (chart) {
-          waitForLoaded("timeline", function () {
-            var chartOptions = {
-              legend: "none"
-            };
+          var newSeries = [], d2;
+          for (i = 0; i < series.length; i++) {
+            d = [];
+            for (j = 0; j < categories.length; j++) {
+              d.push(rows[categories[j]][i] || 0);
+            }
 
-            if (chart.options.colors) {
-              chartOptions.colors = chart.options.colors;
+            d2 = {
+              name: series[i].name,
+              data: d
+            };
+            if (series[i].stack) {
+              d2.stack = series[i].stack;
             }
-            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);
+            newSeries.push(d2);
+          }
 
-            chart.element.style.lineHeight = "normal";
-            chart.chart = new google.visualization.Timeline(chart.element);
+          drawChart(chart, newSeries, options);
+        };
 
-            resize(function () {
-              chart.chart.draw(data, options);
-            });
-          });
+        var renderBarChart = function (chart) {
+          renderColumnChart(chart, "bar");
         };
-      };
 
-      adapters.push(GoogleChartsAdapter);
+        var renderAreaChart = function (chart) {
+          renderLineChart(chart, "areaspline");
+        };
+
+        return {
+          name: "highcharts",
+          renderLineChart: renderLineChart,
+          renderPieChart: renderPieChart,
+          renderColumnChart: renderColumnChart,
+          renderBarChart: renderBarChart,
+          renderAreaChart: renderAreaChart,
+          renderScatterChart: renderScatterChart
+        };
+      })();
+      adapters.push(HighchartsAdapter);
     }
-    if (!ChartjsAdapter && "Chart" in window) {
-      ChartjsAdapter = new function () {
-        var Chart = window.Chart;
+    if (!GoogleChartsAdapter && window.google && (window.google.setOnLoadCallback || window.google.charts)) {
+      GoogleChartsAdapter = (function () {
+        var google = window.google;
 
-        this.name = "chartjs";
+        var loaded = {};
+        var callbacks = [];
 
-        var baseOptions = {
-          maintainAspectRatio: false,
-          animation: false,
-          tooltips: {
-            displayColors: false
-          },
-          legend: {},
-          title: {fontSize: 20, fontColor: "#333"}
+        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";
+          }
+
+          callbacks.push({pack: pack, callback: callback});
+
+          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;
+            }
+            if (pack === "corechart" && config.mapsApiKey) {
+              loadOptions.mapsApiKey = config.mapsApiKey;
+            }
+
+            if (window.google.setOnLoadCallback) {
+              google.load("visualization", "1", loadOptions);
+            } else {
+              google.charts.load("current", loadOptions);
+            }
+          }
+        };
+
+        // Set chart options
         var defaultOptions = {
-          scales: {
-            yAxes: [
-              {
-                ticks: {
-                  maxTicksLimit: 4
-                },
-                scaleLabel: {
-                  fontSize: 16,
-                  // fontStyle: "bold",
-                  fontColor: "#333"
-                }
-              }
-            ],
-            xAxes: [
-              {
-                gridLines: {
-                  drawOnChartArea: false
-                },
-                scaleLabel: {
-                  fontSize: 16,
-                  // fontStyle: "bold",
-                  fontColor: "#333"
-                },
-                time: {},
-                ticks: {}
-              }
-            ]
+          chartArea: {},
+          fontName: "'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif",
+          pointSize: 6,
+          legend: {
+            textStyle: {
+              fontSize: 12,
+              color: "#444"
+            },
+            alignment: "center",
+            position: "right"
+          },
+          curveType: "function",
+          hAxis: {
+            textStyle: {
+              color: "#666",
+              fontSize: 12
+            },
+            titleTextStyle: {},
+            gridlines: {
+              color: "transparent"
+            },
+            baselineColor: "#ccc",
+            viewWindow: {}
+          },
+          vAxis: {
+            textStyle: {
+              color: "#666",
+              fontSize: 12
+            },
+            titleTextStyle: {},
+            baselineColor: "#ccc",
+            viewWindow: {}
+          },
+          tooltip: {
+            textStyle: {
+              color: "#666",
+              fontSize: 12
+            }
           }
         };
 
-        // http://there4.io/2012/05/02/google-chart-color-list/
-        var defaultColors = [
-          "#3366CC", "#DC3912", "#FF9900", "#109618", "#990099", "#3B3EAC", "#0099C6",
-          "#DD4477", "#66AA00", "#B82E2E", "#316395", "#994499", "#22AA99", "#AAAA11",
-          "#6633CC", "#E67300", "#8B0707", "#329262", "#5574A6", "#651067"
-        ];
-
         var hideLegend = function (options, legend, hideLegend) {
           if (legend !== undefined) {
-            options.legend.display = !!legend;
-            if (legend && legend !== true) {
-              options.legend.position = legend;
+            var position;
+            if (!legend) {
+              position = "none";
+            } else if (legend === true) {
+              position = "right";
+            } else {
+              position = legend;
             }
+            options.legend.position = position;
           } else if (hideLegend) {
-            options.legend.display = false;
+            options.legend.position = "none";
           }
         };
 
         var setTitle = function (options, title) {
-          options.title.display = true;
-          options.title.text = title;
+          options.title = title;
+          options.titleTextStyle = {color: "#333", fontSize: "20px"};
         };
 
         var setMin = function (options, min) {
-          if (min !== null) {
-            options.scales.yAxes[0].ticks.min = toFloat(min);
-          }
+          options.vAxis.viewWindow.min = min;
         };
 
         var setMax = function (options, max) {
-          options.scales.yAxes[0].ticks.max = toFloat(max);
+          options.vAxis.viewWindow.max = max;
         };
 
         var setBarMin = function (options, min) {
-          if (min !== null) {
-            options.scales.xAxes[0].ticks.min = toFloat(min);
-          }
+          options.hAxis.viewWindow.min = min;
         };
 
         var setBarMax = function (options, max) {
-          options.scales.xAxes[0].ticks.max = toFloat(max);
+          options.hAxis.viewWindow.max = max;
         };
 
         var setStacked = function (options, stacked) {
-          options.scales.xAxes[0].stacked = !!stacked;
-          options.scales.yAxes[0].stacked = !!stacked;
+          options.isStacked = !!stacked;
         };
 
         var setXtitle = function (options, title) {
-          options.scales.xAxes[0].scaleLabel.display = true;
-          options.scales.xAxes[0].scaleLabel.labelString = title;
+          options.hAxis.title = title;
+          options.hAxis.titleTextStyle.italic = false;
         };
 
         var setYtitle = function (options, title) {
-          options.scales.yAxes[0].scaleLabel.display = true;
-          options.scales.yAxes[0].scaleLabel.labelString = title;
-        };
-
-        var drawChart = function(chart, type, data, options) {
-          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,
-            options: options
-          });
-        };
-
-        // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
-        var addOpacity = function(hex, opacity) {
-          var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-          return result ? "rgba(" + parseInt(result[1], 16) + ", " + parseInt(result[2], 16) + ", " + parseInt(result[3], 16) + ", " + opacity + ")" : hex;
-        };
-
-        var setLabelSize = function (chart, data, options) {
-          var maxLabelSize = Math.ceil(chart.element.offsetWidth / 4.0 / data.labels.length);
-          if (maxLabelSize > 25) {
-            maxLabelSize = 25;
-          }
-          options.scales.xAxes[0].ticks.callback = function (value) {
-            value = toStr(value);
-            if (value.length > maxLabelSize) {
-              return value.substring(0, maxLabelSize - 2) + "...";
-            } else {
-              return value;
-            }
-          };
+          options.vAxis.title = title;
+          options.vAxis.titleTextStyle.italic = false;
         };
 
-        var jsOptions = jsOptionsFunc(merge(baseOptions, defaultOptions), hideLegend, setTitle, setMin, setMax, setStacked, setXtitle, setYtitle);
-
-        var createDataTable = function (chart, options, chartType) {
-          var datasets = [];
-          var labels = [];
-
-          var colors = chart.options.colors || defaultColors;
-
-          var day = true;
-          var week = true;
-          var dayOfWeek;
-          var month = true;
-          var year = true;
-          var hour = true;
-          var minute = true;
-          var detectType = (chartType === "line" || chartType === "area") && !chart.discrete;
-
-          var series = chart.data;
-
-          var sortedLabels = [];
+        var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setTitle, setMin, setMax, setStacked, setXtitle, setYtitle);
 
-          var i, j, s, d, key, rows = [];
+        // cant use object as key
+        var createDataTable = function (series, columnType, xtype) {
+          var i, j, s, d, key, rows = [], sortedLabels = [];
           for (i = 0; i < series.length; i++) {
             s = series[i];
 
             for (j = 0; j < s.data.length; j++) {
               d = s.data[j];
-              key = detectType ? d[0].getTime() : d[0];
+              key = (columnType === "datetime") ? d[0].getTime() : d[0];
               if (!rows[key]) {
                 rows[key] = new Array(series.length);
-              }
-              rows[key][i] = toFloat(d[1]);
-              if (sortedLabels.indexOf(key) === -1) {
                 sortedLabels.push(key);
               }
+              rows[key][i] = toFloat(d[1]);
             }
           }
 
-          if (detectType || chart.options.xtype === "number") {
-            sortedLabels.sort(sortByNumber);
-          }
-
           var rows2 = [];
-          for (j = 0; j < series.length; j++) {
-            rows2.push([]);
-          }
-
+          var day = true;
           var value;
-          var k;
-          for (k = 0; k < sortedLabels.length; k++) {
-            i = sortedLabels[k];
-            if (detectType) {
+          for (j = 0; j < sortedLabels.length; j++) {
+            i = sortedLabels[j];
+            if (columnType === "datetime") {
               value = new Date(toFloat(i));
-              // TODO make this efficient
               day = day && isDay(value);
-              if (!dayOfWeek) {
-                dayOfWeek = value.getDay();
-              }
-              week = week && isWeek(value, dayOfWeek);
-              month = month && isMonth(value);
-              year = year && isYear(value);
-              hour = hour && isHour(value);
-              minute = minute && isMinute(value);
+            } else if (columnType === "number") {
+              value = toFloat(i);
             } else {
               value = i;
             }
-            labels.push(value);
-            for (j = 0; j < series.length; j++) {
-              // Chart.js doesn't like undefined
-              rows2[j].push(rows[i][j] === undefined ? null : rows[i][j]);
-            }
+            rows2.push([value].concat(rows[i]));
           }
-
-          for (i = 0; i < series.length; i++) {
-            s = series[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: color,
-              backgroundColor: backgroundColor,
-              pointBackgroundColor: color,
-              borderWidth: 2
-            };
-
-            if (s.stack) {
-              dataset.stack = s.stack;
-            }
-
-            if (chart.options.curve === false) {
-              dataset.lineTension = 0;
-            }
-
-            if (chart.options.points === false) {
-              dataset.pointRadius = 0;
-              dataset.pointHitRadius = 5;
-            }
-
-            datasets.push(merge(dataset, s.library || {}));
+          if (columnType === "datetime") {
+            rows2.sort(sortByTime);
+          } else if (columnType === "number") {
+            rows2.sort(sortByNumberSeries);
           }
-
-          if (detectType && labels.length > 0) {
-            var minTime = labels[0].getTime();
-            var maxTime = labels[0].getTime();
-            for (i = 1; i < labels.length; i++) {
-              value = labels[i].getTime();
-              if (value < minTime) {
-                minTime = value;
-              }
-              if (value > maxTime) {
-                maxTime = value;
-              }
-            }
-
-            var timeDiff = (maxTime - minTime) / (86400 * 1000.0);
-
-            if (!options.scales.xAxes[0].time.unit) {
-              var step;
-              if (year || timeDiff > 365 * 10) {
-                options.scales.xAxes[0].time.unit = "year";
-                step = 365;
-              } else if (month || timeDiff > 30 * 10) {
-                options.scales.xAxes[0].time.unit = "month";
-                step = 30;
-              } else if (day || timeDiff > 10) {
-                options.scales.xAxes[0].time.unit = "day";
-                step = 1;
-              } else if (hour || timeDiff > 0.5) {
-                options.scales.xAxes[0].time.displayFormats = {hour: "MMM D, h a"};
-                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) {
-                var unitStepSize = Math.ceil(timeDiff / step / (chart.element.offsetWidth / 100.0));
-                if (week && step === 1) {
-                  unitStepSize = Math.ceil(unitStepSize / 7.0) * 7;
-                }
-                options.scales.xAxes[0].time.unitStepSize = unitStepSize;
-              }
-            }
-
-            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";
-              }
+
+          if (xtype === "number") {
+            rows2.sort(sortByNumberSeries);
+
+            for (i = 0; i < rows2.length; i++) {
+              rows2[i][0] = toStr(rows2[i][0]);
             }
           }
 
-          var data = {
-            labels: labels,
-            datasets: datasets
-          };
+          // 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);
 
           return data;
         };
 
-        this.renderLineChart = function (chart, chartType) {
-          if (chart.options.xtype === "number") {
-            return self.renderScatterChart(chart, chartType, true);
+        var resize = function (callback) {
+          if (window.attachEvent) {
+            window.attachEvent("onresize", callback);
+          } else if (window.addEventListener) {
+            window.addEventListener("resize", callback, true);
           }
+          callback();
+        };
 
-          var chartOptions = {};
-          if (chartType === "area") {
-            // TODO fix area stacked
-            // chartOptions.stacked = true;
-          }
-          // fix for https://github.com/chartjs/Chart.js/issues/2441
-          if (!chart.options.max && allZeros(chart.data)) {
-            chartOptions.max = 1;
+        var drawChart = function(chart, type, data, options) {
+          if (chart.chart) {
+            chart.chart.clearChart();
           }
 
-          var options = jsOptions(chart, merge(chartOptions, chart.options));
+          chart.chart = new type(chart.element);
+          resize(function () {
+            chart.chart.draw(data, options);
+          });
+        };
 
-          var data = createDataTable(chart, options, chartType || "line");
+        var renderLineChart = function (chart) {
+          waitForLoaded(function () {
+            var chartOptions = {};
 
-          options.scales.xAxes[0].type = chart.discrete ? "category" : "time";
+            if (chart.options.curve === false) {
+              chartOptions.curveType = "none";
+            }
 
-          drawChart(chart, "line", data, options);
+            if (chart.options.points === false) {
+              chartOptions.pointSize = 0;
+            }
+
+            var options = jsOptions(chart, chart.options, chartOptions);
+            var columnType = chart.discrete ? "string" : "datetime";
+            if (chart.options.xtype === "number") {
+              columnType = "number";
+            }
+            var data = createDataTable(chart.data, columnType);
+
+            drawChart(chart, google.visualization.LineChart, data, options);
+          });
         };
 
-        this.renderPieChart = function (chart) {
-          var options = merge({}, baseOptions);
-          if (chart.options.donut) {
-            options.cutoutPercentage = 50;
-          }
+        var renderPieChart = function (chart) {
+          waitForLoaded(function () {
+            var chartOptions = {
+              chartArea: {
+                top: "10%",
+                height: "80%"
+              },
+              legend: {}
+            };
+            if (chart.options.colors) {
+              chartOptions.colors = chart.options.colors;
+            }
+            if (chart.options.donut) {
+              chartOptions.pieHole = 0.5;
+            }
+            if ("legend" in chart.options) {
+              hideLegend(chartOptions, chart.options.legend);
+            }
+            if (chart.options.title) {
+              setTitle(chartOptions, chart.options.title);
+            }
+            var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
 
-          if ("legend" in chart.options) {
-            hideLegend(options, chart.options.legend);
-          }
+            var data = new google.visualization.DataTable();
+            data.addColumn("string", "");
+            data.addColumn("number", "Value");
+            data.addRows(chart.data);
 
-          if (chart.options.title) {
-            setTitle(options, chart.options.title);
-          }
+            drawChart(chart, google.visualization.PieChart, data, options);
+          });
+        };
 
-          options = merge(options, chart.options.library || {});
+        var renderColumnChart = function (chart) {
+          waitForLoaded(function () {
+            var options = jsOptions(chart, chart.options);
+            var data = createDataTable(chart.data, "string", chart.options.xtype);
 
-          var labels = [];
-          var values = [];
-          for (var i = 0; i < chart.data.length; i++) {
-            var point = chart.data[i];
-            labels.push(point[0]);
-            values.push(point[1]);
-          }
+            drawChart(chart, google.visualization.ColumnChart, data, options);
+          });
+        };
 
-          var data = {
-            labels: labels,
-            datasets: [
-              {
-                data: values,
-                backgroundColor: chart.options.colors || defaultColors
+        var renderBarChart = function (chart) {
+          waitForLoaded(function () {
+            var chartOptions = {
+              hAxis: {
+                gridlines: {
+                  color: "#ccc"
+                }
               }
-            ]
-          };
+            };
+            var options = jsOptionsFunc(defaultOptions, hideLegend, setTitle, setBarMin, setBarMax, setStacked, setXtitle, setYtitle)(chart, chart.options, chartOptions);
+            var data = createDataTable(chart.data, "string", chart.options.xtype);
 
-          drawChart(chart, "pie", data, options);
+            drawChart(chart, google.visualization.BarChart, data, options);
+          });
         };
 
-        this.renderColumnChart = function (chart, chartType) {
-          var options;
-          if (chartType === "bar") {
-            options = jsOptionsFunc(merge(baseOptions, defaultOptions), hideLegend, setTitle, setBarMin, setBarMax, setStacked, setXtitle, setYtitle)(chart, chart.options);
-          } else {
-            options = jsOptions(chart, chart.options);
-          }
-          var data = createDataTable(chart, options, "column");
-          setLabelSize(chart, data, options);
-          drawChart(chart, (chartType === "bar" ? "horizontalBar" : "bar"), data, options);
-        };
+        var renderAreaChart = function (chart) {
+          waitForLoaded(function () {
+            var chartOptions = {
+              isStacked: true,
+              pointSize: 0,
+              areaOpacity: 0.5
+            };
 
-        var self = this;
+            var options = jsOptions(chart, chart.options, chartOptions);
+            var columnType = chart.discrete ? "string" : "datetime";
+            if (chart.options.xtype === "number") {
+              columnType = "number";
+            }
+            var data = createDataTable(chart.data, columnType);
 
-        this.renderAreaChart = function (chart) {
-          self.renderLineChart(chart, "area");
+            drawChart(chart, google.visualization.AreaChart, data, options);
+          });
         };
 
-        this.renderBarChart = function (chart) {
-          self.renderColumnChart(chart, "bar");
-        };
+        var 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 || {});
 
-        this.renderScatterChart = function (chart, chartType, lineChart) {
-          chartType = chartType || "line";
+            var data = new google.visualization.DataTable();
+            data.addColumn("string", "");
+            data.addColumn("number", chart.options.label || "Value");
+            data.addRows(chart.data);
 
-          var options = jsOptions(chart, chart.options);
+            drawChart(chart, google.visualization.GeoChart, data, options);
+          });
+        };
 
-          var colors = chart.options.colors || defaultColors;
+        var renderScatterChart = function (chart) {
+          waitForLoaded(function () {
+            var chartOptions = {};
+            var options = jsOptions(chart, chart.options, chartOptions);
 
-          var datasets = [];
-          var series = chart.data;
-          for (var i = 0; i < series.length; i++) {
-            var s = series[i];
-            var d = [];
-            for (var j = 0; j < s.data.length; j++) {
-              var point = {
-                x: toFloat(s.data[j][0]),
-                y: toFloat(s.data[j][1])
-              };
-              if (chartType === "bubble") {
-                point.r = toFloat(s.data[j][2]);
+            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);
               }
-              d.push(point);
             }
 
-            var color = s.color || colors[i];
-            var backgroundColor = chartType === "area" ? addOpacity(color, 0.5) : color;
+            data = new google.visualization.DataTable();
+            data.addColumn("number", "");
+            for (i = 0; i < series.length; i++) {
+              data.addColumn("number", series[i].name);
+            }
+            data.addRows(rows2);
 
-            datasets.push({
-              label: s.name,
-              showLine: lineChart || false,
-              data: d,
-              borderColor: color,
-              backgroundColor: backgroundColor,
-              pointBackgroundColor: color,
-              fill: chartType === "area"
-            })
-          }
+            drawChart(chart, google.visualization.ScatterChart, data, options);
+          });
+        };
 
-          if (chartType === "area") {
-            chartType = "line";
-          }
+        var renderTimeline = function (chart) {
+          waitForLoaded("timeline", function () {
+            var chartOptions = {
+              legend: "none"
+            };
 
-          var data = {datasets: datasets};
+            if (chart.options.colors) {
+              chartOptions.colors = chart.options.colors;
+            }
+            var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
 
-          options.scales.xAxes[0].type = "linear";
-          options.scales.xAxes[0].position = "bottom";
+            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);
 
-          drawChart(chart, chartType, data, options);
+            chart.element.style.lineHeight = "normal";
+
+            drawChart(chart, google.visualization.Timeline, data, options);
+          });
         };
 
-        this.renderBubbleChart = function (chart) {
-          this.renderScatterChart(chart, "bubble");
+        return {
+          name: "google",
+          renderLineChart: renderLineChart,
+          renderPieChart: renderPieChart,
+          renderColumnChart: renderColumnChart,
+          renderBarChart: renderBarChart,
+          renderAreaChart: renderAreaChart,
+          renderScatterChart: renderScatterChart,
+          renderGeoChart: renderGeoChart,
+          renderTimeline: renderTimeline
         };
-      };
+      })();
+
+      adapters.push(GoogleChartsAdapter);
+    }
+  }
 
-      adapters.unshift(ChartjsAdapter);
+  function dataEmpty(data, chartType) {
+    if (chartType === "PieChart" || chartType === "GeoChart" || chartType === "Timeline") {
+      return data.length === 0;
+    } else {
+      for (var i = 0; i < data.length; i++) {
+        if (data[i].data.length > 0) {
+          return false;
+        }
+      }
+      return true;
     }
   }
 
   function renderChart(chartType, chart) {
-    callAdapter(chartType, chart);
-    if (chart.options.download && !chart.downloadAttached && chart.adapter === "chartjs") {
-      addDownloadButton(chart);
+    if (chart.options.messages && chart.options.messages.empty && dataEmpty(chart.data, chartType)) {
+      setText(chart.element, chart.options.messages.empty);
+    } else {
+      callAdapter(chartType, chart);
+      if (chart.options.download && !chart.downloadAttached && chart.adapter === "chartjs") {
+        addDownloadButton(chart);
+      }
     }
   }
 
@@ -1574,18 +1702,43 @@
     return false;
   }
 
+  function formatValue(pre, value, options) {
+    if (options.thousands || options.decimal) {
+      value = toStr(value);
+      var parts = value.split(".")
+      value = parts[0];
+      if (options.thousands) {
+        value = value.replace(/(\d)(?=(\d{3})+(?!\d))/g, options.thousands);
+      }
+      if (parts.length > 1) {
+        value += (options.decimal || ".") + parts[1];
+      }
+    }
+
+    pre = pre || "";
+    if (options.prefix) {
+      if (value < 0) {
+        value = value * -1;
+        pre += "-";
+      }
+      pre += options.prefix;
+    }
+
+    return pre + value + (options.suffix || "");
+  }
+
   // creates a shallow copy of each element of the array
   // elements are expected to be objects
   function copySeries(series) {
     var newSeries = [], i, j;
     for (i = 0; i < series.length; i++) {
-      var copy = {}
+      var copy = {};
       for (j in series[i]) {
         if (series[i].hasOwnProperty(j)) {
           copy[j] = series[i][j];
         }
       }
-      newSeries.push(copy)
+      newSeries.push(copy);
     }
     return newSeries;
   }
@@ -1684,7 +1837,7 @@
     if (!processData) {
       processData = function (chart) {
         return chart.rawData;
-      }
+      };
     }
 
     // getters
@@ -1746,7 +1899,7 @@
       } else {
         return null;
       }
-    }
+    };
 
     Chartkick.charts[element.id] = chart;