blazer 1.2.1 → 1.3.0

data/app/assets/javascripts/blazer/application.js

@@ -8,6 +8,7 @@
 //= require ./moment
 //= require ./moment-timezone
 //= require ./daterangepicker
+//= require ./Chart.js
 //= require ./chartkick
 //= require ./ace/ace
 //= require ./ace/ext-language_tools

data/app/assets/javascripts/blazer/chartkick.js

@@ -1,8 +1,8 @@
 /*
  * Chartkick.js
- * Create beautiful Javascript charts with minimal code
+ * Create beautiful JavaScript charts with minimal code
  * https://github.com/ankane/chartkick.js
- * v1.4.1
+ * v1.5.1
  * MIT License
  */
 
@@ -12,8 +12,9 @@
   'use strict';
 
   var config = window.Chartkick || {};
-  var Chartkick, DATE_PATTERN, ISO8601_PATTERN, DECIMAL_SEPARATOR, adapters = [];
-  DATE_PATTERN = /^(\d\d\d\d)(\-)?(\d\d)(\-)?(\d\d)$/i;
+  var Chartkick, ISO8601_PATTERN, DECIMAL_SEPARATOR, adapters = [];
+  var DATE_PATTERN = /^(\d\d\d\d)(\-)?(\d\d)(\-)?(\d\d)$/i;
+  var adapters = [];
 
   // helpers
 
@@ -125,8 +126,8 @@
         setMax(options, opts.max);
       }
 
