HTML5 Canvas Column Chart

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

HTML5 Canvas Column Chart

Demo

<!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 SVG Column Chart

Posted in Charts n Graphs, CSS, HTML5, Web Technology Tagged with: , , ,
0 comments on “HTML5 Canvas Column Chart
1 Pings/Trackbacks for "HTML5 Canvas Column Chart"
  1. […] Also Read the HTML5 Canvas Column Chart […]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news