SimpleHTML5CanvasScatterPlot

by Simon Raper

HTML

<body>
    <canvas id="myCanvas" width="650" height="400"></canvas>
</body>

JavaScript

//Data

var xValues = [1, 3, 6, 11, 7, 2];
var yValues = [3, 12, 4, 1, 7, 3];

//Get canvas

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

//Draw axes

ctx.moveTo(50, 300);
ctx.lineTo(50, 50);
ctx.moveTo(50, 300);
ctx.lineTo(300, 300);
ctx.stroke();


//Draw ticks and labels

ctx.font = "11px Arial";
ctx.textAlign = "end";

for (var i = 1; i <= 12; i++) //x-axis
{
    x = 50 + 20 * i;
    ctx.moveTo(x, 300);
    ctx.lineTo(x, 305);
    ctx.fillText(i, x + 3, 317);

}

for (var i = 1; i <= 12; i++) //y-axis
{
    y = 300 - 20 * i;
    ctx.moveTo(50, y);
    ctx.lineTo(45, y);
    ctx.fillText(i, 40, y + 3);
}

ctx.stroke();

//Add points

function drawPoint(x, y) {
    ctx.beginPath();
    ctx.arc(50 + x * 20, 300 - y * 20, 3, 0, 2 * Math.PI);
    ctx.stroke();
}


for (var i = 1; i <= 6; i++) {

    drawPoint(xValues[i - 1], yValues[i - 1]);

}