Skip to content

Instantly share code, notes, and snippets.

@GSkouroupathis

GSkouroupathis/HTML5graph

Last active December 25, 2015 14:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save GSkouroupathis/6990776 to your computer and use it in GitHub Desktop.
Save GSkouroupathis/6990776 to your computer and use it in GitHub Desktop.
Download ZIP
Displays an array of numbers on a line or bar graph.
Raw
HTML5graph
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Hits Graph</title>
</head>
<body style="background:#000;">
<!-- BY GEORGE SKOUROUPATHIS -->
<center>
<canvas id="myCanvas" width="778px" height="340px" style="border:1px solid #333; background:#222;background-position:0 0;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</center>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.globalAlpha=0.8;
var hits = [72, 83, 50, 95, 117, 122, 80, 129, 117, 122, 46, 50, 95, 117]
var startRecent = hits.length-33;
var recentHits = hits.slice(startRecent,startRecent+33);
for (var i=0;i<recentHits.length;i++){
var startX = i*20+i;
//Uncomment this to get the bar effect
/*
ctx.fillStyle="#C0FF3E";
ctx.fillRect(startX,320,20,-2*recentHits[i]);
ctx.beginPath()
ctx.moveTo(startX+10,320);
ctx.lineTo(startX+10,340);
ctx.strokeStyle = '#777';
ctx.lineWidth = 1;
ctx.stroke();
*/
ctx.beginPath()
ctx.moveTo(startX+10,320-recentHits[i]*2);
ctx.lineTo((i+1)*20+10+i,320-recentHits[i+1]*2);
ctx.strokeStyle = '#C0FF3E';
ctx.lineWidth = 1;
ctx.stroke();
ctx.beginPath()
ctx.moveTo(startX+10,0);
ctx.lineTo(startX+10,340);
ctx.strokeStyle = '#333';
ctx.lineWidth = 1;
ctx.stroke();
ctx.fillStyle = '#CAFF70';
ctx.font = "bold 8px sans-serif";
ctx.fillText(recentHits[i].toString(), startX+10, 330);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment