Simple Line Graphs Using <canvas> element in HTML 5

After i worked with the Bar graph, i feel it is very easy to implement the line graphs using <canvas> element in HTML5. You can find many similarities in the javascript while working on this. New functions moveTo(), lineTo(), stroke(), lineWidth() has been used for line graphs.

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 interval = 30;
var linewidth = 1;      
var color = "blue";      
var graphholder = "myCanvas";   
var displayLabel = true;   
var labelfontstyle = "Arial";   
var labelfontsize = "12px";   
var labelfontclr = "#000000";  
var direction = 2    
var grphvals = new Array(100,200,132,145,470.5,440,410.3,35,48,37,125,176,153,231);
</script>

Possible values for some of the above variables:
direction = 1 - Left to right, 2 - Right to left
interval = 1 to 100 (An interval between two points on x-axis)
linewidth = 1 to 20 (Width of the line)
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 variable declaration in the document

function fnValidateDimensions()
{
 if(holderheight <= grphvals.max())
  alert("Highest value exceeded the graph area height. Increase the graph height or reduce the value");
 if(holderwidth <= (grphvals.length*interval))
  alert("Number of grphvals considered is exceeding the graph width.Increase the graph width or reduce the interval");
}
function fnDisplayLabel()
{
 ctx.fillStyle=labelfontclr;
 if(displayLabel)
 {
  ctx.fillText(grphvals[v],x_axis,holderheight-(grphvals[v]+10),35);
 }
}
var c=document.getElementById(graphholder);
var ctx=c.getContext("2d");
ctx.font = labelfontsize+" "+labelfontstyle;
var holderwidth = c.width;
var holderheight = c.height;
fnValidateDimensions();
switch(direction)
{
 case  1 : var  x_axis = 0; break;
 case  2 : var x_axis = holderwidth;  break;
}
ctx.strokeStyle=color;
ctx.lineWidth=linewidth;
for(v=0;v<grphvals.length;v++)
{
 fnDisplayLabel();
 ctx.moveTo(x_axis,holderheight-grphvals[v]);
 switch(direction)
 {
  case  1 : 
       x_axis = x_axis+interval;
       break;
  case  2 : 
       x_axis = x_axis-interval;
       break;
 }
 ctx.lineTo(x_axis,holderheight-grphvals[v+1]);
 ctx.stroke();
}

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); 
};