chartjs-ror 2.0.0 → 2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 490a1e2096ba372b3b63863ed43e1d34e86e1711
-  data.tar.gz: ce920b4b25c2eb11a82355c88bf5b664ca653a2b
+  metadata.gz: 6f2ebce780d9ca9649f2b1fcd39b5fa6fa09db3b
+  data.tar.gz: 1363a9862e86500e3387284e7e43d95ba3cb91be
 SHA512:
-  metadata.gz: d44fae07c64815ef874576c58e42ec99e69468bcb4d2b66fecd5c09723e17afb44502b0cf64083952dce1902a8929807e4b52a94d582c04baaedb67db2eb8d3c
-  data.tar.gz: 4eca5a3f71a5d620de2ee519312fd5cf838844dd44b1933daa8b551b33688c199b7a0752f65fb48ec75e7c5365149986993a8e121fe4f4c461bd73532fd68070
+  metadata.gz: 007b7d77f5c06bdd6c18cc782940073624d469e8e4ec00c582d156702c5fee413412baae7f7091e660305aac22a77f8a00ed254eace2ea128d507287954ec06a
+  data.tar.gz: 9030000d33387b7259a27cb871df2d7906867f7f2d9f31b6a6cf636444f7797fed42371f3d0577564f0d70a99077be465b094dd412d174b6e3b051f8bad28737

data/README.md

@@ -33,36 +33,44 @@ You only need [excanvas][ExplorerCanvas] for IE7 and IE8.  Add [Modernizr][] if
 
 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 %>
+<%= line_chart     data, options %>
+<%= bar_chart      data, options %>
+<%= radar_chart    data, options %>
+<%= polar_chart    data, options %>
+<%= pie_chart      data, options %>
+<%= doughnut_chart data, 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]
-		}
-	]
-}
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+        {
+            label: "My First dataset",
+            fillColor: "rgba(220,220,220,0.2)",
+            strokeColor: "rgba(220,220,220,1)",
+            pointColor: "rgba(220,220,220,1)",
+            pointStrokeColor: "#fff",
+            pointHighlightFill: "#fff",
+            pointHighlightStroke: "rgba(220,220,220,1)",
+            data: [65, 59, 80, 81, 56, 55, 40]
+        },
+        {
+            label: "My Second dataset",
+            fillColor: "rgba(151,187,205,0.2)",
+            strokeColor: "rgba(151,187,205,1)",
+            pointColor: "rgba(151,187,205,1)",
+            pointStrokeColor: "#fff",
+            pointHighlightFill: "#fff",
+            pointHighlightStroke: "rgba(151,187,205,1)",
+            data: [28, 48, 40, 19, 86, 27, 90]
+        }
+    ]
+};
 var options = {};
 new Chart(ctx).Line(data,options);
 ```
@@ -70,109 +78,44 @@ 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]
-		}
-	]
+data = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+        {
+            label: "My First dataset",
+            fillColor: "rgba(220,220,220,0.2)",
+            strokeColor: "rgba(220,220,220,1)",
+            pointColor: "rgba(220,220,220,1)",
+            pointStrokeColor: "#fff",
+            pointHighlightFill: "#fff",
+            pointHighlightStroke: "rgba(220,220,220,1)",
+            data: [65, 59, 80, 81, 56, 55, 40]
+        },
+        {
+            label: "My Second dataset",
+            fillColor: "rgba(151,187,205,0.2)",
+            strokeColor: "rgba(151,187,205,1)",
+            pointColor: "rgba(151,187,205,1)",
+            pointStrokeColor: "#fff",
+            pointHighlightFill: "#fff",
+            pointHighlightStroke: "rgba(151,187,205,1)",
+            data: [28, 48, 40, 19, 86, 27, 90]
+        }
+    ]
 }
-@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 = {}
+<%= line_chart data, options %>
 ```
 
 ### Options
 
 You can put anything in the `options` hash that Chart.js recognises.  It also supports these non-Chart.js settings:
 
-* `: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`.
+* `: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`.
+* `:generateLegend` - whether or not to generate a legend - default is `false`.
 
 ### Sample output:
 
@@ -195,17 +138,17 @@ You can put anything in the `options` hash that Chart.js recognises.  It also su
       window.Chart["chart-0"] = chart;
 
       var legend = chart.generateLegend();