-      if (opts.stacked) {
-        setStacked(options);
+      if ("stacked" in opts) {
+        setStacked(options, opts.stacked);
       }
 
       if (opts.colors) {
@@ -210,7 +211,7 @@
     if (typeof n !== "object") {
       if (typeof n === "number") {
         n = new Date(n * 1000); // ms
-      } else if (matches = n.match(DATE_PATTERN)) {
+      } else if (config.smarterDates && (matches = n.match(DATE_PATTERN))) {
         year = parseInt(matches[1], 10);
         month = parseInt(matches[3], 10) - 1;
         day = parseInt(matches[5], 10);
@@ -242,527 +243,835 @@
     return a[0].getTime() - b[0].getTime();
   }
 
-  if ("Highcharts" in window) {
-    var HighchartsAdapter = new function () {
-      var Highcharts = window.Highcharts;
-
-      this.name = "highcharts";
+  function sortByNumber(a, b) {
+    return a - b;
+  }
 
-      var defaultOptions = {
-        chart: {},
-        xAxis: {
-          title: {
-            text: null
+  function loadAdapters() {
+    if (!HighchartsAdapter && "Highcharts" in window) {
+      var HighchartsAdapter = new function () {
+        var Highcharts = window.Highcharts;
+
+        this.name = "highcharts";
+
+        var defaultOptions = {
+          chart: {},
+          xAxis: {
+            title: {
+              text: null
+            },
+            labels: {
+              style: {
+                fontSize: "12px"
+              }
+            }
           },
-          labels: {
-            style: {
-              fontSize: "12px"
+          yAxis: {
+            title: {
+              text: null
+            },
+            labels: {
+              style: {
+                fontSize: "12px"
+              }
             }
-          }
-        },
-        yAxis: {
+          },
           title: {
             text: null
           },
-          labels: {
+          credits: {
+            enabled: false
+          },
+          legend: {
+            borderWidth: 0
+          },
+          tooltip: {
             style: {
               fontSize: "12px"
             }
+          },
+          plotOptions: {
+            areaspline: {},
+            series: {
+              marker: {}
+            }
           }
-        },
-        title: {
-          text: null
-        },
-        credits: {
-          enabled: false
-        },
-        legend: {
-          borderWidth: 0
-        },
-        tooltip: {
-          style: {
-            fontSize: "12px"
-          }
-        },
-        plotOptions: {
-          areaspline: {},
-          series: {
-            marker: {}
-          }
-        }
-      };
+        };
 
-      var hideLegend = function (options) {
-        options.legend.enabled = false;
-      };
+        var hideLegend = function (options) {
+          options.legend.enabled = false;
+        };
 
-      var setMin = function (options, min) {
-        options.yAxis.min = min;
-      };
+        var setMin = function (options, min) {
+          options.yAxis.min = min;
+        };
 
-      var setMax = function (options, max) {
-        options.yAxis.max = max;
-      };
+        var setMax = function (options, max) {
+          options.yAxis.max = max;
+        };
 
-      var setStacked = function (options) {
-        options.plotOptions.series.stacking = "normal";
-      };
+        var setStacked = function (options, stacked) {
+          options.plotOptions.series.stacking = stacked ? "normal" : null;
+        };
 
-      var setXtitle = function (options, title) {
-        options.xAxis.title.text = title;
-      };
+        var setXtitle = function (options, title) {
+          options.xAxis.title.text = title;
+        };
 
-      var setYtitle = function (options, title) {
-        options.yAxis.title.text = title;
-      };
+        var setYtitle = function (options, title) {
+          options.yAxis.title.text = title;
+        };
+
+        var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle);
 
-      var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle);
-
-      this.renderLineChart = function (chart, chartType) {
-        chartType = chartType || "spline";
-        var chartOptions = {};
-        if (chartType === "areaspline") {
-          chartOptions = {
-            plotOptions: {
-              areaspline: {
-                stacking: "normal"
-              },
-              series: {
-                marker: {
-                  enabled: false
+        this.renderLineChart = function (chart, chartType) {
+          chartType = chartType || "spline";
+          var chartOptions = {};
+          if (chartType === "areaspline") {
+            chartOptions = {
+              plotOptions: {
+                areaspline: {
+                  stacking: "normal"
+                },
+                series: {
+                  marker: {
+                    enabled: false
+                  }
                 }
               }
+            };
+          }
+          var options = jsOptions(chart.data, chart.options, chartOptions), data, i, j;
+          options.xAxis.type = chart.options.discrete ? "category" : "datetime";
+          options.chart.type = chartType;
+          options.chart.renderTo = chart.element.id;
+
+          var series = chart.data;
+          for (i = 0; i < series.length; i++) {
+            data = series[i].data;
+            if (!chart.options.discrete) {
+              for (j = 0; j < data.length; j++) {
+                data[j][0] = data[j][0].getTime();
+              }
             }
-          };
-        }
-        var options = jsOptions(chart.data, chart.options, chartOptions), data, i, j;
-        options.xAxis.type = chart.options.discrete ? "category" : "datetime";
-        options.chart.type = chartType;
-        options.chart.renderTo = chart.element.id;
-
-        var series = chart.data;
-        for (i = 0; i < series.length; i++) {
-          data = series[i].data;
-          if (!chart.options.discrete) {
-            for (j = 0; j < data.length; j++) {
-              data[j][0] = data[j][0].getTime();
-            }
+            series[i].marker = {symbol: "circle"};
           }
-          series[i].marker = {symbol: "circle"};
-        }
-        options.series = series;
-        new Highcharts.Chart(options);
-      };
-
-      this.renderScatterChart = function (chart) {
-        var chartOptions = {};
-        var options = jsOptions(chart.data, chart.options, chartOptions);
-        options.chart.type = 'scatter';
-        options.chart.renderTo = chart.element.id;
-        options.series = chart.data;
-        new Highcharts.Chart(options);
-      };
+          options.series = series;
+          new Highcharts.Chart(options);
+        };
 
-      this.renderPieChart = function (chart) {
-        var chartOptions = {};
-        if (chart.options.colors) {
-          chartOptions.colors = chart.options.colors;
-        }
-        var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
-        options.chart.renderTo = chart.element.id;
-        options.series = [{
-          type: "pie",
-          name: "Value",
-          data: chart.data
-        }];
-        new Highcharts.Chart(options);
-      };
-
-      this.renderColumnChart = function (chart, chartType) {
-        var chartType = chartType || "column";
-        var series = chart.data;
-        var options = jsOptions(series, chart.options), i, j, s, d, rows = [];
-        options.chart.type = chartType;
-        options.chart.renderTo = chart.element.id;
-
-        for (i = 0; i < series.length; i++) {
-          s = series[i];
+        this.renderScatterChart = function (chart) {
+          var chartOptions = {};
+          var options = jsOptions(chart.data, chart.options, chartOptions);
+          options.chart.type = 'scatter';
+          options.chart.renderTo = chart.element.id;
+          options.series = chart.data;
+          new Highcharts.Chart(options);
+        };
 
-          for (j = 0; j < s.data.length; j++) {
-            d = s.data[j];
-            if (!rows[d[0]]) {
-              rows[d[0]] = new Array(series.length);
+        this.renderPieChart = function (chart) {
+          var chartOptions = {};
+          if (chart.options.colors) {
+            chartOptions.colors = chart.options.colors;
+          }
+          var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
+          options.chart.renderTo = chart.element.id;
+          options.series = [{
+            type: "pie",
+            name: chart.options.label || "Value",
+            data: chart.data
+          }];
+          new Highcharts.Chart(options);
+        };
+
+        this.renderColumnChart = function (chart, chartType) {
+          var chartType = chartType || "column";
+          var series = chart.data;
+          var options = jsOptions(series, chart.options), i, j, s, d, rows = [];
+          options.chart.type = chartType;
+          options.chart.renderTo = chart.element.id;
+
+          for (i = 0; i < series.length; i++) {
+            s = series[i];
+
+            for (j = 0; j < s.data.length; j++) {
+              d = s.data[j];
+              if (!rows[d[0]]) {
+                rows[d[0]] = new Array(series.length);
+              }
+              rows[d[0]][i] = d[1];
             }
-            rows[d[0]][i] = d[1];
           }
-        }
 
-        var categories = [];
-        for (i in rows) {
-          if (rows.hasOwnProperty(i)) {
-            categories.push(i);
+          var categories = [];
+          for (i in rows) {
+            if (rows.hasOwnProperty(i)) {
+              categories.push(i);
+            }
           }
-        }
-        options.xAxis.categories = categories;
+          options.xAxis.categories = categories;
 
-        var newSeries = [];
-        for (i = 0; i < series.length; i++) {
-          d = [];
-          for (j = 0; j < categories.length; j++) {
-            d.push(rows[categories[j]][i] || 0);
-          }
+          var newSeries = [];
+          for (i = 0; i < series.length; i++) {
+            d = [];
+            for (j = 0; j < categories.length; j++) {
+              d.push(rows[categories[j]][i] || 0);
+            }
 
-          newSeries.push({
-            name: series[i].name,
-            data: d
-          });
-        }
-        options.series = newSeries;
+            newSeries.push({
+              name: series[i].name,
+              data: d
+            });
+          }
+          options.series = newSeries;
 
-        new Highcharts.Chart(options);
-      };
+          new Highcharts.Chart(options);
+        };
 
-      var self = this;
+        var self = this;
 
-      this.renderBarChart = function (chart) {
-        self.renderColumnChart(chart, "bar");
-      };
+        this.renderBarChart = function (chart) {
+          self.renderColumnChart(chart, "bar");
+        };
 
-      this.renderAreaChart = function (chart) {
-        self.renderLineChart(chart, "areaspline");
+        this.renderAreaChart = function (chart) {
+          self.renderLineChart(chart, "areaspline");
+        };
       };
-    };
-    adapters.push(HighchartsAdapter);
-  }
-  if (window.google && window.google.setOnLoadCallback) {
-    var GoogleChartsAdapter = new function () {
-      var google = window.google;
-
-      this.name = "google";
-
-      var loaded = {};
-      var callbacks = [];
-
-      var runCallbacks = function () {
-        var cb, call;
-        for (var i = 0; i < callbacks.length; i++) {
-          cb = callbacks[i];
-          call = google.visualization && ((cb.pack === "corechart" && google.visualization.LineChart) || (cb.pack === "timeline" && google.visualization.Timeline))
-          if (call) {
-            cb.callback();
-            callbacks.splice(i, 1);
-            i--;
+      adapters.push(HighchartsAdapter);
+    }
+    if (!GoogleChartsAdapter && window.google && window.google.setOnLoadCallback) {
+      var GoogleChartsAdapter = new function () {
+        var google = window.google;
+
+        this.name = "google";
+
+        var loaded = {};
+        var callbacks = [];
+
+        var runCallbacks = function () {
+          var cb, call;
+          for (var i = 0; i < callbacks.length; i++) {
+            cb = callbacks[i];
+            call = google.visualization && ((cb.pack === "corechart" && google.visualization.LineChart) || (cb.pack === "timeline" && google.visualization.Timeline))
+            if (call) {
+              cb.callback();
+              callbacks.splice(i, 1);
+              i--;
+            }
           }
-        }
-      };
+        };
 
-      var waitForLoaded = function (pack, callback) {
-        if (!callback) {
-          callback = pack;
-          pack = "corechart";
-        }
+        var waitForLoaded = function (pack, callback) {
+          if (!callback) {
+            callback = pack;
+            pack = "corechart";
+          }
 
-        callbacks.push({pack: pack, callback: callback});
+          callbacks.push({pack: pack, callback: callback});
 
-        if (loaded[pack]) {
-          runCallbacks();
-        } else {
-          loaded[pack] = true;
+          if (loaded[pack]) {
+            runCallbacks();
+          } else {
+            loaded[pack] = true;
 
-          // https://groups.google.com/forum/#!topic/google-visualization-api/fMKJcyA2yyI
-          var loadOptions = {
-            packages: [pack],
-            callback: runCallbacks
-          };
-          if (config.language) {
-            loadOptions.language = config.language;
+            // https://groups.google.com/forum/#!topic/google-visualization-api/fMKJcyA2yyI
+            var loadOptions = {
+              packages: [pack],
+              callback: runCallbacks
+            };
+            if (config.language) {
+              loadOptions.language = config.language;
+            }
+            google.load("visualization", "1", loadOptions);
           }
-          google.load("visualization", "1", loadOptions);
-        }
-      };
-
-      // Set chart options
-      var defaultOptions = {
-        chartArea: {},
-        fontName: "'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif",
-        pointSize: 6,
-        legend: {
-          textStyle: {
-            fontSize: 12,
-            color: "#444"
+        };
+
+        // Set chart options
+        var defaultOptions = {
+          chartArea: {},
+          fontName: "'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif",
+          pointSize: 6,
+          legend: {
+            textStyle: {
+              fontSize: 12,
+              color: "#444"
+            },
+            alignment: "center",
+            position: "right"
           },
-          alignment: "center",
-          position: "right"
-        },
-        curveType: "function",
-        hAxis: {
-          textStyle: {
-            color: "#666",
-            fontSize: 12
+          curveType: "function",
+          hAxis: {
+            textStyle: {
+              color: "#666",
+              fontSize: 12
+            },
+            titleTextStyle: {},
+            gridlines: {
+              color: "transparent"
+            },
+            baselineColor: "#ccc",
+            viewWindow: {}
           },
-          titleTextStyle: {},
-          gridlines: {
-            color: "transparent"
+          vAxis: {
+            textStyle: {
+              color: "#666",
+              fontSize: 12
+            },
+            titleTextStyle: {},
+            baselineColor: "#ccc",
+            viewWindow: {}
           },
-          baselineColor: "#ccc",
-          viewWindow: {}
-        },
-        vAxis: {
-          textStyle: {
-            color: "#666",
-            fontSize: 12
-          },
-          titleTextStyle: {},
-          baselineColor: "#ccc",
-          viewWindow: {}
-        },
-        tooltip: {
-          textStyle: {
-            color: "#666",
-            fontSize: 12
+          tooltip: {
+            textStyle: {
+              color: "#666",
+              fontSize: 12
+            }
           }
-        }
-      };
+        };
 
-      var hideLegend = function (options) {
-        options.legend.position = "none";
-      };
+        var hideLegend = function (options) {
+          options.legend.position = "none";
+        };
 
-      var setMin = function (options, min) {
-        options.vAxis.viewWindow.min = min;
-      };
+        var setMin = function (options, min) {
+          options.vAxis.viewWindow.min = min;
+        };
 
-      var setMax = function (options, max) {
-        options.vAxis.viewWindow.max = max;
-      };
+        var setMax = function (options, max) {
+          options.vAxis.viewWindow.max = max;
+        };
 
-      var setBarMin = function (options, min) {
-        options.hAxis.viewWindow.min = min;
-      };
-
-      var setBarMax = function (options, max) {
-        options.hAxis.viewWindow.max = max;
-      };
+        var setBarMin = function (options, min) {
+          options.hAxis.viewWindow.min = min;
+        };
 
-      var setStacked = function (options) {
-        options.isStacked = true;
-      };
+        var setBarMax = function (options, max) {
+          options.hAxis.viewWindow.max = max;
+        };
 
-      var setXtitle = function (options, title) {
-        options.hAxis.title = title;
-        options.hAxis.titleTextStyle.italic = false;
-      }
+        var setStacked = function (options, stacked) {
+          options.isStacked = !!stacked;
+        };
 
-      var setYtitle = function (options, title) {
-        options.vAxis.title = title;
-        options.vAxis.titleTextStyle.italic = false;
-      };
+        var setXtitle = function (options, title) {
+          options.hAxis.title = title;
+          options.hAxis.titleTextStyle.italic = false;
+        }
 
-      var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle);
+        var setYtitle = function (options, title) {
+          options.vAxis.title = title;
+          options.vAxis.titleTextStyle.italic = false;
+        };
 
-      // cant use object as key
-      var createDataTable = function (series, columnType) {
-        var data = new google.visualization.DataTable();
-        data.addColumn(columnType, "");
+        var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax, setStacked, setXtitle, setYtitle);
 
-        var i, j, s, d, key, rows = [];
-        for (i = 0; i < series.length; i++) {
-          s = series[i];
-          data.addColumn("number", s.name);
+        // cant use object as key
+        var createDataTable = function (series, columnType) {
+          var i, j, s, d, key, rows = [];
+          for (i = 0; i < series.length; i++) {
+            s = series[i];
 
-          for (j = 0; j < s.data.length; j++) {
-            d = s.data[j];
-            key = (columnType === "datetime") ? d[0].getTime() : d[0];
-            if (!rows[key]) {
-              rows[key] = new Array(series.length);
+            for (j = 0; j < s.data.length; j++) {
+              d = s.data[j];
+              key = (columnType === "datetime") ? d[0].getTime() : d[0];
+              if (!rows[key]) {
+                rows[key] = new Array(series.length);
+              }
+              rows[key][i] = toFloat(d[1]);
             }
-            rows[key][i] = toFloat(d[1]);
           }
-        }
 
-        var rows2 = [];
-        var day = true;
-        var value;
-        for (i in rows) {
-          if (rows.hasOwnProperty(i)) {
-            if (columnType === "datetime") {
-              value = new Date(toFloat(i));
-              day = day && isDay(value);
-            } else if (columnType === "number") {
-              value = toFloat(i);
-            } else {
-              value = i;
+          var rows2 = [];
+          var day = true;
+          var value;
+          for (i in rows) {
+            if (rows.hasOwnProperty(i)) {
+              if (columnType === "datetime") {
+                value = new Date(toFloat(i));
+                day = day && isDay(value);
+              } else if (columnType === "number") {
+                value = toFloat(i);
+              } else {
+                value = i;
+              }
+              rows2.push([value].concat(rows[i]));
             }
-            rows2.push([value].concat(rows[i]));
           }
-        }
-        if (columnType === "datetime") {
-          rows2.sort(sortByTime);
-        }
-        data.addRows(rows2);
+          if (columnType === "datetime") {
+            rows2.sort(sortByTime);
+          }
 
-        if (columnType === "datetime" && day) {
-          var formatter = new google.visualization.DateFormat({
-            pattern: "MMM d, yyyy"
+          // 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;
+        };
+
+        var resize = function (callback) {
+          if (window.attachEvent) {
+            window.attachEvent("onresize", callback);
+          } else if (window.addEventListener) {
+            window.addEventListener("resize", callback, true);
+          }
+          callback();
+        };
+
+        this.renderLineChart = function (chart) {
+          waitForLoaded(function () {
+            var options = jsOptions(chart.data, chart.options);
+            var data = createDataTable(chart.data, chart.options.discrete ? "string" : "datetime");
+            chart.chart = new google.visualization.LineChart(chart.element);
+            resize(function () {
+              chart.chart.draw(data, options);
+            });
           });
-          formatter.format(data, 0);
-        }
+        };
+
+        this.renderPieChart = function (chart) {
+          waitForLoaded(function () {
+            var chartOptions = {
+              chartArea: {
+                top: "10%",
+                height: "80%"
+              }
+            };
+            if (chart.options.colors) {
+              chartOptions.colors = chart.options.colors;
+            }
+            var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
 
-        return data;
-      };
+            var data = new google.visualization.DataTable();
+            data.addColumn("string", "");
+            data.addColumn("number", "Value");
+            data.addRows(chart.data);
 
-      var resize = function (callback) {
-        if (window.attachEvent) {
-          window.attachEvent("onresize", callback);
-        } else if (window.addEventListener) {
-          window.addEventListener("resize", callback, true);
-        }
-        callback();
-      };
+            chart.chart = new google.visualization.PieChart(chart.element);
+            resize(function () {
+              chart.chart.draw(data, options);
+            });
+          });
+        };
+
+        this.renderColumnChart = function (chart) {
+          waitForLoaded(function () {
+            var options = jsOptions(chart.data, chart.options);
+            var data = createDataTable(chart.data, "string");
+            chart.chart = new google.visualization.ColumnChart(chart.element);
+            resize(function () {
+              chart.chart.draw(data, options);
+            });
+          });
+        };
+
+        this.renderBarChart = function (chart) {
+          waitForLoaded(function () {
+            var chartOptions = {
+              hAxis: {
+                gridlines: {
+                  color: "#ccc"
+                }
+              }
+            };
+            var options = jsOptionsFunc(defaultOptions, hideLegend, setBarMin, setBarMax, setStacked)(chart.data, chart.options, chartOptions);
+            var data = createDataTable(chart.data, "string");
+            chart.chart = new google.visualization.BarChart(chart.element);
+            resize(function () {
+              chart.chart.draw(data, options);
+            });
+          });
+        };
+
+        this.renderAreaChart = function (chart) {
+          waitForLoaded(function () {
+            var chartOptions = {
+              isStacked: true,
+              pointSize: 0,
+              areaOpacity: 0.5
+            };
+            var options = jsOptions(chart.data, chart.options, chartOptions);
+            var data = createDataTable(chart.data, chart.options.discrete ? "string" : "datetime");
+            chart.chart = new google.visualization.AreaChart(chart.element);
+            resize(function () {
+              chart.chart.draw(data, options);
+            });
+          });
+        };
+
+        this.renderGeoChart = function (chart) {
+          waitForLoaded(function () {
+            var chartOptions = {
+              legend: "none",
+              colorAxis: {
+                colors: chart.options.colors || ["#f6c7b6", "#ce502d"]
+              }
+            };
+            var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
+
+            var data = new google.visualization.DataTable();
+            data.addColumn("string", "");
+            data.addColumn("number", chart.options.label || "Value");
+            data.addRows(chart.data);
+
+            chart.chart = new google.visualization.GeoChart(chart.element);
+            resize(function () {
+              chart.chart.draw(data, options);
+            });
+          });
+        };
+
+        this.renderScatterChart = function (chart) {
+          waitForLoaded(function () {
+            var chartOptions = {};
+            var options = jsOptions(chart.data, chart.options, chartOptions);
+            var data = createDataTable(chart.data, "number");
+
+            chart.chart = new google.visualization.ScatterChart(chart.element);
+            resize(function () {
+              chart.chart.draw(data, options);
+            });
+          });
+        };
 
-      this.renderLineChart = function (chart) {
-        waitForLoaded(function () {
-          var options = jsOptions(chart.data, chart.options);
-          var data = createDataTable(chart.data, chart.options.discrete ? "string" : "datetime");
-          chart.chart = new google.visualization.LineChart(chart.element);
-          resize(function () {
-            chart.chart.draw(data, options);
+        this.renderTimeline = function (chart) {
+          waitForLoaded("timeline", function () {
+            var chartOptions = {
+              legend: "none"
+            };
+
+            if (chart.options.colors) {
+              chartOptions.colors = chart.options.colors;
+            }
+            var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
+
+            var data = new google.visualization.DataTable();
+            data.addColumn({type: "string", id: "Name"});
+            data.addColumn({type: "date", id: "Start"});
+            data.addColumn({type: "date", id: "End"});
+            data.addRows(chart.data);
+
+            chart.element.style.lineHeight = "normal";
+            chart.chart = new google.visualization.Timeline(chart.element);
+
+            resize(function () {
+              chart.chart.draw(data, options);
+            });
           });
-        });
+        };
       };
 
-      this.renderPieChart = function (chart) {
-        waitForLoaded(function () {
-          var chartOptions = {
-            chartArea: {
-              top: "10%",
-              height: "80%"
+      adapters.push(GoogleChartsAdapter);
+    }
+    if (!ChartjsAdapter && "Chart" in window) {
+      var ChartjsAdapter = new function () {
+        var Chart = window.Chart;
+
+        this.name = "chartjs";
+
+        var baseOptions = {
+          maintainAspectRatio: false,
+          animation: false
+        };
+
+        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: {}
+              }
+            ]
+          },
+          legend: {}
+        };
+
+        // 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", "#3B3EAC"
+        ];
+
+        var hideLegend = function (options) {
+          options.legend.display = false;
+        };
+
+        var setMin = function (options, min) {
+          if (min !== null) {
+            options.scales.yAxes[0].ticks.min = min;
+          }
+        };
+
+        var setMax = function (options, max) {
+          options.scales.yAxes[0].ticks.max = max;
+        };
+
+        var setStacked = function (options, stacked) {
+          options.scales.xAxes[0].stacked = !!stacked;
+          options.scales.yAxes[0].stacked = !!stacked;
+        };
+
+        var setXtitle = function (options, title) {
+          options.scales.xAxes[0].scaleLabel.display = true;
+          options.scales.xAxes[0].scaleLabel.labelString = title;
+        };
+
+        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) {
+          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);
+          options.scales.xAxes[0].ticks.callback = function (value) {
+            value = toStr(value);
+            if (value.length > maxLabelSize) {
+              return value.substring(0, maxLabelSize - 2) + "...";
+            } else {
+              return value;
             }
           };
-          if (chart.options.colors) {
-            chartOptions.colors = chart.options.colors;
+        };
+
+        var jsOptions = jsOptionsFunc(merge(baseOptions, defaultOptions), hideLegend, 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 detectType = (chartType === "line" || chartType === "area") && !chart.options.discrete;
+
+          var series = chart.data;
+
+          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];
+              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);
+              }
+            }
           }
-          var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
 
-          var data = new google.visualization.DataTable();
-          data.addColumn("string", "");
-          data.addColumn("number", "Value");
-          data.addRows(chart.data);
+          if (detectType) {
+            sortedLabels.sort(sortByNumber);
+          }
 
-          chart.chart = new google.visualization.PieChart(chart.element);
-          resize(function () {
-            chart.chart.draw(data, options);
-          });
-        });
-      };
+          var rows2 = [];
+          for (var j = 0; j < series.length; j++) {
+            rows2.push([]);
+          }
 
-      this.renderColumnChart = function (chart) {
-        waitForLoaded(function () {
-          var options = jsOptions(chart.data, chart.options);
-          var data = createDataTable(chart.data, "string");
-          chart.chart = new google.visualization.ColumnChart(chart.element);
-          resize(function () {
-            chart.chart.draw(data, options);
-          });
-        });
-      };
+          var day = true;
+          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);
+            } else {
+              value = i;
+            }
+            labels.push(value);
+            for (var j = 0; j < series.length; j++) {
+              rows2[j].push(rows[i][j])
+            }
+          }
 
-      this.renderBarChart = function (chart) {
-        waitForLoaded(function () {
-          var chartOptions = {
-            hAxis: {
-              gridlines: {
-                color: "#ccc"
+          for (var i = 0; i < series.length; i++) {
+            var s = series[i];
+
+            var backgroundColor = chartType !== "line" ? addOpacity(colors[i], 0.5) : colors[i];
+
+            var dataset = {
+              label: s.name,
+              data: rows2[i],
+              fill: chartType === "area",
+              borderColor: colors[i],
+              backgroundColor: backgroundColor,
+              pointBackgroundColor: colors[i],
+              borderWidth: 2
+            };
+
+            datasets.push(merge(dataset, s.library || {}));
+          }
+
+          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 options = jsOptionsFunc(defaultOptions, hideLegend, setBarMin, setBarMax, setStacked)(chart.data, chart.options, chartOptions);
-          var data = createDataTable(chart.data, "string");
-          chart.chart = new google.visualization.BarChart(chart.element);
-          resize(function () {
-            chart.chart.draw(data, options);
-          });
-        });
-      };
 
-      this.renderAreaChart = function (chart) {
-        waitForLoaded(function () {
-          var chartOptions = {
-            isStacked: true,
-            pointSize: 0,
-            areaOpacity: 0.5
-          };
-          var options = jsOptions(chart.data, chart.options, chartOptions);
-          var data = createDataTable(chart.data, chart.options.discrete ? "string" : "datetime");
-          chart.chart = new google.visualization.AreaChart(chart.element);
-          resize(function () {
-            chart.chart.draw(data, options);
-          });
-        });
-      };
+            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;
+              }
 
-      this.renderGeoChart = function (chart) {
-        waitForLoaded(function () {
-          var chartOptions = {
-            legend: "none",
-            colorAxis: {
-              colors: chart.options.colors || ["#f6c7b6", "#ce502d"]
+              if (step && timeDiff > 0) {
+                var unitStepSize = Math.ceil(timeDiff / step / (chart.element.offsetWidth / 100.0));
+                if (week) {
+                  unitStepSize = Math.ceil(unitStepSize / 7.0) * 7;
+                }
+                options.scales.xAxes[0].time.unitStepSize = unitStepSize;
+              }
+            }
+
+            if (!options.scales.xAxes[0].time.tooltipFormat && day) {
+              options.scales.xAxes[0].time.tooltipFormat = "ll";
             }
+          }
+
+          var data = {
+            labels: labels,
+            datasets: datasets
           };
-          var options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
 
-          var data = new google.visualization.DataTable();
-          data.addColumn("string", "");
-          data.addColumn("number", "Value");
-          data.addRows(chart.data);
+          return data;
+        };
 
-          chart.chart = new google.visualization.GeoChart(chart.element);
-          resize(function () {
-            chart.chart.draw(data, options);
-          });
-        });
-      };
+        this.renderLineChart = function (chart, chartType) {
+          var areaOptions = {};
+          if (chartType === "area") {
+            // TODO fix area stacked
+            // areaOptions.stacked = true;
+          }
+          var options = jsOptions(chart.data, merge(areaOptions, chart.options));
 
-      this.renderScatterChart = function (chart) {
-        waitForLoaded(function () {
-          var chartOptions = {};
-          var options = jsOptions(chart.data, chart.options, chartOptions);
-          var data = createDataTable(chart.data, "number");
+          var data = createDataTable(chart, options, chartType || "line");
 
-          chart.chart = new google.visualization.ScatterChart(chart.element);
-          resize(function () {
-            chart.chart.draw(data, options);
-          });
-        });
-      };
+          options.scales.xAxes[0].type = chart.options.discrete ? "category" : "time";
 
-      this.renderTimeline = function (chart) {
-        waitForLoaded("timeline", function () {
-          var chartOptions = {
-            legend: "none"
-          };
+          drawChart(chart, "line", data, options);
+        }
 
-          if (chart.options.colors) {
-            chartOptions.colors = chart.options.colors;
+        this.renderPieChart = function (chart) {
+          var options = merge(baseOptions, chart.options.library || {});
+
+          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 options = merge(merge(defaultOptions, chartOptions), chart.options.library || {});
 
-          var data = new google.visualization.DataTable();
-          data.addColumn({type: "string", id: "Name"});
-          data.addColumn({type: "date", id: "Start"});
-          data.addColumn({type: "date", id: "End"});
-          data.addRows(chart.data);
+          var data = {
+            labels: labels,
+            datasets: [
+              {
+                data: values,
+                backgroundColor: chart.options.colors || defaultColors
+              }
+            ]
+          };
 
-          chart.chart = new google.visualization.Timeline(chart.element);
+          drawChart(chart, "pie", data, options);
+        }
 
-          resize(function () {
-            chart.chart.draw(data, options);
-          });
-        });
-      };
-    };
+        this.renderColumnChart = function (chart, chartType) {
+          var options = jsOptions(chart.data, chart.options);
+          var data = createDataTable(chart, options, "column");
+          setLabelSize(chart, data, options);
+          drawChart(chart, (chartType === "bar" ? "horizontalBar" : "bar"), data, options);
+        }
+
+        var self = this;
 
-    adapters.push(GoogleChartsAdapter);
+        this.renderAreaChart = function (chart) {
+          self.renderLineChart(chart, "area");
+        };
+
+        this.renderBarChart = function (chart) {
+          self.renderColumnChart(chart, "bar")
+        }
+      }
+
+      adapters.push(ChartjsAdapter);
+    }
   }
 
   // TODO remove chartType if cross-browser way
@@ -772,6 +1081,10 @@
     fnName = "render" + chartType;
     adapterName = chart.options.adapter;
 
+    if (adapters.length == 0) {
+      loadAdapters();
+    }
+
     for (i = 0; i < adapters.length; i++) {
       adapter = adapters[i];
       if ((!adapterName || adapterName === adapter.name) && isFunction(adapter[fnName])) {
@@ -810,16 +1123,48 @@
     return d.getMilliseconds() + d.getSeconds() + d.getMinutes() + d.getHours() === 0;
   }
 
+  function isWeek(d, dayOfWeek) {
+    return isDay(d) && d.getDay() === dayOfWeek;
+  }
+
+  function isMonth(d) {
+    return isDay(d) && d.getDate() === 1;
+  }
+
+  function isYear(d) {
+    return isMonth(d) && d.getMonth() === 0;
+  }
+
+  function isDate(obj) {
+    return !isNaN(toDate(obj)) && toStr(obj).length >= 6;
+  }
+
+  function detectDiscrete(series) {
+    var i, j, data;
+    for (i = 0; i < series.length; i++) {
+      data = toArr(series[i].data);
+      for (j = 0; j < data.length; j++) {
+        if (!isDate(data[j][0])) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
   function processSeries(series, opts, keyType) {
     var i;
 
     // see if one series or multiple
     if (!isArray(series) || typeof series[0] !== "object" || isArray(series[0])) {
-      series = [{name: "Value", data: series}];
+      series = [{name: opts.label || "Value", data: series}];
       opts.hideLegend = true;
     } else {
       opts.hideLegend = false;
     }
+    if (config.smarterDiscrete && (opts.discrete === null || opts.discrete === undefined)) {
+      opts.discrete = detectDiscrete(series);
+    }
     if (opts.discrete) {
       keyType = "string";
     }