Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
spaceapps mockup
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var dps = []; // dataPoints
var chart = new CanvasJS.Chart("chartContainer", {
title :{
text: "John Doe"
},
axisY: {
includeZero: false,
viewportMinimum: 0,
viewportMaximum: 110
},
axisX: {
viewportMinimum: 0,
viewportMaximum: 20
},
data: [{
type: "line",
dataPoints: dps
}]
});
var xVal = 0;
var yVal = 100;
var updateInterval = 1000;
var dataLength = 20; // number of dataPoints visible at any point
var updateChart = function (count) {
count = count || 1;
if(yVal<0){
yVal = 100;
}
if(xVal==21){
xVal = 0;
dps.length = 0;
}
for (var j = 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
var countDownDate = new Date("Oct 21, 2018 18:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = 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>
<div id="chartContainer" style="width: 100%; height: 300px"></div>
<div id="timer" style="width: 100%; height: 100px; text-align: center">
<p style="color:red;font-family:verdana;font-size:300%">You can go out in:</p>
<p id="demo" style="color:red;font-family:verdana;font-size:300%"></p>
</dive>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment