Creating a bar chart in html without using the canvas element

Building a simple horizontal bar-chart using Table and Paragraph elements.

In this tutorial, we are going to build a horizontal bar chart without using complex canvas or svg manipulation codes. This will be great also for browsers that donnot support the canvas or svg element.
We create arrays to hold the data and then document.write the table. The code is short and self-explanatory. The javascript code:

   
    

var days= ['mon','tues','wed','thur','fri','sat','sun']; //Holds the
var  percent  =  [23,45,67,87,54,21,45,];                //  data 
     
document.write("<table>");  //display the table element...
     
for(i=0; i<days.length; i++)
{
document.write("<tr>");
document.write("<td>"+days[i]+"</td>");//show days in first cell
document.write("<td><p style=' height:10px; background-color:green; width:"+percent[i]+"px;' > </p></td>");
document.write("</tr>");
}

document.write("</table>");
   




  

Result: