chartjs-ror 0.0.1 → 1.0.0

data/README.md

@@ -1,6 +1,14 @@
 # chartjs-ror
 
-Simplifies using [Chart.js][] in Rails.
+Simplifies using [Chart.js][] in Rails views.
+
+* All of Chart.js's features via one line of Ruby.
+* Legends for your charts.
+* Renders charts on page load rather than DOMContentReady ([reason][browsersupport]).
+* Animates unless you have Modernizr and it doesn't detect canvas support ([reason][browsersupport]).  You can manually override this.
+
+NOTE: this is Rails 3.0 only at the moment, so pre-asset pipeline.  I plan to upgrade soon.
+
 
 ## Installation
 
@@ -12,12 +20,215 @@ And then execute:
 
     $ bundle
 
-Or install it yourself as:
+Add [Chart.js][] (and [Modernizr][] and [ExplorerCanvas][] if you need them) to your assets.
+
+Ensure your browsers will display `<figure/>` and `<figcaption/>` correctly.
 
-    $ gem install chartjs-ror
 
 ## Usage
 
-TODO: Write usage instructions here
+Each chart type has a corresponding helper for your views.  The helper methods take the same arguments as their Javascript counterparts.  The `options` are always optional.
+
+### Charts with multiple datasets
+
+```erb
+<%= line_chart labels, datasets, options %>
+<%= bar_chart labels, datasets, options %>
+<%= radar_chart labels, datasets, options %>
+```
+
+For example, to render a [line chart][linechart] in Javascript:
+
+```javascript
+var data = {
+	labels : ["January","February","March","April","May","June","July"],
+	datasets : [
+		{
+			fillColor : "rgba(220,220,220,0.5)",
+			strokeColor : "rgba(220,220,220,1)",
+			pointColor : "rgba(220,220,220,1)",
+			pointStrokeColor : "#fff",
+			data : [65,59,90,81,56,55,40]
+		},
+		{
+			fillColor : "rgba(151,187,205,0.5)",
+			strokeColor : "rgba(151,187,205,1)",
+			pointColor : "rgba(151,187,205,1)",
+			pointStrokeColor : "#fff",
+			data : [28,48,40,19,96,27,100]
+		}
+	]
+}
+var options = {};
+new Chart(ctx).Line(data,options);
+```
+
+The Ruby equivalent is:
+
+```ruby
+@data = {
+	labels: ["January","February","March","April","May","June","July"],
+	datasets: [
+		{
+			fillColor: "rgba(220,220,220,0.5)",
+			strokeColor: "rgba(220,220,220,1)",
+			pointColor: "rgba(220,220,220,1)",
+			pointStrokeColor: "#fff",
+			data: [65,59,90,81,56,55,40]
+		},
+		{
+			fillColor: "rgba(151,187,205,0.5)",
+			strokeColor: "rgba(151,187,205,1)",
+			pointColor: "rgba(151,187,205,1)",
+			pointStrokeColor: "#fff",
+			data: [28,48,40,19,96,27,100]
+		}
+	]
+}
+@options = {}
+<%= line_chart @data, @options %>
+```
+
+### Charts with one dataset
+
+```erb
+<%= polar_chart data, options %>
+<%= pie_chart data, options %>
+<%= doughnut_chart data, options %>
+```
+
+For example, to render a [pie chart][piechart] in Javascript:
+
+```javascript
+var data = [
+	{
+		value : 30,
+		color: "#D97041"
+	},
+	{
+		value : 90,
+		color: "#C7604C"
+	},
+	{
+		value : 24,
+		color: "#21323D"
+	},
+	{
+		value : 58,
+		color: "#9D9B7F"
+	},
+	{
+		value : 82,
+		color: "#7D4F6D"
+	},
+	{
+		value : 8,
+		color: "#584A5E"
+	}
+]
+new Chart(ctx).Pie(data,options);
+```
+
+And in Ruby:
+
+```ruby
+@data = [
+	{
+		value: 30,
+		color: "#D97041"
+	},
+	{
+		value: 90,
+		color: "#C7604C"
+	},
+	{
+		value: 24,
+		color: "#21323D"
+	},
+	{
+		value: 58,
+		color: "#9D9B7F"
+	},
+	{
+		value: 82,
+		color: "#7D4F6D"
+	},
+	{
+		value: 8,
+		color: "#584A5E"
+	}
+]
+<%= pie_chart @data %>
+```
+
+### Options
+
+You can put anything in the `options` hash that Chart.js recognises.  It also supports these non-Chart.js settings:
+
+* `:css_class` - class of the enclosing `<figure/>` - default is `chart`.
+* `:element_id` - id of the `<canvas/>` - default is `chart-n` where `n` is the 0-based index of the chart on the page.
+* `:width` - width of the canvas in px - default is `400`.
+* `:height` - height of the canvas in px - default is `400`.
+* `:legend` - an array of names for the datasets.
+
+### Sample output:
+
+```html
+<figure class="chart">
+  <canvas id="chart-0" width=400 height=400></canvas>
+  <!-- if :legend option is given -->
+  <figcaption>
+    <ol>
+      <li class="chart-0 dataset-0"><span></span>Apples</li>
+      <li class="chart-0 dataset-1"><span></span>Bananas</li>
+      <li class="chart-0 dataset-2"><span></span>Cherries</li>
+    </ol>
+  </figcaption>
+</figure>
+<script type="text/javascript">
+  var initChart = function() {
+    var data = {labels: ["Apples","Bananas","Cherries"], datasets: [{"data":[42,153,...],...}, ...]};
+    var opts = {"scaleFontSize":10};
+    if (!('animation' in opts)) {
+      opts['animation'] = (typeof Modernizr == 'undefined') || Modernizr.canvas;
+    }
+    var ctx = document.getElementById("chart-0").getContext('2d');
+    new Chart(ctx).Bar(data, opts);
+  };
+  if (window.addEventListener) { // W3C standard
+    window.addEventListener('load', initChart, false);
+  }
+  else if (window.attachEvent) { // IE
+    window.attachEvent('onload', initChart);
+  }
+</script>
+```
+
+### Legend
+
+Each item in the legend array is given two classes:
+
+* `dataset-m` where `m` is the 0-based index of the item.
+* The id value of the canvas.
+
+This lets you style legends in general but override the styles for specific charts.
+
+
+## Inspiration
+
+* [Chart.js][] (obviously)
+* [Chartkick][]
+
+
+## Intellectual Property
+
+Copyright Andrew Stewart, AirBlade Software.  Released under the MIT licence.
+
 
   [Chart.js]: http://www.chartjs.org/