-      if (legend.trim().length > 0) {
-        var legendHolder = document.createElement("div");
-        legendHolder.innerHTML = legend;
-        canvas.parentNode.insertBefore(legendHolder.firstChild, canvas.nextSibling);
-      }
+      var legendHolder = document.createElement("div");
+      legendHolder.innerHTML = legend;
+      canvas.parentNode.insertBefore(legendHolder.firstChild, canvas.nextSibling);
     };
     if (window.addEventListener) {
-      window.addEventListener('load', initChart, false);
+      window.addEventListener("load", initChart, false);
+      document.addEventListener("page:load", initChart, false);
     }
     else if (window.attachEvent) {
-      window.attachEvent('onload', initChart);
+      window.attachEvent("onload", initChart);
+      document.attachEvent("page:load", initChart);
     }
   })();
 </script>
@@ -214,11 +157,11 @@ You can put anything in the `options` hash that Chart.js recognises.  It also su
 The Javascript is actually written out on a single line but you get the idea.
 
 
-### Templates (tooltips and legends)
+### Templates (tooltips and legends) and Rails views
 
 If you specify a custom template, e.g. in `legendTemplate` or `tooltipTemplate`, you must escape opening tags in the Javascript-template string, i.e. use `<%%= value %>` instead of `<%= value %>`.
 
-You need to add an escape `%` character for each level of rendering.  For exampe:
+You need to add an escape `%` character for each level of rendering.  For example:
 
 - If your view calls the chart helper directly, use `<%%= value %>`.
 - If your view renders a partial which calls the chart helper, use `<%%%= value %>`.
@@ -226,9 +169,7 @@ You need to add an escape `%` character for each level of rendering.  For exampe
 
 ### Legend
 
-A legend will be rendered using `chart.generateLegend()` ([docs][advanced]).
-
-If you don't want a legend, supply `legendTemplate: " "` in the options for your chart.  For some reason an empty string causes an exception inside Chart.js so use a single space.
+If you pass the option `generateLegend: true`, a legend will be rendered using `chart.generateLegend()` ([docs][advanced]).
 
 
 ### Scale calculations
@@ -236,12 +177,6 @@ If you don't want a legend, supply `legendTemplate: " "` in the options for your
 The plugin implements its own abscissa scale calculations which I prefer to Chart.js's (see [Chart.js#132][calculations]).  You can opt-in to these calculations by passing `scaleOverride: true` in the `options` hash, without any of the other scale override keys (`scaleSteps`, `scaleStepWidth`, `scaleStartValue`).
 
 
-## Inspiration
-
-* [Chart.js][] (obviously)
-* [Chartkick][]
-
-
 ## Intellectual Property
 
 Copyright Andrew Stewart, AirBlade Software.  Released under the MIT licence.

data/lib/chartjs/chart_helpers.rb

@@ -1,33 +1,16 @@
 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
+    %w[ Line Bar Radar PolarArea Pie Doughnut ].each do |type|
+      camel_type = type.gsub(/(\w)([A-Z])/, '\1_\2').downcase
+      define_method "#{camel_type}_chart" do |data, options = {}|    # def polar_area_chart(data, options = {})
+        chart type, data, options                                    #   chart 'PolarArea', data, options
+      end                                                            # end
     end
 
     private
 
-    def chart(klass, labels, datasets, options)
+    def chart(klass, data, options)
       @chart_id ||= -1
       element_id = options.delete(:id)     || "chart-#{@chart_id += 1}"
       css_class  = options.delete(:class)  || 'chart'
@@ -39,14 +22,22 @@ module Chartjs
 
       # Alternative scale calculations.
       if options[:scaleOverride] && !options.has_key?(:scaleSteps)
-        options.merge! ordinate_scale(combined_data(datasets))
+        options.merge! ordinate_scale(combined_data(data))
       end
 
