HTML Canvas

HTML Canvas is perfect for Scatter Plots

HTML Canvas is perfect for Line Graphs

HTML Canvas is perfect for combining Scatter and Lines

Scatter Plots

Source Code

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.transform(1, 0, 0, -1, 0, canvas.height);

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, 3, 3, 0, 0, Math.PI * 2);
  ctx.fill();
}

Try it Yourself »

Line Graphs

Source Code

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.transform(1, 0, 0, -1, 0, canvas.height);

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

Try it Yourself »

Combined

Source Code

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.transform(1, 0, 0, -1, 0, canvas.height);

let xMax = canvas.width;
let yMax = canvas.height;
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]*xMax/150;
  let y = yArray[i]*yMax/15;
  ctx.beginPath();
  ctx.ellipse(x, y, 3, 3, 0, 0, Math.PI * 2);
  ctx.fill();
}

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

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

Try it Yourself »

❮ Previous Next ❯

★ +1