+  [Chartkick]: http://ankane.github.io/chartkick/
+  [browsersupport]: http://www.chartjs.org/docs/#generalIssues-browserSupport
+  [linechart]: http://www.chartjs.org/docs/#lineChart-exampleUsage
+  [piechart]: http://www.chartjs.org/docs/#pieChart-exampleUsage
+  [Modernizr]: http://modernizr.com
+  [ExplorerCanvas]: https://code.google.com/p/explorercanvas

data/chartjs-ror.gemspec

@@ -1,11 +1,11 @@
 # -*- encoding: utf-8 -*-
 lib = File.expand_path('../lib', __FILE__)
 $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
-require 'chartjs-ror/version'
+require 'chartjs/version'
 
 Gem::Specification.new do |gem|
   gem.name          = "chartjs-ror"
-  gem.version       = Chartjs::Ror::VERSION
+  gem.version       = Chartjs::VERSION
   gem.authors       = ["Andy Stewart"]
   gem.email         = ["boss@airbladesoftware.com"]
   gem.description   = 'Simplifies using Chart.js in Rails'

data/lib/chartjs-ror.rb

@@ -1,7 +1,2 @@
-require "chartjs-ror/version"
-
-module Chartjs
-  module Ror
-    # Your code goes here...
-  end
-end
+# Internally use the chartjs namespace, not chartjs-ror.
+require 'chartjs'

data/lib/chartjs.rb

@@ -0,0 +1,5 @@
+require 'chartjs/railtie' if defined?(Rails)
+require "chartjs/version"
+
+module Chartjs
+end

data/lib/chartjs/chart_helpers.rb

