HTML5 Canvas Column Chart
In this demo we will create a simple column chart using HTML5 Canvas
No External libraries has been used in this sample
HTML5 Canvas Column Chart
<!DOCTYPE html>
<html>
<head>
<style>
.canvas
{
margin:5px;
border-radius: 10px;
background:-o-linear-gradient(bottom, #999999 5%, #0c0600 100%);
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #999999) );
background:-moz-linear-gradient( center top, #999999 5%, #0c0600 100% );
border:3px solid #777777;
}
</style>
</head>
<body>
<canvas class="canvas" id="myCanvas" width="1024" height="768">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var mainData = [
{"Month":"Jan","Sales":"990"},
{"Month":"Feb","Sales":"2000"},
{"Month":"Mar","Sales":"1000"},
{"Month":"Apr","Sales":"8000"},
{"Month":"May","Sales":"12000"},
{"Month":"Jun","Sales":"5000"},
{"Month":"Jul","Sales":"6000"},
{"Month":"Aug","Sales":"7000"},
{"Month":"Sep","Sales":"8000"},
{"Month":"Oct","Sales":"9000"},
{"Month":"Nov","Sales":"9000"},
{"Month":"Dec","Sales":"9000"} ];
var maximumYValue = 0;
maximumYValue = parseInt(mainData[0].Sales);
for (var i=0; i<mainData.length; i++)
{
if (maximumYValue < parseInt(mainData[i].Sales))
{
maximumYValue = parseInt(mainData[i].Sales);
}
}
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var maxX = c.width -70;
var maxY = c.height -70;
var minX = 70;
var minY = 70;
ctx.beginPath();
//Horizontal Axis
ctx.lineWidth=2.0;
ctx.lineCap = 'round';
ctx.moveTo(minX,maxY);
ctx.lineTo(maxX,maxY);
//Horizontal Axis Arrow
ctx.moveTo(maxX-10,maxY-5);
ctx.lineTo(maxX,maxY);
ctx.lineTo(maxX-10,maxY+5);
//Vertical Axis
ctx.moveTo(minX,maxY);
ctx.lineTo(minX,minY);
//Vertical Axis Arrow
ctx.moveTo(minX-5,minY+10);
ctx.lineTo(minX,minY);
ctx.lineTo(minX+5,minY+10);
ctx.stroke();
//Min Ticks
ctx.lineWidth = 0.5;
var noOfGrids = 5;
var vGridDiff = (maxY - minY)/noOfGrids;
ctx.font="12px Helvetica";
for (var i =1; i<noOfGrids;i++)
{
ctx.moveTo(minX,maxY-i*vGridDiff);
ctx.lineTo(maxX,maxY-i*vGridDiff);
ctx.fillText((i*maximumYValue/noOfGrids),20,maxY-i*vGridDiff);
}
ctx.stroke();
var padding = 20;
var maxHeight = Math.round((maxY - minY)*1.0);
ctx.fillStyle = "rgba(0, 0, 0, 0.65)"
ctx.beginPath();
for (var i =0; i<mainData.length; i++)
{
ctx.rect(20+minX+i*padding+i*40,maxY-((parseInt(mainData[i].Sales)/maximumYValue)*maxHeight),30,parseInt(mainData[i].Sales)/maximumYValue*maxHeight-1);
}
ctx.closePath();
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "rgba(0, 0, 0, 0.75)"
for (var i =0; i<mainData.length; i++)
{
ctx.fillText(mainData[i].Month,25+minX+i*padding+i*40,maxY+20);
}
ctx.closePath();
ctx.fill();
//X Label
ctx.font="15px Helvetica light";
ctx.fillText("Month",c.width/2,maxY+45);
//Title
ctx.font="22px Helvetica light";
ctx.fillText("Column Chart Title",c.width/2-100,20);
//Y Label
ctx.font="15px Helvetica light";
ctx.translate(18, c.height/2);
ctx.rotate(-Math.PI / 2);
ctx.fillText("Sales",0,0);
</script>
</body>
</html>
[…] Also Read the HTML5 Canvas Column Chart […]