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
<!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 […]