chartjs.slim

javascript:
    $(function () {
        Chart.elements.Line.prototype.draw = function () {
            var blackColor = 'rgba(0, 0, 0, 1)';
            var redColor = 'rgba(255, 0, 0, 1)';

            var scale = this.scale

            // draw lines
            var points = this._chart.getDatasetMeta(0).data;
            var point_x = points[0]._model.x;
            var point_y = points[0]._model.y;

            for (var i = 1; i < points.length; i++) {
                var point = points[i];
                this._chart.ctx.beginPath();
                if (point_y > point._model.y) {
                    this._chart.ctx.strokeStyle = redColor;
                    this._chart.ctx.fillStyle = redColor;
                } else {
                    this._chart.ctx.strokeStyle = blackColor;
                    this._chart.ctx.fillStyle = blackColor;
                }
                this._chart.ctx.lineWidth = 1;
                this._chart.ctx.moveTo(point_x, point_y);
                this._chart.ctx.lineTo(point._model.x, point._model.y);
                point_x = point._model.x;
                point_y = point._model.y;
                this._chart.ctx.stroke();

                // Note: it starts drawing from left-top corner; keep this in mind
                is_slopy_from_left = points[i - 1] != undefined && points[i - 1]._model.y > points[i]._model.y
                is_slopy_from_right = points[i + 1] != undefined && points[i]._model.y < points[i + 1]._model.y

                if (is_slopy_from_left && is_slopy_from_right) {
                    // ^y --> lower in the graph; graph starts from up.
                    this._chart.ctx.beginPath();
                    this._chart.ctx.arc(points[i]._model.x, points[i]._model.y, 5, 0, 2 * Math.PI);
                    this._chart.ctx.fill();
                    this._chart.ctx.stroke();
                }
            }

            this._chart.ctx.restore();
        }

        var totalOutputColor = 'rgba(194, 196, 209, 0)';
        var IntensityColor = 'rgba(94, 176, 222, 0)';
        var maxOutputColor = 'rgba(255, 230, 170, 0.23)';

        var lineChartDataForWorkout = {
            labels: #{@exercise_set.graph_data.map {|x| DateTime.rfc3339(x['Time']).strftime("%M:%S")}.inspect.html_safe},
            datasets: [{
                //fillColor: IntensityColor,
                fill: false,
                showLine: true,
                //borderColor: IntensityColor,
                label: "Intensity",
                data: #{@exercise_set.graph_data.map {|x| x['Value']}.inspect.html_safe}
            }]
        };

        var newScoreLineChart = function (lineChartData) {
            var ctx = $(document).find('canvas')[0].getContext("2d");
            var myLine = new Chart(ctx, {
                data: lineChartData,
                type: 'line',
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    elements: {
                        point: { radius: 0 },
                        line: {
                            tension: 0
                        }
                    },
                    bezierCurve: false,
                    scales: {
                        xAxes: [{
                            display: true
                        }],
                        yAxes: [{
                            display: true
                        }]
                    }
                }
            });
            //end create
        }

        //$(window).resize(function(){
        //    var $parent = $(document).find('#chart-placeholder').parent();
        //    $parent.find('canvas').remove();
        //    $parent.html('<canvas style="height: 300px; width: 100%"></canvas>');
        //
        //    newScoreLineChart(lineChartDataForWorkout)}
        //    );
        $(document).ready(function(){newScoreLineChart(lineChartDataForWorkout)});

    });