Visualize Machine Data - Test with Height

by Denise Nepraunig

HTML

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<div id="header"><h1 class="title">Machine utilization</h1>
<h3>Demo by Denise Nepraunig</h3>
    <!-- http://www.nepraunig.com -->
</div>
<div id="displayarea"></div>

CSS

body {
    font-family: 'Roboto', sans-serif;
}

#header {
    padding-left: 15px;  
}

.title {
    margin-bottom: -20px;
}

h4 {
    margin-top: 0px;
}

.datadiv {
    box-sizing: border-box;
    background-color: Whitesmoke;
    padding: 15px;
    margin: 15px;
    width: 120px;
    height: 120px;
    display: inline-block;
    box-shadow: 0 0 5px #888;
    float: left;
}

.value {
    /*background-color: pink;*/
    /*height: 85px;*/
}

.data {
    float: left;
}

.datadiv h2 {
    margin: 0px;
}

.green {
    border-left: 10px solid green;
}

.yellow {
    border-left: 10px solid yellow;
}

.red {
    border-left: 10px solid red;
}

JavaScript

// structure for testdata
var machinedata = {
"data": [
]
};

// generate test data
var machines = 25;
for (var i=0; i<machines; i++) {
    var utilization = Math.floor(Math.random() * 30 + 60);
    var entry = { name : "M" + (i+1), utilization : utilization };
    machinedata.data.push(entry);
}
var data = machinedata.data;
console.log(machinedata);

// output values
for(var i = 0; i < data.length ; i++) {
    var colorvalue = "red";
    if(data[i].utilization >= 70) colorvalue = "yellow";
    if(data[i].utilization >= 80) colorvalue = "green";
        
    var datadiv = "<div class='datadiv "+ colorvalue +"'><div class='data'><h2>" + data[i].name + "</h2>" + data[i].utilization + "%" + "</div><div class='value' style='background-color: " + colorvalue + "; height: " + data[i].utilization + "px'></div>"+ "</div>";
    $("#displayarea").append(datadiv);
}