+      generate_legend = options.delete :generateLegend
+      legend = <<-END
+        var legend = chart.generateLegend();
+        var legendHolder = document.createElement("div");
+        legendHolder.innerHTML = legend;
+        canvas.parentNode.insertBefore(legendHolder.firstChild, canvas.nextSibling);
+      END
+
       script = javascript_tag do
         <<-END.squish.html_safe
         (function() {
           var initChart = function() {
-            var data = #{data_for labels, datasets};
+            var data = #{data.to_json};
             var opts = #{options.to_json};
             if (!("animation" in opts)) {
               opts["animation"] = (typeof Modernizr == "undefined") || Modernizr.canvas;
@@ -56,20 +47,17 @@ module Chartjs
             var chart = new Chart(ctx).#{klass}(data, opts);
             window.Chart[#{element_id.to_json}] = chart;
 
-            var legend = chart.generateLegend();
-            if (legend.trim().length > 0) {
-              var legendHolder = document.createElement("div");
-              legendHolder.innerHTML = legend;
-              canvas.parentNode.insertBefore(legendHolder.firstChild, canvas.nextSibling);
-            }
+            #{legend if generate_legend}
           };
           /* W3C standard */
           if (window.addEventListener) {
             window.addEventListener("load", initChart, false);
+            document.addEventListener("page:load", initChart, false);
           }
           /* IE */
           else if (window.attachEvent) {
             window.attachEvent("onload", initChart);
+            document.attachEvent("page:load", initChart);
           }
         })();
         END
@@ -78,17 +66,13 @@ module Chartjs
       content_tag(:figure, canvas, class: css_class) + script
     end
 
-    def data_for(labels, datasets)
-      if labels
-        "{labels: #{labels.to_json}, datasets: #{datasets.to_json}}"
+    def combined_data(data)
+      if data.is_a? Array
+        data.map { |datum| datum[:value] }
       else
-        datasets.to_json
+        data[:datasets].flat_map { |dataset| dataset[:data] }
       end
     end
 
-    def combined_data(datasets)
-      datasets.map { |d| d[:data] || d[:value] }.flatten
-    end
-
   end
 end

data/lib/chartjs/version.rb

@@ -1,3 +1,3 @@
 module Chartjs
-  VERSION = "2.0.0"
+  VERSION = "2.1.0"
 end

data/vendor/assets/javascripts/Chart.js

@@ -1,9 +1,9 @@
 /*!
  * Chart.js
  * http://chartjs.org/
- * Version: 1.0.1-beta.4
+ * Version: 1.0.1
  *
- * Copyright 2014 Nick Downie
+ * Copyright 2015 Nick Downie
  * Released under the MIT license
  * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
  */
@@ -92,12 +92,15 @@
 			// Boolean - whether or not the chart should be responsive and resize when the browser does.
 			responsive: false,
 
-                        // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
-                        maintainAspectRatio: true,
+			// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
+			maintainAspectRatio: true,
 
 			// Boolean - Determines whether to draw tooltips on the canvas or not - attaches events to touchmove & mousemove
 			showTooltips: true,
 
+			// Boolean - Determines whether to draw built-in tooltip or call custom tooltip function
+			customTooltips: false,
+
 			// Array - Array of string names to attach tooltip events
 			tooltipEvents: ["mousemove", "touchstart", "touchmove", "mouseout"],
 
@@ -238,7 +241,7 @@
 				if (filterCallback(currentItem)){
 					return currentItem;
 				}
-			};
+			}
 		},
 		findPreviousWhere = helpers.findPreviousWhere = function(arrayToSearch, filterCallback, startIndex){
 			// Default to end of the array
@@ -250,7 +253,7 @@
 				if (filterCallback(currentItem)){
 					return currentItem;
 				}
-			};
+			}
 		},
 		inherits = helpers.inherits = function(extensions){
 			//Basic javascript inheritance based on the model created in Backbone.js
@@ -441,7 +444,9 @@
 		//Templating methods
 		//Javascript micro templating by John Resig - source at http://ejohn.org/blog/javascript-micro-templating/
 		template = helpers.template = function(templateString, valuesObject){
-			 // If templateString is function rather than string-template - call the function for valuesObject
+
+			// If templateString is function rather than string-template - call the function for valuesObject
+
 			if(templateString instanceof Function){
 			 	return templateString(valuesObject);
 		 	}
@@ -830,7 +835,7 @@
 				newHeight = this.options.maintainAspectRatio ? newWidth / this.chart.aspectRatio : getMaximumHeight(this.chart.canvas);
 
 			canvas.width = this.chart.width = newWidth;
-			canvas.height =  this.chart.height = newHeight;
+			canvas.height = this.chart.height = newHeight;
 
 			retinaScale(this.chart);
 
@@ -866,6 +871,21 @@
 		destroy : function(){
 			this.clear();
 			unbindEvents(this, this.events);
+			var canvas = this.chart.canvas;
+
+			// Reset canvas height/width attributes starts a fresh with the canvas context
+			canvas.width = this.chart.width;
+			canvas.height = this.chart.height;
+
+			// < IE9 doesn't support removeProperty
+			if (canvas.style.removeProperty) {
+				canvas.style.removeProperty('width');
+				canvas.style.removeProperty('height');
+			} else {
+				canvas.style.removeAttribute('width');
+				canvas.style.removeAttribute('height');
+			}
+
 			delete Chart.instances[this.id];
 		},
 		showTooltip : function(ChartElements, forceRedraw){
@@ -895,6 +915,9 @@
 				this.activeElements = ChartElements;
 			}
 			this.draw();
+			if(this.options.customTooltips){
+				this.options.customTooltips(false);
+			}
 			if (ChartElements.length > 0){
 				// If we have multiple datasets, show a MultiTooltip for all of the data points at that index
 				if (this.datasets && this.datasets.length > 1) {
@@ -975,7 +998,8 @@
 						legendColorBackground : this.options.multiTooltipKeyBackground,
 						title: ChartElements[0].label,
 						chart: this.chart,
-						ctx: this.chart.ctx
+						ctx: this.chart.ctx,
+						custom: this.options.customTooltips
 					}).draw();
 
 				} else {
@@ -994,7 +1018,8 @@
 							caretHeight: this.options.tooltipCaretSize,
 							cornerRadius: this.options.tooltipCornerRadius,
 							text: template(this.options.tooltipTemplate, Element),
-							chart: this.chart
+							chart: this.chart,
+							custom: this.options.customTooltips
 						}).draw();
 					}, this);
 				}
