Line Graph using HTML Canvas

lineTo() to draw lines width and coordinates.

Data Format

var data = [120,310,450,300,200,440,500];

Settings

var margin_bottom=20;
var margin_left=50;

var data_max=Math.max.apply(null,data); // Maximum value of data available
var data_min=Math.min.apply(null,data); // Minimum value of data available
var data_no=data.length;  // Number of data ( elements in array ) 
var x_gap=70; // gap in X axis between data points
var range = 100; // 
var y_max=Math.ceil( data_max/range)* range; // Adjust the highest value for grid 
var y_min=Math.floor( data_min/range)* range; // Lower limit of the grid, can be set to zero. 

my_canvas.height= y_max-y_min + margin_bottom  
my_canvas.width= (data_no*x_gap ) + margin_left

gctx.moveTo(margin_left,0);
gctx.lineTo(margin_left,my_canvas.height);
gctx.moveTo(0,my_canvas.height-margin_bottom);
gctx.lineTo(my_canvas.width,my_canvas.height-margin_bottom);
gctx.strokeStyle= '#f54600';
gctx.stroke();
///////Draw Grid //////////////////
gctx.font = '18px serif';
for (i=0;i<=y_max;i+=range){
gctx.fillText(i+'-', margin_left-35,y_max-i);
}

Drawing Line graph using loop

gctx.beginPath()
gctx.lineWidth=3;
gctx.strokeStyle= '#2369f5';
gctx.moveTo(x_gap,y_max-data[0]);
gctx.fillText(data[0], x_gap-30,y_max-data[0]);

x1=x_gap;
// drawing graph from first point 
for (i=1;i<=data_no;i++){
x1=x1+x_gap;	
gctx.lineTo(x1,y_max-data[i]);
gctx.fillText(data[i], x1-30,y_max-data[i]);
}

Adding shadow to graph

gctx.shadowColor = '#000000';
gctx.shadowOffsetX=3;
gctx.shadowOffsetY=3;
gctx.shadowBlur = 3;

Full Code is here

<canvas id="my_canvas" width="35" height="230"  style="border:2px solid #000000;"></canvas>

<script>
var data = [120,310,450,300,200,440,500];

var margin_bottom=20;
var margin_left=50;

var data_max=Math.max.apply(null,data); // Maximum value of data available
var data_min=Math.min.apply(null,data); // Minimum value of data available
var data_no=data.length;  // Number of data ( elements in array ) 
var x_gap=70; // gap in X axis between data points
var range = 100; // 
var y_max=Math.ceil( data_max/range)* range; // Adjust the highest value for grid 
var y_min=Math.floor( data_min/range)* range; // Lower limit of the grid, can be set to zero. 

///////// No edit ////////// 
//var my_canvas=$('#my_canvas').get(0)  // Jquery 
var my_canvas=document.getElementById("my_canvas"); // JavaScript 
var gctx = my_canvas.getContext("2d");
// set the canvas height and width ///
my_canvas.height= y_max-y_min + margin_bottom  
my_canvas.width= (data_no*x_gap ) + margin_left 

// Draw X & Y axis //
gctx.moveTo(margin_left,0);
gctx.lineTo(margin_left,my_canvas.height);
gctx.moveTo(0,my_canvas.height-margin_bottom);
gctx.lineTo(my_canvas.width,my_canvas.height-margin_bottom);
gctx.strokeStyle= '#f54600';
gctx.stroke();
///////Draw Grid //////////////////
gctx.font = '18px serif';
for (i=0;i<=y_max;i+=range){
gctx.fillText(i+'-', margin_left-35,y_max-i);
}

// Moving to first Point of the line graph //
gctx.beginPath()
gctx.lineWidth=3;
gctx.strokeStyle= '#2369f5';
gctx.moveTo(x_gap,y_max-data[0]);
gctx.fillText(data[0], x_gap-30,y_max-data[0]);

x1=x_gap;
// drawing graph from first point 
for (i=1;i<=data_no;i++){
x1=x1+x_gap;	
gctx.lineTo(x1,y_max-data[i]);
gctx.fillText(data[i], x1-30,y_max-data[i]);
}
/// Adding shadow to line graph //////////////
gctx.shadowColor = 'black';
gctx.shadowOffsetX=5;
gctx.shadowOffsetY=5;
gctx.shadowBlur = 5;
gctx.stroke();
</script>