Skip to content

Instantly share code, notes, and snippets.

@shivabhusal
Created August 8, 2017 05:17
Show Gist options
  • Save shivabhusal/efb48db79128ffd926cc25960a1d875c to your computer and use it in GitHub Desktop.
Save shivabhusal/efb48db79128ffd926cc25960a1d875c to your computer and use it in GitHub Desktop.
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)});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment