HTML Canvas

HTML Canvas is ideal for creating various types of plots and graphs:

• Scatter Plots
• Line Graphs
• Combined Scatter and Line Graphs

Scatter Plots

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];

// Plot Scatter
ctx.fillStyle = "red";
for (let i = 0; i < xArray.length; 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();
}

‍

Line Graphs

Source Code:

let xMax = canvas.width;
let slope = 1.2;
let intercept = 70;

// Plot Line
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();

// Line Function
function f(x) {
  return x * slope + intercept;
}

‍

Combined Scatter and Line Graphs

Source Code:

let xMax = 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];

// Plot Scatter
ctx.fillStyle = "red";
for (let i = 0; i < xArray.length; 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();

// Line Function
function f(x) {
  return x * slope + intercept;
}

‍