@@ -0,0 +1,91 @@
+module Chartjs
+  module ChartHelpers
+
+    def line_chart(labels, datasets, options = {})
+      chart 'Line', labels, datasets, options
+    end
+
+    def bar_chart(labels, datasets, options = {})
+      chart 'Bar', labels, datasets, options
+    end
+
+    def radar_chart(labels, datasets, options = {})
+      chart 'Radar', labels, datasets, options
+    end
+
+    def polar_area_chart(data, options = {})
+      chart 'PolarArea', nil, data, options
+    end
+
+    def pie_chart(data, options = {})
+      chart 'Pie', nil, data, options
+    end
+
+    def doughnut_chart(data, options = {})
+      chart 'Doughnut', nil, data, options
+    end
+
+    private
+
+    def chart(klass, labels, datasets, options)
+      @chart_id ||= -1
+      element_id = options.delete(:id) || "chart-#{@chart_id += 1}"
+      css_class  = options.delete(:class)  || 'chart'
+      width  = options.delete(:width)  || '400'
+      height = options.delete(:height) || '400'
+
+      canvas = content_tag(:canvas, id: element_id, width: width, height: height) do
+      end
+
+      # <figcaption>
+      #   <ol>
+      #     <li class="chart-0 dataset-0"><span/>Apples</li>
+      #     <li class="chart-0 dataset-1"><span/>Bananas</li>
+      #     <li class="chart-0 dataset-2"><span/>Cherries</li>
+      #   </ol>
+      # </figcaption>
+      legend = if options[:legend]
+                 content_tag :figcaption do
+                   content_tag :ol do
+                     options.delete(:legend).each_with_index do |name, index|
+                       concat content_tag(:li, (content_tag(:span) + name), class: "#{element_id} dataset-#{index}")
+                     end
+                   end
+                 end
+               else
+                 ''
+               end
+
+      script = javascript_tag do
+        <<-END.html_safe
+        var initChart = function() {
+          var data = #{data_for labels, datasets};
+          var opts = #{options.to_json};
+          if (!('animation' in opts)) {
+            opts['animation'] = (typeof Modernizr == 'undefined') || Modernizr.canvas;
+          }
+          var ctx = document.getElementById(#{element_id.to_json}).getContext('2d');
+          new Chart(ctx).#{klass}(data, opts);
+        };
+        if (window.addEventListener) { // W3C standard
+          window.addEventListener('load', initChart, false);
+        }
+        else if (window.attachEvent) { // IE
+          window.attachEvent('onload', initChart);
+        }
+        END
+      end
+
+      content_tag(:figure, (canvas + legend), class: css_class) + script
+    end
+
+    def data_for(labels, datasets)
+      if labels
+        "{labels: #{labels.to_json}, datasets: #{datasets.to_json}}"
+      else
+        datasets.to_json
+      end
+    end
+
+  end
+end

data/lib/chartjs/railtie.rb

@@ -0,0 +1,9 @@
+require 'chartjs/chart_helpers'
+
+module Chartjs
+  class Railtie < Rails::Railtie
+    initializer 'chartjs.chart_helpers' do
+      ActionView::Base.send :include, Chartjs::ChartHelpers
+    end
+  end
+end

data/lib/chartjs/version.rb

@@ -0,0 +1,3 @@
+module Chartjs
+  VERSION = "1.0.0"
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: chartjs-ror
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 1.0.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-06-05 00:00:00.000000000 Z
+date: 2013-06-06 00:00:00.000000000 Z
 dependencies: []
 description: Simplifies using Chart.js in Rails
 email:
@@ -25,7 +25,10 @@ files:
 - Rakefile
 - chartjs-ror.gemspec
 - lib/chartjs-ror.rb
-- lib/chartjs-ror/version.rb
+- lib/chartjs.rb
+- lib/chartjs/chart_helpers.rb
+- lib/chartjs/railtie.rb
+- lib/chartjs/version.rb
 homepage: https://github.com/airblade/chartjs-ror
 licenses: []
 post_install_message: 

data/lib/chartjs-ror/version.rb

@@ -1,5 +0,0 @@
-module Chartjs
-  module Ror
-    VERSION = "0.0.1"
-  end
-end