Simple chart - HTML5 canvas

by cillay

HTML

<canvas id="chart" style="width: 500px; height: 150px"></canvas>

JavaScript

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

ctx.rect(10,10,450,120);
ctx.stroke();

// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"#00cc00");
grd.addColorStop(1,"#00ff00");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,300,30);

// Create gradient
grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"#cc0000");
grd.addColorStop(1,"#ff0000");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,40,250,30);

// Create gradient
grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"#cccc00");
grd.addColorStop(1,"#ffff00");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,70,360,30);

// Create gradient
grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"#cc00cc");
grd.addColorStop(1,"#ff00ff");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,100,190,30);