Canvas graph

https://github.com/eu81273/jsfiddle-console

by Chris

HTML

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;"></canvas>
<p id="dims">Dimensions</p>
<p id="test">test</p>

JavaScript

//refrence to canvas element
var c = document.getElementById("myCanvas");
//method returns a drawing context on the canvas
var ctx = c.getContext("2d");

//draw circle
function drawCircle(x, y) {
  ctx.beginPath();
  //pos x, pos y, width, offset?, ?;
  ctx.arc(x,y,4,0,2*Math.PI);
  ctx.stroke();
}

var cHeight = $("#myCanvas").height();
var cWidth = $("#myCanvas").width();
$("#dims").html("Height: " + cHeight + "px <br>Width: " + cWidth + "px");

$("#test").html(cHeight / 5);
//representing amount of returned data being displayed
var dataResults = 5;
//setting up to get width between data points
var evenWidth = cWidth / dataResults;
//loop to draw circle as many times as needed
for (i = 0;i < dataResults; i++) {
	var HYUTS = cWidth - (evenWidth * 100);
	drawCircle(HYUTS, cHeight - 5);
}