Chart Js Template

Base for Chart JS

HTML

<script src="http://www.chartjs.org/assets/Chart.js"></script>
<canvas id="chart" width="800" height="400"></canvas>

JavaScript

Chart.types.Line.extend({
    name: "LineAlt",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);
        
        // now draw the segments
        var ctx = this.chart.ctx
        this.datasets.forEach(function (dataset) {
            ctx.strokeStyle = dataset.strokeColor
            
            var previousPoint = {
                value: null
            };
            dataset.points.forEach(function (point) {
                if (previousPoint.value !== null && point.value !== null) {
                    ctx.beginPath();
                    ctx.moveTo(previousPoint.x, previousPoint.y);
                    ctx.lineTo(point.x, point.y);
                    ctx.stroke();
                }
                previousPoint = point;
            })
        })
    }
});

var ctx = document.getElementById("chart").getContext("2d");

var data = {
    labels: ["1","2","3","4","5","6","7","8","9","10"],
    datasets: [{
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: [null,null,20,40,null,null,null,10,20,null]
    }]
};

var myLineChart = new Chart(ctx).LineAlt(data, {
    datasetFill: false,
    pointDotRadius: 2,
    pointDotStrokeWidth: 3,
    datasetStrokeWidth: 0.01
});