chart-js-rails 0.0.7 → 0.0.8

data/README.md

@@ -49,7 +49,7 @@ app.js.coffee:
 
       myNewChart = new Chart($("#canvas").get(0).getContext("2d")).Line(data)
     
-index.haml.html:
+index.html.haml:
 
     %canvas#canvas{:height => "450", :width => "600"}
 

data/lib/chart-js-rails/version.rb

@@ -1,5 +1,5 @@
 module ChartJs
 	module Rails
-		VERSION = "0.0.7"
+		VERSION = "0.0.8"
 	end
 end

data/vendor/assets/javascripts/Chart.js

@@ -1,8 +1,9 @@
 /*!
  * Chart.js
  * http://chartjs.org/
+ * 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
  */
@@ -91,9 +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 - 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"],
 
@@ -213,6 +220,41 @@
                 return -1;
             }
         },
+        where = helpers.where = function(collection, filterCallback){
+            var filtered = [];
+
+            helpers.each(collection, function(item){
+                if (filterCallback(item)){
+                    filtered.push(item);
+                }
+            });
+
+            return filtered;
+        },
+        findNextWhere = helpers.findNextWhere = function(arrayToSearch, filterCallback, startIndex){
+            // Default to start of the array
+            if (!startIndex){
+                startIndex = -1;
+            }
+            for (var i = startIndex + 1; i < arrayToSearch.length; i++) {
+                var currentItem = arrayToSearch[i];
+                if (filterCallback(currentItem)){
+                    return currentItem;
+                }
+            }
+        },
+        findPreviousWhere = helpers.findPreviousWhere = function(arrayToSearch, filterCallback, startIndex){
+            // Default to end of the array
+            if (!startIndex){
+                startIndex = arrayToSearch.length;
+            }
+            for (var i = startIndex - 1; i >= 0; i--) {
+                var currentItem = arrayToSearch[i];
+                if (filterCallback(currentItem)){
+                    return currentItem;
+                }
+            }
+        },
         inherits = helpers.inherits = function(extensions){
             //Basic javascript inheritance based on the model created in Backbone.js
             var parent = this;
@@ -241,7 +283,7 @@
             //Method for warning of errors
             if (window.console && typeof window.console.warn == "function") console.warn(str);
         },
-        amd = helpers.amd = (typeof root.define == 'function' && root.define.amd),
+        amd = helpers.amd = (typeof define == 'function' && define.amd),
         //-- Math methods
         isNumber = helpers.isNumber = function(n){
             return !isNaN(parseFloat(n)) && isFinite(n);
@@ -402,6 +444,13 @@
         //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 instanceof Function){
+                return templateString(valuesObject);
+            }
+
             var cache = {};
             function tmpl(str, data){
                 // Figure out if we're getting a template, or if we need to
@@ -693,16 +742,22 @@
                 removeEvent(chartInstance.chart.canvas, eventName, handler);
             });
         },
-        getMaximumSize = helpers.getMaximumSize = function(domNode){
+        getMaximumWidth = helpers.getMaximumWidth = function(domNode){
             var container = domNode.parentNode;
             // TODO = check cross browser stuff with this.
             return container.clientWidth;
         },
+        getMaximumHeight = helpers.getMaximumHeight = function(domNode){
+            var container = domNode.parentNode;
+            // TODO = check cross browser stuff with this.
+            return container.clientHeight;
+        },
+        getMaximumSize = helpers.getMaximumSize = helpers.getMaximumWidth, // legacy support
         retinaScale = helpers.retinaScale = function(chart){
             var ctx = chart.ctx,
                 width = chart.canvas.width,
                 height = chart.canvas.height;
-            //console.log(width + " x " + height);
+
             if (window.devicePixelRatio) {
                 ctx.canvas.style.width = width + "px";
                 ctx.canvas.style.height = height + "px";
@@ -776,11 +831,11 @@
         resize : function(callback){
             this.stop();
             var canvas = this.chart.canvas,
-                newWidth = getMaximumSize(this.chart.canvas),
-                newHeight = newWidth / this.chart.aspectRatio;
+                newWidth = getMaximumWidth(this.chart.canvas),
+                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);
 
@@ -816,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){
@@ -845,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) {
@@ -873,7 +946,7 @@
                                 yMin;
                             helpers.each(this.datasets, function(dataset){
                                 dataCollection = dataset.points || dataset.bars || dataset.segments;
-                                if (dataCollection[dataIndex]){
+                                if (dataCollection[dataIndex] && dataCollection[dataIndex].hasValue()){
                                     Elements.push(dataCollection[dataIndex]);
                                 }
                             });
@@ -925,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 {
@@ -944,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);
                 }
@@ -1037,6 +1112,9 @@
                 x : this.x,
                 y : this.y
             };
+        },
+        hasValue: function(){
+            return isNumber(this.value);
         }
     });
 
@@ -1083,6 +1161,7 @@
             // ctx.fill();
 
             // ctx.moveTo(this.controlPoints.inner.x,this.controlPoints.inner.y);
+            // ctx.lineTo(this.x, this.y);
             // ctx.lineTo(this.controlPoints.outer.x,this.controlPoints.outer.y);
             // ctx.stroke();
 
@@ -1196,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,
@@ -1218,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);
+            }
         }
     });
 
@@ -1312,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);
+            }
         }
     });
 
@@ -1506,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;
@@ -1526,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;
@@ -1545,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
@@ -1558,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;
@@ -1887,6 +2001,7 @@
     };
 
 }).call(this);
+
 (function(){
     "use strict";
 
@@ -1908,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,
 
@@ -1993,18 +2114,16 @@
                 this.datasets.push(datasetObject);
 
                 helpers.each(dataset.data,function(dataPoint,index){
-                    if (helpers.isNumber(dataPoint)){
-                        //Add a new point for each piece of data, passing any required data to draw.
-                        datasetObject.bars.push(new this.BarClass({
-                            value : dataPoint,
-                            label : data.labels[index],
-                            datasetLabel: dataset.label,
-                            strokeColor : dataset.strokeColor,
-                            fillColor : dataset.fillColor,
-                            highlightFill : dataset.highlightFill || dataset.fillColor,
-                            highlightStroke : dataset.highlightStroke || dataset.strokeColor
-                        }));
-                    }
+                    //Add a new point for each piece of data, passing any required data to draw.
+                    datasetObject.bars.push(new this.BarClass({
+                        value : dataPoint,
+                        label : data.labels[index],
+                        datasetLabel: dataset.label,
+                        strokeColor : dataset.strokeColor,
+                        fillColor : dataset.fillColor,
+                        highlightFill : dataset.highlightFill || dataset.fillColor,
+                        highlightStroke : dataset.highlightStroke || dataset.strokeColor
+                    }));
                 },this);
 
             },this);
@@ -2097,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,
@@ -2119,19 +2240,17 @@
         addData : function(valuesArray,label){
             //Map the values array for each of the datasets
             helpers.each(valuesArray,function(value,datasetIndex){
-                    if (helpers.isNumber(value)){
-                        //Add a new point for each piece of data, passing any required data to draw.
-                        this.datasets[datasetIndex].bars.push(new this.BarClass({
-                            value : value,
-                            label : label,
-                            x: this.scale.calculateBarX(this.datasets.length, datasetIndex, this.scale.valuesCount+1),
-                            y: this.scale.endPoint,
-                            width : this.scale.calculateBarWidth(this.datasets.length),
-                            base : this.scale.endPoint,
-                            strokeColor : this.datasets[datasetIndex].strokeColor,
-                            fillColor : this.datasets[datasetIndex].fillColor
-                        }));
-                    }
+                //Add a new point for each piece of data, passing any required data to draw.
+                this.datasets[datasetIndex].bars.push(new this.BarClass({
+                    value : value,
+                    label : label,
+                    x: this.scale.calculateBarX(this.datasets.length, datasetIndex, this.scale.valuesCount+1),
+                    y: this.scale.endPoint,
+                    width : this.scale.calculateBarWidth(this.datasets.length),
+                    base : this.scale.endPoint,
+                    strokeColor : this.datasets[datasetIndex].strokeColor,
+                    fillColor : this.datasets[datasetIndex].fillColor
+                }));
             },this);
 
             this.scale.addXLabel(label);
@@ -2168,13 +2287,15 @@
             //Draw all the bars for each dataset
             helpers.each(this.datasets,function(dataset,datasetIndex){
                 helpers.each(dataset.bars,function(bar,index){
-                    bar.base = this.scale.endPoint;
-                    //Transition then draw
-                    bar.transition({
-                        x : this.scale.calculateBarX(this.datasets.length, datasetIndex, index),
-                        y : this.scale.calculateY(bar.value),
-                        width : this.scale.calculateBarWidth(this.datasets.length)
-                    }, easingDecimal).draw();
+                    if (bar.hasValue()){
+                        bar.base = this.scale.endPoint;
+                        //Transition then draw
+                        bar.transition({
+                            x : this.scale.calculateBarX(this.datasets.length, datasetIndex, index),
+                            y : this.scale.calculateY(bar.value),
+                            width : this.scale.calculateBarWidth(this.datasets.length)
+                        }, easingDecimal).draw();
+                    }
                 },this);
 
             },this);
@@ -2183,6 +2304,7 @@
 
 
 }).call(this);
