Created
August 14, 2013 01:49
-
-
Save jufemaiz/6227366 to your computer and use it in GitHub Desktop.
Inserts a table based histogram of time data from an object data of structure { 'time_of_day':value }
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Inserts a table based histogram of time data from an object data of structure { 'time_of_day':value } | |
// @param data[Object] Time of day data object data of structure { 'time_of_day':value } | |
// @param string|node Node to append to | |
// @return jQuery[Object] the table's jquery object. | |
function histogram_table_timeofday(data,parentNode) { | |
var le_table = $('<table id="histogram" style="width: 100%"><thead><tr><th scope="col" style="width: 40px;">Time of Day</th><th scope="col">Count</th></thead><tbody></tbody></table>'); | |
var max = 0; | |
for(var key in data) { | |
if(data[key] > max) { max = data[key]; } | |
} | |
$(parentNode).append(le_table); | |
var tbody = $('tbody',le_table); | |
for(var hour=0; hour < 24; hour++) { | |
for(var min=0; min < 60; min++) { | |
var time = hour+(min<10?'0':'')+min; | |
var row = $('<tr><th scope="row" style="text-align: right !important;">'+time+'</th><td style="position: relative; text-align: left !important;"><span style="position: absolute; z-index: 2; height: 80%; top: 10%; left: 0; background: red; width: '+((data[time]==undefined?'0':100*data[time]/max))+'%"> </span><span style="z-index: 3; position: relative; font-weight: bold; color: white;">'+(data[time]==undefined?'0':data[time])+'</span></td></tr>') | |
tbody.append(row); | |
} | |
} | |
return le_table; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment