I have the following graph draw from array data. I want to use plain javascript, no libraries.
-
How could I curve this so its not straight lines? Basically I am trying to replicate youtube video heatmap graph (most viewable times through video). Nothing fancy, just so its curved.
-
I am not sure if getMaxY function is accurate.
var canvas = document.getElementById("myCanvas");
var c = canvas.getContext("2d");
var values = [10, 22, 64, 9, 97, 5, 11, 45, 33, 15, 55, 19];
var width = 600;
var height = 50;
c.strokeRect(0, 0, width, height)
c.beginPath();
c.moveTo(0, height);
c.lineTo(getXPixel(0), getYPixel(values[0]));
for(var i = 1; i < values.length; i ++) {
c.lineTo(getXPixel(i), getYPixel(values[i]));
}
c.lineTo(width, height);
c.lineTo(0, height);
c.fillStyle = "rgba(44, 44, 44, 0.2)";
c.fill();
function getMaxY() {
var max = 0;
for(var i = 0; i < values.length; i ++) {
if(values[i] > max) {
max = values[i];
}
}
max += 10 - max % 10;
return max;
}
function getXPixel(val) {
return (width / (values.length-1)) * val;
}
function getYPixel(val) {
return height - ((height / getMaxY()) * val);
}<canvas id="myCanvas" width="600" height="50" ></canvas>