+
 (function(){
     "use strict";
 
@@ -2385,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,
 
@@ -2467,19 +2595,16 @@
 
 
                 helpers.each(dataset.data,function(dataPoint,index){
-                    //Best way to do this? or in draw sequence...?
-                    if (helpers.isNumber(dataPoint)){
                     //Add a new point for each piece of data, passing any required data to draw.
-                        datasetObject.points.push(new this.PointClass({
-                            value : dataPoint,
-                            label : data.labels[index],
-                            datasetLabel: dataset.label,
-                            strokeColor : dataset.pointStrokeColor,
-                            fillColor : dataset.pointColor,
-                            highlightFill : dataset.pointHighlightFill || dataset.pointColor,
-                            highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
-                        }));
-                    }
+                    datasetObject.points.push(new this.PointClass({
+                        value : dataPoint,
+                        label : data.labels[index],
+                        datasetLabel: dataset.label,
+                        strokeColor : dataset.pointStrokeColor,
+                        fillColor : dataset.pointColor,
+                        highlightFill : dataset.pointHighlightFill || dataset.pointColor,
+                        highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
+                    }));
                 },this);
 
                 this.buildScale(data.labels);
@@ -2562,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,
@@ -2586,17 +2713,15 @@
             //Map the values array for each of the datasets
 
             helpers.each(valuesArray,function(value,datasetIndex){
-                    if (helpers.isNumber(value)){
-                    //Add a new point for each piece of data, passing any required data to draw.
-                        this.datasets[datasetIndex].points.push(new this.PointClass({
-                            value : value,
-                            label : label,
-                            x: this.scale.calculateX(this.scale.valuesCount+1),
-                            y: this.scale.endPoint,
-                            strokeColor : this.datasets[datasetIndex].pointStrokeColor,
-                            fillColor : this.datasets[datasetIndex].pointColor
-                        }));
-                    }
+                //Add a new point for each piece of data, passing any required data to draw.
+                this.datasets[datasetIndex].points.push(new this.PointClass({
+                    value : value,
+                    label : label,
+                    x: this.scale.calculateX(this.scale.valuesCount+1),
+                    y: this.scale.endPoint,
+                    strokeColor : this.datasets[datasetIndex].pointStrokeColor,
+                    fillColor : this.datasets[datasetIndex].pointColor
+                }));
             },this);
 
             this.scale.addXLabel(label);
@@ -2624,37 +2749,64 @@
 
             var ctx = this.chart.ctx;
 
+            // Some helper methods for getting the next/prev points
+            var hasValue = function(item){
+                return item.value !== null;
+            },
+            nextPoint = function(point, collection, index){
+                return helpers.findNextWhere(collection, hasValue, index) || point;
+            },
+            previousPoint = function(point, collection, index){
+                return helpers.findPreviousWhere(collection, hasValue, index) || point;
+            };
+
             this.scale.draw(easingDecimal);
 
 
             helpers.each(this.datasets,function(dataset){
+                var pointsWithValues = helpers.where(dataset.points, hasValue);
 
                 //Transition each point first so that the line and point drawing isn't out of sync
                 //We can use this extra loop to calculate the control points of this dataset also in this loop
 
-                helpers.each(dataset.points,function(point,index){
-                    point.transition({
-                        y : this.scale.calculateY(point.value),
-                        x : this.scale.calculateX(index)
-                    }, easingDecimal);
-
+                helpers.each(dataset.points, function(point, index){
+                    if (point.hasValue()){
+                        point.transition({
+                            y : this.scale.calculateY(point.value),
+                            x : this.scale.calculateX(index)
+                        }, easingDecimal);
+                    }
                 },this);
 
 
                 // Control points need to be calculated in a seperate loop, because we need to know the current x/y of the point
                 // This would cause issues when there is no animation, because the y of the next point would be 0, so beziers would be skewed
                 if (this.options.bezierCurve){
-                    helpers.each(dataset.points,function(point,index){
-                        //If we're at the start or end, we don't have a previous/next point
-                        //By setting the tension to 0 here, the curve will transition to straight at the end
-                        if (index === 0){
-                            point.controlPoints = helpers.splineCurve(point,point,dataset.points[index+1],0);
+                    helpers.each(pointsWithValues, function(point, index){
+                        var tension = (index > 0 && index < pointsWithValues.length - 1) ? this.options.bezierCurveTension : 0;
+                        point.controlPoints = helpers.splineCurve(
+                            previousPoint(point, pointsWithValues, index),
+                            point,
+                            nextPoint(point, pointsWithValues, index),
+                            tension
+                        );
+
+                        // Prevent the bezier going outside of the bounds of the graph
+
+                        // Cap puter bezier handles to the upper/lower scale bounds
+                        if (point.controlPoints.outer.y > this.scale.endPoint){
+                            point.controlPoints.outer.y = this.scale.endPoint;
                         }
-                        else if (index >= dataset.points.length-1){
-                            point.controlPoints = helpers.splineCurve(dataset.points[index-1],point,point,0);
+                        else if (point.controlPoints.outer.y < this.scale.startPoint){
+                            point.controlPoints.outer.y = this.scale.startPoint;
                         }
-                        else{
-                            point.controlPoints = helpers.splineCurve(dataset.points[index-1],point,dataset.points[index+1],this.options.bezierCurveTension);
+
+                        // Cap inner bezier handles to the upper/lower scale bounds
+                        if (point.controlPoints.inner.y > this.scale.endPoint){
+                            point.controlPoints.inner.y = this.scale.endPoint;
+                        }
+                        else if (point.controlPoints.inner.y < this.scale.startPoint){
+                            point.controlPoints.inner.y = this.scale.startPoint;
                         }
                     },this);
                 }
@@ -2664,12 +2816,18 @@
                 ctx.lineWidth = this.options.datasetStrokeWidth;
                 ctx.strokeStyle = dataset.strokeColor;
                 ctx.beginPath();
-                helpers.each(dataset.points,function(point,index){
-                    if (index>0){
+
+                helpers.each(pointsWithValues, function(point, index){
+                    if (index === 0){
+                        ctx.moveTo(point.x, point.y);
+                    }
+                    else{
                         if(this.options.bezierCurve){
+                            var previous = previousPoint(point, pointsWithValues, index);
+
                             ctx.bezierCurveTo(
-                                dataset.points[index-1].controlPoints.outer.x,
-                                dataset.points[index-1].controlPoints.outer.y,
+                                previous.controlPoints.outer.x,
+                                previous.controlPoints.outer.y,
                                 point.controlPoints.inner.x,
                                 point.controlPoints.inner.y,
                                 point.x,
@@ -2679,19 +2837,15 @@
                         else{
                             ctx.lineTo(point.x,point.y);
                         }
-
                     }
-                    else{
-                        ctx.moveTo(point.x,point.y);
-                    }
-                },this);
-                ctx.stroke();
+                }, this);
 
+                ctx.stroke();
 
-                if (this.options.datasetFill){
+                if (this.options.datasetFill && pointsWithValues.length > 0){
                     //Round off the line by going to the base of the chart, back to the start, then fill.
-                    ctx.lineTo(dataset.points[dataset.points.length-1].x, this.scale.endPoint);
-                    ctx.lineTo(this.scale.calculateX(0), this.scale.endPoint);
+                    ctx.lineTo(pointsWithValues[pointsWithValues.length - 1].x, this.scale.endPoint);
+                    ctx.lineTo(pointsWithValues[0].x, this.scale.endPoint);
                     ctx.fillStyle = dataset.fillColor;
                     ctx.closePath();
                     ctx.fill();
@@ -2700,16 +2854,16 @@
                 //Now draw the points over the line
                 //A little inefficient double looping, but better than the line
                 //lagging behind the point positions
-                helpers.each(dataset.points,function(point){
+                helpers.each(pointsWithValues,function(point){
                     point.draw();
                 });
-
             },this);
         }
     });
 
 
 }).call(this);
+
 (function(){
     "use strict";
 
@@ -3071,25 +3225,22 @@
                 this.datasets.push(datasetObject);
 
                 helpers.each(dataset.data,function(dataPoint,index){
-                    //Best way to do this? or in draw sequence...?
-                    if (helpers.isNumber(dataPoint)){
                     //Add a new point for each piece of data, passing any required data to draw.
-                        var pointPosition;
-                        if (!this.scale.animation){
-                            pointPosition = this.scale.getPointPosition(index, this.scale.calculateCenterOffset(dataPoint));
-                        }
-                        datasetObject.points.push(new this.PointClass({
-                            value : dataPoint,
-                            label : data.labels[index],
-                            datasetLabel: dataset.label,
-                            x: (this.options.animation) ? this.scale.xCenter : pointPosition.x,
-                            y: (this.options.animation) ? this.scale.yCenter : pointPosition.y,
-                            strokeColor : dataset.pointStrokeColor,
-                            fillColor : dataset.pointColor,
-                            highlightFill : dataset.pointHighlightFill || dataset.pointColor,
-                            highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
-                        }));
+                    var pointPosition;
+                    if (!this.scale.animation){
+                        pointPosition = this.scale.getPointPosition(index, this.scale.calculateCenterOffset(dataPoint));
                     }
+                    datasetObject.points.push(new this.PointClass({
+                        value : dataPoint,
+                        label : data.labels[index],
+                        datasetLabel: dataset.label,
+                        x: (this.options.animation) ? this.scale.xCenter : pointPosition.x,
+                        y: (this.options.animation) ? this.scale.yCenter : pointPosition.y,
+                        strokeColor : dataset.pointStrokeColor,
+                        fillColor : dataset.pointColor,
+                        highlightFill : dataset.pointHighlightFill || dataset.pointColor,
+                        highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
+                    }));
                 },this);
 
             },this);
@@ -3204,17 +3355,15 @@
             //Map the values array for each of the datasets
             this.scale.valuesCount++;
             helpers.each(valuesArray,function(value,datasetIndex){
-                    if (helpers.isNumber(value)){
-                        var pointPosition = this.scale.getPointPosition(this.scale.valuesCount, this.scale.calculateCenterOffset(value));
-                        this.datasets[datasetIndex].points.push(new this.PointClass({
-                            value : value,
-                            label : label,
-                            x: pointPosition.x,
-                            y: pointPosition.y,
-                            strokeColor : this.datasets[datasetIndex].pointStrokeColor,
-                            fillColor : this.datasets[datasetIndex].pointColor
-                        }));
-                    }
+                var pointPosition = this.scale.getPointPosition(this.scale.valuesCount, this.scale.calculateCenterOffset(value));
+                this.datasets[datasetIndex].points.push(new this.PointClass({
+                    value : value,
+                    label : label,
+                    x: pointPosition.x,
+                    y: pointPosition.y,
+                    strokeColor : this.datasets[datasetIndex].pointStrokeColor,
+                    fillColor : this.datasets[datasetIndex].pointColor
+                }));
             },this);
 
             this.scale.labels.push(label);
@@ -3261,7 +3410,9 @@
 
                 //Transition each point first so that the line and point drawing isn't out of sync
                 helpers.each(dataset.points,function(point,index){
-                    point.transition(this.scale.getPointPosition(index, this.scale.calculateCenterOffset(point.value)), easeDecimal);
+                    if (point.hasValue()){
+                        point.transition(this.scale.getPointPosition(index, this.scale.calculateCenterOffset(point.value)), easeDecimal);
+                    }
                 },this);
 
 
@@ -3288,7 +3439,9 @@
                 //A little inefficient double looping, but better than the line
                 //lagging behind the point positions
                 helpers.each(dataset.points,function(point){
-                    point.draw();
+                    if (point.hasValue()){
+                        point.draw();
+                    }
                 });
 
             },this);
@@ -3301,4 +3454,4 @@
 
 
 
-}).call(this);
+}).call(this);

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: chart-js-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.0.8
   prerelease: 
 platform: ruby
 authors:
@@ -9,12 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-07-17 00:00:00.000000000 -04:00
-default_executable: 
+date: 2015-01-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
-  requirement: &70241392735060 !ruby/object:Gem::Requirement
+  requirement: !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>'
@@ -22,7 +21,12 @@ dependencies:
         version: '3.1'
   type: :runtime
   prerelease: false
-  version_requirements: *70241392735060
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>'
+      - !ruby/object:Gem::Version
+        version: '3.1'
 description: Chart.js for use in Rails asset pipeline
 email:
 - walsh1kt@gmail.com
@@ -39,7 +43,6 @@ files:
 - lib/chart-js-rails.rb
 - lib/chart-js-rails/version.rb
 - vendor/assets/javascripts/Chart.js
-has_rdoc: true
 homepage: ''
 licenses: []
 post_install_message: 
@@ -60,8 +63,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.6.2
+rubygems_version: 1.8.25
 signing_key: 
 specification_version: 3
 summary: Create HTML5 charts
 test_files: []
+has_rdoc: