Tracer une courbe avec un Canvas HTML

<!DOCTYPE html>
<html>
<head>
<style>
body {
	margin: 0px;
	padding: 0px;
}
canvas {
	border:1px solid silver;
	margin:0px;
}
div.courbe {
	width:512px;
	border:1px dotted silver;
	padding:4px;
}
span#titre {
	float:left;
	font-weight:bold;
}
span#coords {
	float:right;
}
</style>
</head>
<body onload="traceCourbe()">

<div class="courbe">
    <canvas id="myCanvas" width="512" height="200"></canvas><br/>
    <span id="coords"></span>
    <span id="titre"></span>
    <div style="clear:both"></div>
</div>

<script>
var titre = "Courbe de test";
var v = [
    ["24/02/2019 01:18:47",10],
    ["24/02/2019 02:18:47",50],
    ["24/02/2019 03:18:47",60]
];

document.getElementById('titre').innerHTML = titre;
var coords = document.getElementById('coords');

// 1er passage pour sortir le max
max = 0;
for(n=0; n<v.length; n++)
{
    var produits = v[n][1];

    if(max == 0) max = produits;
    else if(produits > max) max = produits;
}
//console.log('max ' +  + max);

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
var w = 512;
var h = 200;
var nbpixelsparjour = w / (v.length-1);

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

canvas.addEventListener('mousemove', function(evt) {
    var mousePos = getMousePos(canvas, evt);

    // quel jour je suis? quel pixel
    var index = Math.round(mousePos.x / nbpixelsparjour);
    var date = v[index][0];

    // h vaut 200 pixels soit max produits
    // y vaut combien de produits?
    var val = h - mousePos.y;

    coords.innerHTML =  + Math.round((val * max) / h) + " produits " + date;
}, false);


function traceCourbe()
{
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // pour faire rentrer max produits en 200 pixels de haut

    // 250 produits -> 200px
    // n produits -> ?
    // y = (n*250)/max;

    // en x, faire rentrer n valeurs en 512 pixels
    // donc 512/n pixels entre chaque valeur
    //var nbpixelsparjour = w / (v.length-1);

    // trace droite de l'ancien point au nouveau
    var ax = 0;
    var ay = h;
    for(n=0; n<v.length; n++)
    {
        x = Math.round(n * nbpixelsparjour);//.toFixed(2);
        y = Math.round(h - (v[n][1]*h) / max);//.toFixed(2);
        console.log('trace('+ax+ ','+ay+', '+x+','+y+', "#333333")');
        ligne(ax,ay, x,y, "#993333");
        ax = x;
        ay = y;
    }
}

function ligne(x,y, a,b, color)
{
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(a, b);
    ctx.lineWidth = 2;
    ctx.strokeStyle = color;
    ctx.stroke();
}
</script>

  </body>
</html>
Javascript Tracer une courbe sur un canvas HTML