@@ -1250,7 +1275,7 @@
 			this.yAlign = "above";
 
 			//Distance between the actual element.y position and the start of the tooltip caret
-			var caretPadding = 2;
+			var caretPadding = this.caretPadding = 2;
 
 			var tooltipWidth = ctx.measureText(this.text).width + 2*this.xPadding,
 				tooltipRectHeight = this.fontSize + 2*this.yPadding,
@@ -1272,47 +1297,53 @@
 
 			ctx.fillStyle = this.fillColor;
 
-			switch(this.yAlign)
-			{
-			case "above":
-				//Draw a caret above the x/y
-				ctx.beginPath();
-				ctx.moveTo(this.x,this.y - caretPadding);
-				ctx.lineTo(this.x + this.caretHeight, this.y - (caretPadding + this.caretHeight));
-				ctx.lineTo(this.x - this.caretHeight, this.y - (caretPadding + this.caretHeight));
-				ctx.closePath();
-				ctx.fill();
-				break;
-			case "below":
-				tooltipY = this.y + caretPadding + this.caretHeight;
-				//Draw a caret below the x/y
-				ctx.beginPath();
-				ctx.moveTo(this.x, this.y + caretPadding);
-				ctx.lineTo(this.x + this.caretHeight, this.y + caretPadding + this.caretHeight);
-				ctx.lineTo(this.x - this.caretHeight, this.y + caretPadding + this.caretHeight);
-				ctx.closePath();
-				ctx.fill();
-				break;
+			// Custom Tooltips
+			if(this.custom){
+				this.custom(this);
 			}
+			else{
+				switch(this.yAlign)
+				{
+				case "above":
+					//Draw a caret above the x/y
+					ctx.beginPath();
+					ctx.moveTo(this.x,this.y - caretPadding);
+					ctx.lineTo(this.x + this.caretHeight, this.y - (caretPadding + this.caretHeight));
+					ctx.lineTo(this.x - this.caretHeight, this.y - (caretPadding + this.caretHeight));
+					ctx.closePath();
+					ctx.fill();
+					break;
+				case "below":
+					tooltipY = this.y + caretPadding + this.caretHeight;
+					//Draw a caret below the x/y
+					ctx.beginPath();
+					ctx.moveTo(this.x, this.y + caretPadding);
+					ctx.lineTo(this.x + this.caretHeight, this.y + caretPadding + this.caretHeight);
+					ctx.lineTo(this.x - this.caretHeight, this.y + caretPadding + this.caretHeight);
+					ctx.closePath();
+					ctx.fill();
+					break;
+				}
 
-			switch(this.xAlign)
-			{
-			case "left":
-				tooltipX = this.x - tooltipWidth + (this.cornerRadius + this.caretHeight);
-				break;
-			case "right":
-				tooltipX = this.x - (this.cornerRadius + this.caretHeight);
-				break;
-			}
+				switch(this.xAlign)
+				{
+				case "left":
+					tooltipX = this.x - tooltipWidth + (this.cornerRadius + this.caretHeight);
+					break;
+				case "right":
+					tooltipX = this.x - (this.cornerRadius + this.caretHeight);
+					break;
+				}
 
-			drawRoundedRectangle(ctx,tooltipX,tooltipY,tooltipWidth,tooltipRectHeight,this.cornerRadius);
+				drawRoundedRectangle(ctx,tooltipX,tooltipY,tooltipWidth,tooltipRectHeight,this.cornerRadius);
 
-			ctx.fill();
+				ctx.fill();
 
-			ctx.fillStyle = this.textColor;
-			ctx.textAlign = "center";
-			ctx.textBaseline = "middle";
-			ctx.fillText(this.text, tooltipX + tooltipWidth/2, tooltipY + tooltipRectHeight/2);
+				ctx.fillStyle = this.textColor;
+				ctx.textAlign = "center";
+				ctx.textBaseline = "middle";
+				ctx.fillText(this.text, tooltipX + tooltipWidth/2, tooltipY + tooltipRectHeight/2);
+			}
 		}
 	});
 
