Create bar chart with java script & css

One of the best ways to create graphs without developing
is create a graph using Google API
 
The problem:
Using - Google API forces us to send information outside of the organization

The solution:
Create a graph using Java script and Css

Code:

//create region for chart

<table border="0" id="bar"><tr style="vertical-align:bottom;text-align:center;">
</tr></table>

<script>


var x=document.getElementById('bar').rows[0];


for (var i=0; i < 5; ++i){


//sample random value
var Cancelled= Math.floor((Math.random()*100)+1);
var Completed= Math.floor((Math.random()*100)+1);
var InProcess= Math.floor((Math.random()*100)+1);
 var NotStarted= Math.floor((Math.random()*100)+1);

//sum
var sum=Cancelled+Completed+InProcess+NotStarted;

//creat new cell
     var y=x.insertCell(-1);
//set inner html
    y.innerHTML='<b><td>'
+sum
+'<div style="border-bottom:1px solid;">'
 + '<div style="background:#47D147;width:40px;height:'
          +Cancelled+'px;"><span style="color:black"> '+Cancelled+'</span></div>'
          + '<div style="background:#FFFF00;width:40px;height:'
          +Completed+'px;"><span style="color:black"> '+Completed+'</span></div>'
+ '<div style="background:#FF0000;width:40px;height:'
          +InProcess+'px;"><span style="color:black"> '+InProcess+'</span></div>'
           + '<div  style="background:#D0D0D0 ;width:40px;height:'
          +NotStarted+ 'px;"><span style="color:black"> '+NotStarted+'</span></div></div>'
          +'201'+i+'</td></b>';
}

</script>