chartkick 1.1.3 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 128a490e06abdcd32d0c7b941b4b087b3a633827
-  data.tar.gz: fa41e91b74b5d857a5c4037a95795e975a911aa0
+  metadata.gz: b3fe5dc62f6b7171a27d19d76dd81e10b045a909
+  data.tar.gz: 9a7a9a2e5a3198176367141c7612cc28ae071296
 SHA512:
-  metadata.gz: e05a9b51baa1528c89fcc92c23c94b6f010b86e30554552e306ad4f2b502cf95e146b346b716f9dcd08faa3a85bab087fa14410c16ff7a912a7b43dec591c3ef
-  data.tar.gz: 2530a2f68acc7c21eb1f653a3b0a7719c2dc0dd41dbaa675402a1e1214b67c78eb08a3aefd27bb5b14231adc8faefa9686be4941ceeea18375a4758e153aa8e7
+  metadata.gz: e77ef7d0f14c393d270c7cbc4c340a14559c85b524593c7bfa7d773f4109e61d0bad93017193bf4edebb4897f9cf5fecb2ba5900eac7369ca7a61dfd850356f4
+  data.tar.gz: 0c0196a6877fd1a33eeece1e6990f3c9fbe6c1008890754ff9ce4d78ecde2669499b7947ecffcc6cfa3eeda1c6fbbf30d6620bbb39ebc284f1d1bad27906b4fd

data/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 1.2.0
+
+- Added bar chart and area chart
+- Resize Google Charts on window resize
+
 ## 1.1.3
 
 - Added content_for option

data/README.md

@@ -28,6 +28,18 @@ Column chart
 <%= column_chart Task.group_by_hour_of_day(:created_at).count %>
 ```
 
+Bar chart
+
+```erb
+<%= column_chart Event.group_by_day_of_week(:starts_at).count %>
+```
+
+Area chart
+
+```erb
+<%= area_chart Visit.group_by_minute(:created_at).count %>
+```
+
 Multiple series (except pie chart)
 
 ```erb
@@ -84,8 +96,8 @@ You can also pass a content_for option, which will put the javascript in a conte
 Then, in your layout:
 
 ```erb
-<%= yield :js_initialization # Rails %>
-<%= yield_content :js_initialization # Padrino %>
+<%= yield :js_initialization %> <%# Rails %>
+<%= yield_content :js_initialization %> <%# Padrino %>
 ```
 
 ### Data

data/app/assets/javascripts/chartkick.js

@@ -2,7 +2,7 @@
  * Chartkick.js
  * Create beautiful Javascript charts with minimal code
  * https://github.com/ankane/chartkick.js
- * v1.0.2
+ * v1.1.0
  * MIT License
  */
 