@@ -1366,36 +1397,42 @@
 
 		},
 		draw : function(){
-			drawRoundedRectangle(this.ctx,this.x,this.y - this.height/2,this.width,this.height,this.cornerRadius);
-			var ctx = this.ctx;
-			ctx.fillStyle = this.fillColor;
-			ctx.fill();
-			ctx.closePath();
+			// Custom Tooltips
+			if(this.custom){
+				this.custom(this);
+			}
+			else{
+				drawRoundedRectangle(this.ctx,this.x,this.y - this.height/2,this.width,this.height,this.cornerRadius);
+				var ctx = this.ctx;
+				ctx.fillStyle = this.fillColor;
+				ctx.fill();
+				ctx.closePath();
 
-			ctx.textAlign = "left";
-			ctx.textBaseline = "middle";
-			ctx.fillStyle = this.titleTextColor;
-			ctx.font = this.titleFont;
+				ctx.textAlign = "left";
+				ctx.textBaseline = "middle";
+				ctx.fillStyle = this.titleTextColor;
+				ctx.font = this.titleFont;
 
-			ctx.fillText(this.title,this.x + this.xPadding, this.getLineHeight(0));
+				ctx.fillText(this.title,this.x + this.xPadding, this.getLineHeight(0));
 
-			ctx.font = this.font;
-			helpers.each(this.labels,function(label,index){
-				ctx.fillStyle = this.textColor;
-				ctx.fillText(label,this.x + this.xPadding + this.fontSize + 3, this.getLineHeight(index + 1));
+				ctx.font = this.font;
+				helpers.each(this.labels,function(label,index){
+					ctx.fillStyle = this.textColor;
+					ctx.fillText(label,this.x + this.xPadding + this.fontSize + 3, this.getLineHeight(index + 1));
 
-				//A bit gnarly, but clearing this rectangle breaks when using explorercanvas (clears whole canvas)
-				//ctx.clearRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
-				//Instead we'll make a white filled block to put the legendColour palette over.
+					//A bit gnarly, but clearing this rectangle breaks when using explorercanvas (clears whole canvas)
+					//ctx.clearRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
+					//Instead we'll make a white filled block to put the legendColour palette over.
 
-				ctx.fillStyle = this.legendColorBackground;
-				ctx.fillRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
+					ctx.fillStyle = this.legendColorBackground;
+					ctx.fillRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
 
-				ctx.fillStyle = this.legendColors[index].fill;
-				ctx.fillRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
+					ctx.fillStyle = this.legendColors[index].fill;
+					ctx.fillRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
 
 
-			},this);
+				},this);
+			}
 		}
 	});
 
