Skip to content

Instantly share code, notes, and snippets.

@Berkmann18
Created December 7, 2014 16:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Berkmann18/1cab963b160bf4fc7fc2 to your computer and use it in GitHub Desktop.
Save Berkmann18/1cab963b160bf4fc7fc2 to your computer and use it in GitHub Desktop.
A great tool for having statistical informations about a range of time
<!DOCTYPE html>
<html>
<head>
<title>Time Stats by B.Max</title>
<meta charset="utf-8" />
<meta name="author" content="Berkmann Maximilian" />
<style type="text/css">
* {
font-family: Calibrie, Verdana, Segoe UI;
}
body {
text-align: center;
}
input, button, select, textarea {
padding: .5%;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
input:focus, button:active, select:focus, textarea:focus, input:active {
border-color: #00D;
border-width: 2px;
}
input[type="button"], input[type="reset"], input[type="submit"], button, input[type="button"], input[type="file"]{
background-image: linear-gradient(bottom, rgb(0,55,140) 9%, rgb(0,83,168) 55%, rgb(0,117,202) 78%);
background-image: -o-linear-gradient(bottom, rgb(0,55,140) 9%, rgb(0,83,168) 55%, rgb(0,117,202) 78%);
background-image: -moz-linear-gradient(bottom, rgb(0,55,140) 9%, rgb(0,83,168) 55%, rgb(0,117,202) 78%);
background-image: -webkit-linear-gradient(bottom, rgb(0,55,140) 9%, rgb(0,83,168) 55%, rgb(0,117,202) 78%);
background-image: -ms-linear-gradient(bottom, rgb(0,55,140) 9%, rgb(0,83,168) 55%, rgb(0,117,202) 78%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(0,55,140)),
color-stop(0.55, rgb(0,83,168)),
color-stop(0.78, rgb(0,117,202))
);
}
input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, button:active, input[type="button"]:active, input[type="file"]:active{
background-image: linear-gradient(bottom, rgb(0,117,202) 9%, rgb(0,83,168) 55%, rgb(0,55,140) 78%);
background-image: -o-linear-gradient(bottom, rgb(0,117,202) 9%, rgb(0,83,168) 55%, rgb(0,55,140) 78%);
background-image: -moz-linear-gradient(bottom, rgb(0,117,202) 9%, rgb(0,83,168) 55%, rgb(0,55,140) 78%);
background-image: -webkit-linear-gradient(bottom, rgb(0,117,202) 9%, rgb(0,83,168) 55%, rgb(0,55,140) 78%);
background-image: -ms-linear-gradient(bottom, rgb(0,117,202) 9%, rgb(0,83,168) 55%, rgb(0,55,140) 78%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(0,117,202)),
color-stop(0.55, rgb(0,83,168)),
color-stop(0.78, rgb(0,55,140))
);
border-style: outset;
}
input[sure] { border-color: #0F0; }
input[nearly] { border-color: #FC0; }
aside{
position: fixed;
top: 20%;
left: 65%;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}
</style>
<script type="text/javascript">
window.onerror = function (msg, url, line) {
alert("An error has occurred.\n\nMessage: "+msg+"\nURL: "+url+"\nLine number: "+line);
}
function writeTo(id, nval, query, parseToHTML){ //assign #nval as the value of the element within #id has id
if(query){ //if the query are choisen
if(document.querySelector("#"+id).value != null && !parseToHTML){
document.querySelector("#"+id).value = nval;
} else if(document.querySelector("#"+id).innerHTML != null && parseToHTML){
document.querySelector("#"+id).innerHTML = nval;
} else if(document.querySelector("#"+id).innerText != null && !parseToHTML){
document.querySelector("#"+id).innerText = nval;
} else writeTo(id, nval, true);
} else { //otherwise it's the common getId method of an element
if(document.getElementById(id).value != null && !parseToHTML){
document.getElementById(id).value = nval;
} else if(document.getElementById(id).innerHTML != null && parseToHTML){
document.getElementById(id).innerHTML = nval;
} else if(document.getElementById(id).innerText != null && !parseToHTML){
document.getElementById(id).innerText = nval;
} else writeTo(id, nval, true);
}
/*if(jquery || jQuery){ //if jQuery is present
if($("#"+id).val() || $("#"+id).val){
$("#"+id).val(nval);
} else if($("#"+id).innerHTML && parseToHTML){
$("#"+id).innerHTML = nval;
} else if($("#"+id).innerText && !parseToHTML){
$("#"+id).innerText = nval;
} else if($("#"+id).html() || $("#"+id).html){
$("#"+id).html(nval);
} else if($("#"+id).text() || $("#"+id).text){
$("#"+id).text(nval);
}
}*/
console.log("wrote "+nval+" at #"+id);
}
function checkItem(id){
console.log("#"+id);
if(document.getElementById(id)){
console.log("gEBI");
if(document.getElementById(id).value != null) console.log("+ value");
if(document.getElementById(id).innerHTML != null) console.log("+ innerHTML");
if(document.getElementById(id).innerText != null) console.log("+ innerText");
}
if(document.querySelector("#"+id)){
console.log("query");
if(document.querySelector("#"+id).value != null) console.log("+ value");
if(document.querySelector("#"+id).innerHTML != null) console.log("+ innerHTML");
if(document.querySelector("#"+id).innerText != null) console.log("+ innerText");
}
}
var isArray = function(obj){
return Object.prototype.toString.call(obj) === "[object Array]";
},
getNumWithSetDec = function(num, numOfDec){
var pow10s = Math.pow(10, numOfDec || 0);
return (numOfDec)? Math.round(pow10s*num)/pow10s: num;
},
getSumOfArr = function(arr, numOfDec){
var sum=0;
for(i=0; i<arr.length;i++) sum+=arr[i];
return getNumWithSetDec(sum, numOfDec);
},
getMean = function(numArr, numOfDec){
if(!isArray(numArr)) return false;
var /*i = numArr.length, */sum = getSumOfArr(numArr, numOfDec);
//while(i--) sum += numArr[i]; replaced by getSumOfArr()
return getNumWithSetDec( (sum/numArr.length), numOfDec);
},
getAvg = function(numArr, numOfDec){
if(!isArray(numArr)) return false;
var sum = getSumOfArr(numArr, numOfDec), worst=0, best=0;
for(i=0; i<numArr.length; i++){
if(!numArr[i] || numArr[i]=="undefined") alert("numArr "+i+" undefined");
worst = (i>0)? Math.max(worst, numArr[i]): numArr[i];
best = (i>0)? Math.min(best, numArr[i]): numArr[i];
}
sum-=(worst+best);
return getNumWithSetDec((sum/(numArr.length-2)), numOfDec);
},
getVariance = function(numArr, numOfDec){
if(!isArray(numArr)) return false;
var mean = getMean(numArr, numOfDec), i = numArr.length, v = 0;
while(i--) v += Math.pow((numArr[i]-mean), 2);
v /= numArr.length-1;
return getNumWithSetDec(v, numOfDec);
},
getStandardDeviation = function(numArr, numOfDec){
if(!isArray(numArr)) return false;
var stdDev = Math.sqrt(getVariance(numArr, numOfDec));
return getNumWithSetDec(stdDev, numOfDec);
};
function getMedian(values){
values.sort(function(a,b){return a - b;});
var half = Math.floor(values.length/2);
if(values.length%2) return values[half];
else return (values[half-1]+values[half])/2.0;
}
function getMeanOf(values, n){
var nvals = new Array(n);
for(i=0; i<n; i++) nvals[i] = values[values.length-(i+1)];
return getMean(nvals, 2);
}
function getAvgOf(values, n){
var nvals = new Array(n);
for(i=0; i<n; i++) nvals[i] = values[values.length-(i+1)];
return getAvg(nvals, 2);
}
function getBestMeanOf(values, n){
if(values.length-(n-1)<0) return false;
var means = new Array(n), bestmean = new Array(values.length-(n-1));//MeanOfN.len = arr.len-(N-1)
for(i=0; i<n; i++){console.log("i="+i+"\n"+times.slice(i, n+i));means[i] = getMeanOf(times.slice(i, n+i), n);console.log(means[i]);}
for(i=0; i<bestmean.length; i++) bestmean = (i>0)? Math.min(means[i], means[i-1]): means[i];
return bestmean;
}
var times = new Array(), best = 0.00, median = 0.00, worst = 0.00, mean = 0.00, avg = 0.00, stddev = 0.00, mo3 = 0, bmo3 = 0, ao5 = 0; bao5 = 0, mo10 = 0, bmo10 = 0, ao12 = 0, bao12 = 0;
function update(){
console.log("times: "+times+"\nbest: "+best+"\nmedian: "+median+"\nworst: "+worst+"\nmean: "+mean+"\navg: "+avg+"\nstd-dev: "+stddev);
//writeTo("times", times);
//checkItem("best");
writeTo("best", best);
//checkItem("median");
writeTo("median", median);
//checkItem("worst");
writeTo("worst", worst);
//checkItem("mean");
writeTo("mean", mean);
//checkItem("avg");
writeTo("avg", avg);
//checkItem("stddev");
writeTo("stddev", stddev);
writeTo("mo3", mo3);
writeTo("bmo3", bmo3);
writeTo("ao5", ao5);
writeTo("bao5", bao5);
writeTo("mo10", mo10);
writeTo("bmo10", bmo10);
writeTo("ao12", ao12);
writeTo("bao12", bao12);
}
function calc(){
times = document.getElementById("times").value;
times = times.split(", ")||times.split(",");
var len=times.length;
for(i=0; i<len; i++) times[i] = getNumWithSetDec(times[i], 2);//parseInt(times[i]*100)/100;
var m=0, a=0;
for(i=0; i<len; i++){
if(!times[i] || times[i]=="undefined") alert("time "+i+" undefined");
worst = (i>0)? Math.max(worst, times[i]): times[i];
best = (i>0)? Math.min(best, times[i]): times[i];
if(i<3) mo3 += times[times.length-(i+1)];
if(i<10) mo10 += times[times.length-(i+1)];
//mean += times[times.length-(i+1)];
m += times[len-(i+1)];
if(times[times.length-(i+1)]!=worst && times[times.length-(i+1)]!=best){
if(i<5) ao5 += times[times.length-(i+1)];
if(i<12) ao12 += times[times.length-(i+1)];
}
}
for(i=0; i<len; i++){
if(times[len-(i+1)]!=worst && times[len-(i+1)]!=best) a += times[len-(i+1)];
}
ao5 /= 3;
mo3 /= 3;
ao12 /= 10;
mo10 /= 10;
//mean /= len;
m /= len;
a = getNumWithSetDec(a/(len-2), 2);
mean = getMean(times, 2);
avg = getAvg(times, 2);
if(mean=="NaN"){alert("no mean");mean=m;}
if(avg=="NaN"){alert("no average");avg=a;}
median = getNumWithSetDec(getMedian(times), 2);
stddev = getStandardDeviation(times, 2);
bmo3 = getBestMeanOf( times, 3);
bmo10 = getBestMeanOf( times, 10);
ao5 = getNumWithSetDec( ao5, 2);
mo3 = getNumWithSetDec( mo3, 2);
ao12 = getNumWithSetDec( ao12, 2);
mo10 = getNumWithSetDec( mo10, 2);
bao5 = getNumWithSetDec( bao5, 2);
bmo3 = getNumWithSetDec( bmo3, 2);
bao12 = getNumWithSetDec( bao12, 2);
bmo10 = getNumWithSetDec( bmo10, 2);
if(mo3!=getMeanOf(times, 3)) alert("mo3 (?) l.289");
if(mo10!=getMeanOf(times, 10)) alert("mo10 (?) l.290");
if(ao5!=getAvgOf(times, 5)) alert("ao5 (?) l.291");
if(ao12!=getAvgOf(times, 12)) alert("ao12 (?) l.292");
update();
}
function min2dec(min){
return (50*min)/30;
}
function dec2min(dec){
return (30*dec)/50;
}
function time2sec(time){
//time: hh:mm:ss.ms
var t=time.split(":"), sec;
if(t.length==3){
var h=parseInt(t[0]), min=parseInt(t[1]), s=parseInt(t[2]*1000)/1000;
}else{
var min=parseInt(t[0]), s=parseInt(t[1]*1000)/1000;
}
sec = h*3600+min*60+s;
return sec;
}
function sec2time(sec){
var h=0, m=0, s=sec;
while(s>=60){
s-=60; //(s.ms)
m++;//(min)
}
while(m>=60){
m-=60;
h++;
}
return to2DigitNumbers(h)+":"+to2DigitNumbers(m)+":"+to2DigitNumbers(s);//h:min:s.ms
}
function to2DigitNumbers(i){
i=(i<10 && i[0]!=0)? "0"+i: i;
return i;
}
</script>
</head>
<body>
<b>Times: </b><input type="text" id="times" placeholder="3.74, 3.37, 2.93, 7.23, 3.22" onChange="calc()" onSubmit="calc()" onBlur="calc()" /><!--value="52.05, 38.08, 40.35, 48.22, 36.74, 31.67, 51.51, 48.54, 47.66, 62.91, 54.21, 54.00, 51.33, 38.56, 69.24, 42.23, 37.57, 39.05, 54.86, 53.02, 35.86, 44.80, 46.02"--><br />
<b>Best: </b><input type="text" id="best" sure /><br />
<b>Median: </b><input type="text" id="median" sure /><br />
<b>Worst: </b><input type="text" id="worst" sure /><br />
<b>Mean: </b><input type="text" id="mean" sure /><br />
<b>Average: </b><input type="text" id="avg" sure /><br />
<b>Standard Deviation: </b><input type="text" id="stddev" nearly /><br />
<b>Mean of 3: </b><input type="text" id="mo3" /><br />
<b>Best Mean of 3: </b><input type="text" id="bmo3" /><br />
<b>Average of 5: </b><input type="text" id="ao5" /><br />
<b>Best Average of 5: </b><input type="text" id="bao5" /><br />
<b>Mean of 10: </b><input type="text" id="mo10" /><br />
<b>Best Mean of 10: </b><input type="text" id="bmo10" /><br />
<b>Average of 12: </b><input type="text" id="ao12" /><br />
<b>Best Average of 12: </b><input type="text" id="bao12" /><br />
<aside>
<p>n.b: the fields bordered in <span style="color:#0F0;">light green</span> are 100% sure, the fields in <span style="color:#FC0;">orange</span> are ~50% sure or nearly sure
and all the others except the "Times" field are wrong or not precice.</p>
<p>If you encounter a problem or a wrong estimation of the validity of a field, please contact <a href="mailto: maxieberkmann@gmail.com" target="_blank">him</a>
</aside>
<footer>
<small style="position:absolute;top:98%;left:85%;">created by <a href="https://plus.google.com/+MaximilianBerkmann" target="_blank">Berkmann Maximilian</a></small>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment