JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<table>
<tr>
    <td>
        <div id="first" style="padding:2px">Machine:
        </div>
    </td>

    <td>
        <div id="second">
        <svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
        
    </svg>
        </div>
    </td>
</tr>
</table>

CSS

svg
{
 width:720px;
 height:50px;
 border:#999999 solid 2px;
}
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #8B8386;
border-radius: 5px;
top:21px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
font-family:calibri;
font-weight:700
}

JavaScript

window.onload = function(){
                var data = [
                {
                    "srno" : 1 ,
                    "status" : "Breakdown" ,
                    "duration" : 100,
                    "color" : "#CC0000",
                    "start_time": 0,
                    "tooltip": "Show up: 12:30 \nstatus:Break down \nDuration:100"
                },
                {
                    "srno" : 2 ,
                    "status" : "Mold-Change" ,
                    "duration" :70 ,
                    "color" : "#FF8000",
                    "start_time": 100,
                    "tooltip": "Show up: 12:30 \nstatus:Break down \nDuration:100"
                }
                ] ;
                var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                var svgNS = svg.namespaceURI;

                for ( var i = 0 ; i < data.length ; i++){
                    //<!--Drawing Rectangle-->
                    var rect = document.createElementNS(svgNS,'rect');

                    var width = data [i].duration ;

                    rect.setAttribute('x', data[i].start_time);
                    rect.setAttribute('y',0);
                    rect.setAttribute('width',data[i].duration);
                    rect.setAttribute('height',50);
                    rect.setAttribute('fill',data[i].color);

                    document.getElementById("mySVG").appendChild(rect);
                    //<!--End of Rectangle-->

                    //<!--Drawing Status on rect-->
                    var status = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                    status.setAttribute('x',data[i].start_time+2);
                    status.setAttribute('y', '25');
                    status.setAttribute('fill', '#fff');
                    status.textContent = data[i].status;

                    document.getElementById("mySVG").appendChild(status);
                    //<!--Drawing Status on rect-->

      ...