HTML Canvas

HTML Canvas is very suitable forScatter Plot（Scatter Plots）.

HTML Canvas is very suitable forLine Chart（Line Graphs）.

HTML Canvas is very suitable forCombinationScatter 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();
}

Prøv det selv

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();
// Ligningsfunktion
function f(x) {
  return x * skråning + forskydning;
}

Prøv det selv

Combination

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();
// Ligningsfunktion
function f(x) {
  return x * skråning + forskydning;
}

Prøv det selv