@@ -97,8 +97,9 @@
   }
 
   function jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax) {
-    return function(series, opts) {
+    return function(series, opts, chartOptions) {
       var options = merge({}, defaultOptions);
+      options = merge(options, chartOptions || {});
 
       // hide legend
       // this is *not* an external option!
@@ -127,11 +128,12 @@
   }
 
   // only functions that need defined specific to charting library
-  var renderLineChart, renderPieChart, renderColumnChart;
+  var renderLineChart, renderPieChart, renderColumnChart, renderBarChart, renderAreaChart;
 
   if ("Highcharts" in window) {
 
     var defaultOptions = {
+      chart: {},
       xAxis: {
         labels: {
           style: {
@@ -162,6 +164,12 @@
         style: {
           fontSize: "12px"
         }
+      },
+      plotOptions: {
+        areaspline: {},
+        series: {
+          marker: {}
+        }
       }
     };
 
@@ -179,10 +187,27 @@
 
     var jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax);
 
-    renderLineChart = function(element, series, opts) {
-      var options = jsOptions(series, opts), data, i, j;
+    renderLineChart = function(element, series, opts, chartType) {
+      chartType = chartType || "spline";
+      var chartOptions = {};
+      if (chartType === "areaspline") {
+        chartOptions = {
+          plotOptions: {
+            areaspline: {
+              stacking: "normal"
+            },
+            series: {
+              marker: {
+                enabled: false
+              }
+            }
+          }
+        };
+      }
+      var options = jsOptions(series, opts, chartOptions), data, i, j;
       options.xAxis.type = "datetime";
-      options.chart = {type: "spline", renderTo: element.id};
+      options.chart.type = chartType;
+      options.chart.renderTo = element.id;
 
       for (i = 0; i < series.length; i++) {
         data = series[i].data;
@@ -197,7 +222,7 @@
 
     renderPieChart = function(element, series, opts) {
       var options = merge(defaultOptions, opts.library || {});
-      options.chart = {renderTo: element.id};
+      options.chart.renderTo = element.id;
       options.series = [{
         type: "pie",
         name: "Value",
@@ -206,9 +231,11 @@
       new Highcharts.Chart(options);
     };
 
-    renderColumnChart = function(element, series, opts) {
+    renderColumnChart = function(element, series, opts, chartType) {
+      chartType = chartType || "column";
       var options = jsOptions(series, opts), i, j, s, d, rows = [];
-      options.chart = {type: "column", renderTo: element.id};
+      options.chart.type = chartType;
+      options.chart.renderTo = element.id;
 
       for (i = 0; i < series.length; i++) {
         s = series[i];
@@ -234,7 +261,7 @@
       for (i = 0; i < series.length; i++) {
         d = [];
         for (j = 0; j < categories.length; j++) {
-          d.push(rows[categories[j]][i]);
+          d.push(rows[categories[j]][i] || 0);
         }
 
         newSeries.push({
@@ -246,6 +273,14 @@
 
       new Highcharts.Chart(options);
     };
+
+    renderBarChart = function(element, series, opts) {
+      renderColumnChart(element, series, opts, "bar");
+    };
+
+    renderAreaChart = function(element, series, opts) {
+      renderLineChart(element, series, opts, "areaspline");
+    };
   } else if ("google" in window) { // Google charts
     // load from google
     var loaded = false;
@@ -263,6 +298,7 @@
 
     // Set chart options
     var defaultOptions = {
+      chartArea: {},
       fontName: "'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif",
       pointSize: 6,
       legend: {
@@ -282,7 +318,8 @@
         gridlines: {
           color: "transparent"
         },
-        baselineColor: "#ccc"
+        baselineColor: "#ccc",
+        viewWindow: {}
       },
       vAxis: {
         textStyle: {
@@ -312,6 +349,14 @@
       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 jsOptions = jsOptionsFunc(defaultOptions, hideLegend, setMin, setMax);
 
     // cant use object as key
@@ -348,22 +393,36 @@
       return data;
     };
 
+    var resize = function(callback) {
+      if (window.attachEvent) {
+        window.attachEvent("onresize", callback);
+      }
+      else if (window.addEventListener) {
+        window.addEventListener("resize", callback, true);
+      }
+      callback();
+    };
+
     renderLineChart = function(element, series, opts) {
       waitForLoaded(function() {
         var options = jsOptions(series, opts);
         var data = createDataTable(series, "datetime");
         var chart = new google.visualization.LineChart(element);
-        chart.draw(data, options);
+        resize( function() {
+          chart.draw(data, options);
+        });
       });
     };
 
     renderPieChart = function(element, series, opts) {
       waitForLoaded(function() {
-        var options = merge(defaultOptions, opts.library || {});
-        options.chartArea = {
-          top: "10%",
-          height: "80%"
+        var chartOptions = {
+          chartArea: {
+            top: "10%",
+            height: "80%"
+          }
         };
+        var options = merge(merge(defaultOptions, chartOptions), opts.library || {});
 
         var data = new google.visualization.DataTable();
         data.addColumn("string", "");
@@ -371,7 +430,9 @@
         data.addRows(series);
 
         var chart = new google.visualization.PieChart(element);
-        chart.draw(data, options);
+        resize( function() {
+          chart.draw(data, options);
+        });
       });
     };
 
@@ -380,11 +441,47 @@
         var options = jsOptions(series, opts);
         var data = createDataTable(series, "string");
         var chart = new google.visualization.ColumnChart(element);
-        chart.draw(data, options);
+        resize( function() {
+          chart.draw(data, options);
+        });
+      });
+    };
+
+    renderBarChart = function(element, series, opts) {
+       waitForLoaded(function() {
+        var chartOptions = {
+          hAxis: {
+            gridlines: {
+              color: "#ccc"
+            }
+          }
+        };
+        var options = jsOptionsFunc(defaultOptions, hideLegend, setBarMin, setBarMax)(series, opts, chartOptions);
+        var data = createDataTable(series, "string");
+        var chart = new google.visualization.BarChart(element);
+        resize( function() {
+          chart.draw(data, options);
+        });
+      });
+    };
+
+    renderAreaChart = function(element, series, opts) {
+      waitForLoaded(function() {
+        var chartOptions = {
+          isStacked: true,
+          pointSize: 0,
+          areaOpacity: 0.5
+        };
+        var options = jsOptions(series, opts, chartOptions);
+        var data = createDataTable(series, "datetime");
+        var chart = new google.visualization.AreaChart(element);
+        resize( function() {
+          chart.draw(data, options);
+        });
       });
     };
   } else { // no chart library installed
-    renderLineChart = renderPieChart = renderColumnChart = function() {
+    renderLineChart = renderPieChart = renderColumnChart = renderBarChart = renderAreaChart = function() {
       throw new Error("Please install Google Charts or Highcharts");
     };
   }
@@ -521,6 +618,14 @@
     renderPieChart(element, perfectData, opts);
   }
 
+  function processBarData(element, data, opts) {
+    renderBarChart(element, processSeries(data, opts, false), opts);
+  }
+
+  function processAreaData(element, data, opts) {
+    renderAreaChart(element, processSeries(data, opts, true), opts);
+  }
+
   function setElement(element, data, opts, callback) {
     if (typeof element === "string") {
       element = document.getElementById(element);
@@ -534,11 +639,17 @@
     LineChart: function(element, dataSource, opts) {
       setElement(element, dataSource, opts, processLineData);
     },
+    PieChart: function(element, dataSource, opts) {
+      setElement(element, dataSource, opts, processPieData);
+    },
     ColumnChart: function(element, dataSource, opts) {
       setElement(element, dataSource, opts, processColumnData);
     },
-    PieChart: function(element, dataSource, opts) {
-      setElement(element, dataSource, opts, processPieData);
+    BarChart: function(element, dataSource, opts) {
+      setElement(element, dataSource, opts, processBarData);
+    },
+    AreaChart: function(element, dataSource, opts) {
+      setElement(element, dataSource, opts, processAreaData);
     }
   };
 

data/lib/chartkick/helper.rb

@@ -16,6 +16,14 @@ module Chartkick
       chartkick_chart "ColumnChart", data_source, options
     end
 
+    def bar_chart(data_source, options = {})
+      chartkick_chart "BarChart", data_source, options
+    end
+
+    def area_chart(data_source, options = {})
+      chartkick_chart "AreaChart", data_source, options
+    end
+
     private
 
     def chartkick_chart(klass, data_source, options, &block)

data/lib/chartkick/version.rb

@@ -1,3 +1,3 @@
 module Chartkick
-  VERSION = "1.1.3"
+  VERSION = "1.2.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: chartkick
 version: !ruby/object:Gem::Version
-  version: 1.1.3
+  version: 1.2.0
 platform: ruby
 authors:
 - Andrew Kane
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-06-26 00:00:00.000000000 Z
+date: 2013-07-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler