Check the mockup out!
monitor.twentebiosensors.co
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<script> | |
window.onload=function(){ | |
vardps=[];// dataPoints | |
varchart=newCanvasJS.Chart("chartContainer",{ | |
title :{ | |
text: "John Doe" | |
}, | |
axisY: { | |
includeZero: false, | |
viewportMinimum: 0, | |
viewportMaximum: 110 | |
}, | |
axisX: { | |
viewportMinimum: 0, | |
viewportMaximum: 20 | |
}, | |
data: [{ | |
type: "line", | |
dataPoints: dps | |
}] | |
}); | |
varxVal=0; | |
varyVal=100; | |
varupdateInterval=1000; | |
vardataLength=20;// number of dataPoints visible at any point | |
varupdateChart=function(count){ | |
count=count||1; | |
if(yVal<0){ | |
yVal=100; | |
} | |
if(xVal==21){ | |
xVal=0; | |
dps.length=0; | |
} | |
for(varj=0;j<count;j++){ | |
yVal=yVal-(Math.random()); | |
dps.push({ | |
x: xVal, | |
y: yVal | |
}); | |
xVal++; | |
} | |
if(dps.length>dataLength){ | |
dps.shift(); | |
} | |
chart.render(); | |
}; | |
updateChart(dataLength); | |
setInterval(function(){updateChart()},updateInterval); | |
} | |
// Set the date we're counting down to | |
varcountDownDate=newDate("Oct 21, 2018 18:37:25").getTime(); | |
// Update the count down every 1 second | |
varx=setInterval(function(){ | |
// Get todays date and time | |
varnow=newDate().getTime(); | |
// Find the distance between now and the count down date | |
vardistance=countDownDate-now; | |
// Time calculations for days, hours, minutes and seconds | |
varhours=Math.floor((distance%(1000*60*60*24))/(1000*60*60)); | |
varminutes=Math.floor((distance%(1000*60*60))/(1000*60)); | |
varseconds=Math.floor((distance%(1000*60))/1000); | |
// Display the result in the element with id="demo" | |
document.getElementById("demo").innerHTML=hours+"h " | |
+minutes+"m "+seconds+"s "; | |
// If the count down is finished, write some text | |
if(distance<0){ | |
clearInterval(x); | |
document.getElementById("demo").innerHTML="EXPIRED"; | |
} | |
},1000); | |
</script> | |
</head> | |
<body> | |
<divid="chartContainer" style="width: 100%; height: 300px"></div> | |
<divid="timer" style="width: 100%; height: 100px; text-align: center"> | |
<pstyle="color:red;font-family:verdana;font-size:300%">You can go out in:</p> | |
<pid="demo" style="color:red;font-family:verdana;font-size:300%"></p> | |
</dive> | |
<scriptsrc="https://canvasjs.com/assets/script/canvasjs.min.js"></script> | |
</body> | |
</html> |
SpaceApps is a NASA incubator innovation program.