@@ -1560,14 +1597,24 @@
 				ctx.font = this.font;
 				each(this.yLabels,function(labelString,index){
 					var yLabelCenter = this.endPoint - (yLabelGap * index),
-						linePositionY = Math.round(yLabelCenter);
+						linePositionY = Math.round(yLabelCenter),
+						drawHorizontalLine = this.showHorizontalLines;
 
 					ctx.textAlign = "right";
 					ctx.textBaseline = "middle";
 					if (this.showLabels){
 						ctx.fillText(labelString,xStart - 10,yLabelCenter);
 					}
-					ctx.beginPath();
+
+					// This is X axis, so draw it
+					if (index === 0 && !drawHorizontalLine){
+						drawHorizontalLine = true;
+					}
+
+					if (drawHorizontalLine){
+						ctx.beginPath();
+					}
+
 					if (index > 0){
 						// This is a grid line in the centre, so drop that
 						ctx.lineWidth = this.gridLineWidth;
@@ -1580,10 +1627,12 @@
 
 					linePositionY += helpers.aliasPixel(ctx.lineWidth);
 
-					ctx.moveTo(xStart, linePositionY);
-					ctx.lineTo(this.width, linePositionY);
-					ctx.stroke();
-					ctx.closePath();
+					if(drawHorizontalLine){
+						ctx.moveTo(xStart, linePositionY);
+						ctx.lineTo(this.width, linePositionY);
+						ctx.stroke();
+						ctx.closePath();
+					}
 
 					ctx.lineWidth = this.lineWidth;
 					ctx.strokeStyle = this.lineColor;
@@ -1599,9 +1648,17 @@
 					var xPos = this.calculateX(index) + aliasPixel(this.lineWidth),
 						// Check to see if line/bar here and decide where to place the line
 						linePos = this.calculateX(index - (this.offsetGridLines ? 0.5 : 0)) + aliasPixel(this.lineWidth),
-						isRotated = (this.xLabelRotation > 0);
+						isRotated = (this.xLabelRotation > 0),
+						drawVerticalLine = this.showVerticalLines;
 
-					ctx.beginPath();
+					// This is Y axis, so draw it
+					if (index === 0 && !drawVerticalLine){
+						drawVerticalLine = true;
+					}
+
+					if (drawVerticalLine){
+						ctx.beginPath();
+					}
 
 					if (index > 0){
 						// This is a grid line in the centre, so drop that
@@ -1612,10 +1669,13 @@
 						ctx.lineWidth = this.lineWidth;
 						ctx.strokeStyle = this.lineColor;
 					}
-					ctx.moveTo(linePos,this.endPoint);
-					ctx.lineTo(linePos,this.startPoint - 3);
-					ctx.stroke();
-					ctx.closePath();
+
+					if (drawVerticalLine){
+						ctx.moveTo(linePos,this.endPoint);
+						ctx.lineTo(linePos,this.startPoint - 3);
+						ctx.stroke();
+						ctx.closePath();
+					}
 
 
 					ctx.lineWidth = this.lineWidth;
@@ -1963,6 +2023,12 @@
 		//Number - Width of the grid lines
 		scaleGridLineWidth : 1,
 
+		//Boolean - Whether to show horizontal lines (except X axis)
+		scaleShowHorizontalLines: true,
+
+		//Boolean - Whether to show vertical lines (except Y axis)
+		scaleShowVerticalLines: true,
+
 		//Boolean - If there is a stroke on each bar
 		barShowStroke : true,
 
@@ -2150,6 +2216,8 @@
 				font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
 				lineWidth : this.options.scaleLineWidth,
 				lineColor : this.options.scaleLineColor,
+				showHorizontalLines : this.options.scaleShowHorizontalLines,
+				showVerticalLines : this.options.scaleShowVerticalLines,
 				gridLineWidth : (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
 				gridLineColor : (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
 				padding : (this.options.showScale) ? 0 : (this.options.barShowStroke) ? this.options.barStrokeWidth : 0,
@@ -2236,6 +2304,7 @@
 
 
 }).call(this);
+
 (function(){
 	"use strict";
 
@@ -2438,6 +2507,12 @@
 		//Number - Width of the grid lines
 		scaleGridLineWidth : 1,
 
+		//Boolean - Whether to show horizontal lines (except X axis)
+		scaleShowHorizontalLines: true,
+
+		//Boolean - Whether to show vertical lines (except Y axis)
+		scaleShowVerticalLines: true,
+
 		//Boolean - Whether the line is curved between points
 		bezierCurve : true,
 
@@ -2612,6 +2687,8 @@
 				font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
 				lineWidth : this.options.scaleLineWidth,
 				lineColor : this.options.scaleLineColor,
+				showHorizontalLines : this.options.scaleShowHorizontalLines,
+				showVerticalLines : this.options.scaleShowVerticalLines,
 				gridLineWidth : (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
 				gridLineColor : (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
 				padding: (this.options.showScale) ? 0 : this.options.pointDotRadius + this.options.pointDotStrokeWidth,
@@ -2786,6 +2863,7 @@
 
 
 }).call(this);
+
 (function(){
 	"use strict";
 
@@ -3376,4 +3454,4 @@
 
 
 
-}).call(this);
+}).call(this);

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: chartjs-ror
 version: !ruby/object:Gem::Version
-  version: 2.0.0
+  version: 2.1.0
 platform: ruby
 authors:
 - Andy Stewart
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-11-07 00:00:00.000000000 Z
+date: 2015-01-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails