Speed Graphs

by amindunited

HTML

<div id="graph"></div>
<!--
<button id="startBut">start</button>
<button id="elsBut">Num Of Items</button>
<button id="loadsBut">Loading Times</button>
<button id="itemsPerSecBut">Items Per Second</button>
<button id="clearGraphsBut">Clear</button>
-->
<ul class="buttons">
    <li class="button" id="startBut">start</li>
    <li class="button" id="elsBut">Num Of Items</li>
    <li class="button" id="loadsBut">Loading Times</li>
    <li class="button" id="itemsPerSecBut">Items Per Second</li>
    <li class="button" id="clearGraphsBut">Clear</li>
</ul>

CSS

body {
    overflow: hidden;
}
button {
    position: absolute;
    top: 25px;
    right: 10px;
}
.buttons {
    position: absolute;
    top: 25px;
    right: 13px;
    list-style-type: none;
}
.buttons .button {
    width: 127px;
    -webkit-box-shadow:  2px 2px 5px 1px rgba(254, 254, 254, .3);  
    box-shadow:  2px 2px 5px 1px rgba(254, 254, 254, .3);
    background-color: rgba(228, 182, 31, 1);
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 15px;
    cursor: pointer;
}
#startBut { 
    right: 10px; 
}
#elsBut {
    top: 60px;
}

#loadsBut { 
    top: 95px;
    right: 10px; 
}
#itemsPerSecBut { 
    top: 135px;
    right: 10px; 
}
#clearGraphsBut {
    top: 170px;
}
#graph{
    background: #333;/*#EEE;*/
    border-radius: 5px;
    /*background-image: url('http://subtlepatterns.com/patterns/dark_leather.png');*/
    background-image: url('http://subtlepatterns.com/patterns/white_leather.png');
    padding: 15px;
    padding-top: 35px;
}
#graph svg {
    border-left: solid 1px #999;
    /*
    -webkit-box-shadow:  2px 2px 5px 1px rgba(254, 254, 254, .3);  
    box-shadow:  2px 2px 5px 1px rgba(254, 254, 254, .3);
    */
    -webkit-box-shadow:  2px 2px 5px 1px rgba(0, 0, 0, .3);  
    box-shadow:  2px 2px 5px 1px rgba(0, 0, 0, .3);
    background-color: #454545;
    border-radius: 5px;
}
rect {
    /*background-image:url('http://subtlepatterns.com/patterns/mochaGrunge.png');*/
}

.col_title {
    font-size: 16pt;
    font-weight: bold;
    /*text-decoration: underline;*/
    /*background-color: #454545;*/
    color: #787878;
    padding-top: 2px;
    padding-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 30px;
    height: 26px;
    line-height: 26px;
    /*text-align: top;*/
    
    color: transparent;
    color: rgba(228, 182, 31, 1);
    color: rgba(130, 42, 42, 1);
    /*text-shadow: rgba(228, 182, 31, .5) 0px 1px 1px, rgba(255,255,255,0.5) 0px 2px 2px;*/
   ...

JavaScript

var sites_data = {
    "LUXBET" : {
        "First View": {"Load Time":"6.287s", "First Byte": "1.517s", "Start Render": "3.512s", "Speed Index": "3971", "DOM Elements": "5768", "Time": "6.287s", "Requests": "78", "Bytes In": "1,000 KB"
                       /*   53.234s 127 1,122 KB */},
        "RepeatView": {"Load Time":"4.951s", "First Byte": "1.179s", "Start Render": "3.270s", "Speed Index": "3424", "DOM Elements": "5745", "Time": "4.951s", "Requests": "27", "Bytes In": "50 KB"   
                       /* 15.029s 36  136 KB */}
    },
    "Centre Bet" :{
        "First View": {"Load Time":"5.456s", "First Byte": "0.591s", "Start Render": "2.473s", "Speed Index": "3684", "DOM Elements": "0847", "Time": "5.456s", "Requests": "51", "Bytes In": "1,320 KB"    
                       /*8.488s  58  1,348 KB */},
        "RepeatView": {"Load Time":"5.494s", "First Byte": "0.281s", "Start Render": "1.548s", "Speed Index": "3389", "DOM Elements": "1003", "Time": "5.494s", "Requests": "26", "Bytes In": "630 KB"  
                       /*15.504s 33  659 KB */}
    },
    "Sports Bet": {
        "First View": {"Load Time":"5.593s", "First Byte": "0.326s", "Start Render": "1.675s", "Speed Index": "2664", "DOM Elements": "2193", "Time": "5.593s", "Requests": "85", "Bytes In": "1,010 KB"    
                       /* 5.775s  86  1,010 KB */ },
        "RepeatView": {"Load Time":"7.109s", "First Byte": "0.523s", "Start Render": "1.372s", "Speed Index": "2300", "DOM Elements": "2201", "Time": "7.109s", "Requests": "24", "Bytes In": "181 KB"  
                       /* 7.326s  25  181 KB */ }
    },
    "Tom Waterhouse": {
        "First View": {"Load Time":"5.011s", "First Byte": "0.236s", "Start Render": "1.818s", "Speed Index": "2643", "DOM Elements": "532", "Time": "5.011s", "Requests": "66", "Bytes In": "1,628 KB"    
                       /* 17.663s 92  1,646 KB */},
        "RepeatView": {"Load Time":"2.522s", "First Byte": "0.246s", "Start Render": "1.616s", "Speed...