Simple Bar Graphs Using <canvas> element in HTML 5

When i worked in some projects earlier, i used to implement graphs by rendering some third party scripts either in javascript (client-side) or in php (server-side). But now using HTML5 it is very easy to develop these graphs using <canvas> & simple javascript code. We have predefined functions like fillText(), strokeRect(), fillRect() in javascript while using <canvas> element. I tried with some of these functions & deisgned this graph. This script is light weight and browser friendly compare to other scripts (We should consider the browsers like IE9,Firefox,Chrome which supports HTML5). Also a beginner of javascript can easily understand to implement this in the application.

Define the canvas element in your document body as shown below with the ID attribute and mention the height & width attributes. You can apply styles either by using "style" tag (inline CSS) or defined class in separate .css file.

<canvas id="myCanvas" width="800" height="500"></canvas>

<script language="javascript" type="text/javascript">
var gapbetween = 3;      
var barwidth = 60;      
var color = "blue";      
var graphholder = "myCanvas";   
var displayLabel = true;   
var labelfontstyle = "Arial";   
var labelfontsize = "12px";   
var labelfontclr = "#000000";  
var direction = 4    
var graphstyle = 1;    
var grphvals = new Array(100,200,132,145,470.5,440,410.3);
</script>

Possible values for some of the above variables:
direction = 1 - Bottom to top, 2 - Top to bottom, 3 - Left to right, 4 - Right to left
graphstyle = 1 - Border, 2 - Background
displayLabel = true - Display Labels, false - hide the labels

In the above javascript variables, You can change the values according to your UI requirement. The variable (grphvals) in the last line is an array with the list of values that displays as bars in the graph. Once you define all the variables, Start writing the script as given below to generate the bar graph. If you put the javascript in a separate .js file, Make sure that file has included after the canvas element and the variable declaration in the document

function fnDefineDirection(direction)
{
 if(direction == 1 || direction == 2)
 {
  if(holderheight <= grphvals.max())
   alert("Highest value exceeded the graph area height. 
     Increase the graph height or reduce the value");
  if(holderwidth <= (grphvals.length*(barwidth+gapbetween)))
   alert("Number of values considered is exceeding the graph width.
     Increase the graph width or reduce the width of bar");
 }
 if(direction == 3 || direction == 4)
 {
  if(holderwidth <= grphvals.max())
   alert("Highest value exceeded the graph area width. 
      Increase the graph width or reduce the value");
  if(holderheight <= (values.length*(barwidth+gapbetween)))
   alert("Number of grphvals considered is exceeding the graph height.
      Increase the graph height or reduce the width of bar");
 }
}
function fnDisplayLabel(direction)
{
 ctx.fillStyle=labelfontclr;
 if(displayLabel)
 {
  switch(direction)
  {
   case 1 : ctx.fillText(grphvals[v],x_axis+10,y_axis-15,35);  break;
   case 2 : ctx.fillText(grphvals[v],x_axis+10,y_axis+grphvals[v]+15,35); break;
   case 3 : ctx.fillText(grphvals[v],grphvals[v]+15,y_axis+25,35);  break;
   case 4 : ctx.fillText(grphvals[v],holderwidth-(grphvals[v]+35),y_axis+25,35); break;
  }
 }
}
var c=document.getElementById(graphholder);
var ctx=c.getContext("2d");
ctx.font = labelfontsize+" "+labelfontstyle;
var holderwidth = c.width;
var holderheight = c.height;
fnDefineDirection(direction);
switch(direction)
{
 case  1 :
 case  2 : var  x_axis = gapbetween; break;
 case  3 : 
 case  4 : var  y_axis = gapbetween; break;
}
for(v=0;v<grphvals.length;v++)
{
 switch(direction)
 {
  case  1 : var y_axis = holderheight-grphvals[v]; break;
  case  2 : var y_axis = 0; break;
  case  3 : var x_axis = 0; break;
  case  4 : var x_axis = holderwidth-grphvals[v]; break;
 }
 switch(graphstyle)
 {
  case  1 : ctx.strokeStyle=color;
       if(direction == 1 || direction == 2)
       {
        ctx.strokeRect(x_axis,y_axis,barwidth,grphvals[v]);
       }
       else if(direction == 3 || direction == 4)
       {
        ctx.strokeRect(x_axis,y_axis,grphvals[v],barwidth);
       }
       break;

  case  2 : 
  default  : ctx.fillStyle=color;
       if(direction == 1 || direction == 2)
       {
        ctx.fillRect(x_axis,y_axis,barwidth,grphvals[v]);
       }
       else if(direction == 3 || direction == 4)
       {
        ctx.fillRect(x_axis,y_axis,grphvals[v],barwidth);
       }
       break;
 }
 fnDisplayLabel(direction);
 switch(direction)
 {
  case  1 :
  case  2 : x_axis = x_axis+barwidth+gapbetween; break;
  case  3 : 
  case  4 : y_axis = y_axis+barwidth+gapbetween; break;
 }
}

Note: If you get an error while calculating the max & min values of an array in the above script, place the below script in the same .js file

Array.prototype.min = function(){
    return Math.min.apply( null, this);
};
Array.prototype.max = function() {
  return Math.max.apply(null, this); 
};