Stacked bar graph using HTML Canvas using JQuery and JavaScript

details of rectangles by changing its Height width and coordinates.

We have one more data than the basic bar graph. We will show both the data by showing total strength of the class by the outer ( blank ) rectangle. Part of this outer bar will filled by representing number of students passed out of this total strength of the class.

You already seen how the coordinates of the bars are created in our basic bar graph example. Now the filled part of the graph is given in our data array like this data[i][2] . Now we will fill find the y coordinate of the filled rectangle like this.

y2=y-data[i][2];

Data Format

We have class name, total Student in class and passed students. Here is the format. In Class-4 , we have total 150 students out of which 130 passed in the exam. We will create one JavaScript array with these data for all the classes.

var data = [['Class-5',140,100],['Class-4',150,130],['Class-3',170,100,]
,['Class-2',110,60],['Class-1',170,85]];

You can extend this data by adding more classes but you need to adjust width of the Canvas to accommodate all. We can adjust the width automatically by reading number of data we have , width of each graph and gap between the bars .

my_canvas.width=data.length * (  bar_gap)  + x  ;

Full Code is here

HTML Canvas

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

JavaScript

<script>
var data = [['Class-5',140,100],['Class-4',150,130]
,['Class-3',170,100,],['Class-2',110,60],['Class-1',170,85]];

var my_canvas=document.getElementById("my_canvas");
var gctx=my_canvas.getContext("2d");
///////// Settings  ////////// 
var bar_width=50;
var y_gap=30;  //Gap below the graph 
//Gap between Bars including width of the bar
var bar_gap=100;
var x= 20; // Margin of graph from left  
// Base line of graphs
y=my_canvas.height -y_gap ; 
my_canvas.width=data.length * (  bar_gap)  + x;
////////////end of settings ////
gctx.moveTo(x-5,y);
// Base line of graph 
gctx.lineTo(my_canvas.width,y); 
gctx.stroke();
/// add shadow ///
gctx.shadowColor = '#000000';
gctx.shadowOffsetX=3;
gctx.shadowOffsetY=3;
gctx.shadowBlur = 3;
/////////// Draw the graph ////////

for (i=0;i<data.length;i++){
//remove this line if shadow on text is required
gctx.shadowColor = '#ffffff'; 
//font for base label showing classes 
gctx.font = '18px serif';
gctx.textAlign='left';
gctx.textBaseline='top';
gctx.fillStyle= '#008cf5';
// Write base text for classes 
gctx.fillText(data[i][0], x,y+5);

gctx.beginPath();
gctx.lineWidth=2;
y1=y-data[i][1]; //Y Coordinate for top of the Bar 
x1=x;     
gctx.font = '12px serif'; //font at top of the bar 
gctx.fillStyle= '#000000';
//text at top of the bar 
gctx.fillText(data[i][1] + "/" + data[i][2], x1,y1-20); 

gctx.shadowColor = '#000000'; //shadow color for bars 
gctx.strokeStyle = '#000040';  //Line color of bar 
//Outline of the bar showing total strength of class
gctx.strokeRect(x1,y1,bar_width,data[i][1]);
//Y coordinate of filled rectangle 
//showing number of passed students.
y2=y-data[i][2];   
gctx.fillStyle= '#0090c0'; //fill Colur of bar  
//Filled colour of the bar showing pass students
gctx.fillRect(x1,y2,bar_width,data[i][2]); 

x +=bar_gap;
}// end of for loop 
</script>

Stacked Bar Graph using HTML Canvas

Data Format

Full Code is here

Subscribe