Canvas de HTML

HTML Canvas is very suitable forScatter Plot(Scatter Plots).

HTML Canvas is very suitable forLine Chart(Line Graphs).

HTML Canvas is very suitable forCompositionScatter Plot and Line Chart.

Scatter Plot

Source Code

const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Scatter Plot
ctx.fillStyle = "red";
for (let i = 0; i < xArray.length-1; i++) {
  let x = xArray[i]*400/150;
  let y = yArray[i]*400/15;
  ctx.beginPath();
  ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2);
  ctx.fill();
}

Prueba personalmente

Line Chart

Source Code

let xMax = canvas.height;
let slope = 1.2;
let intercept = 70;
// Scatter Plot
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();
// Función de línea
función f(x) {
  devolver x * pendiente + intercepto;
}

Prueba personalmente

Composition

Source Code

let xMax = canvas.height;
let yMax = canvas.width;
let slope = 1.2;
let intercept = 70;
const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Scatter Plot
ctx.fillStyle = "red";
for (let i = 0; i < xArray.length-1; i++) {
  let x = xArray[i]*400/150;
  let y = yArray[i]*400/15;
  ctx.beginPath();
  ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2);
  ctx.fill();
}
// Plot Line
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();
// Función de línea
función f(x) {
  devolver x * pendiente + intercepto;
}

Prueba personalmente