1 contributor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>MYTITLE</title>
<link rel="shortcut icon" type="image/png" href="favicon.png">
<script src="JQUERYMIN"></script>
<script type="text/javascript" src="CANVASJSMIN"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<script type="text/javascript">
setTimeout(function(){
location = ''
},1200000);
</script>
<body>
<div class="header">
<h1>MYTITLE</h1>
</div><!-- ./header -->
<div id="duration">
<ul class="menu-duration">
<li class="item-duration"><a href="?d=3600">1H</a></li>
<li class="item-duration"><a href="?d=7200">2H</a></li>
<li class="item-duration"><a href="?d=14400">4H</a></li>
<li class="item-duration"><a href="?d=21600">6H</a></li>
<li class="item-duration"><a href="?d=43200">12H</a></li>
<li class="item-duration"><a href="?d=86400">1D</a></li>
<li class="item-duration"><a href="?d=172800">2D</a></li>
<li class="item-duration"><a href="?d=604800">1W</a></li>
<li class="item-duration"><a href="?d=1209600">2W</a></li>
<li class="item-duration"><a href="?d=2592000">30d</a></li>
<li class="item-duration"><a href="?d=5184000">60d</a></li>
<li class="item-duration"><a href="?d=7776000">90d</a></li>
</ul>
</div>
<span id="PREFIXtimestamp"></span>
<span id="PREFIXvalueLatest"></span>
<span id="PREFIXvalueFirst"></span>
<span id="PREFIXaverage"></span>
<span id="PREFIXdelta"></span>
<span id="PREFIXcurrent"></span>
<span id="PREFIXrecords"></span>
<span id="PREFIXdownload"> <a href="CSVFILE">DL</a></span>
<div class="album">
<canvas id="mychart" width="5" height="1" style="display: block;"></canvas>
<div id="CHARTCONTAINER" style="width:100%; height:75vh;">
</div><!-- ./album -->
<script>
function PREFIXonload() {
var PREFIXgridX = 1;
var PREFIXlatestTS= 0;
var PREFIXYmin = -0.1;
var PREFIXYmax = 0;
var PREFIXlatestValue = 0;
var PREFIXfirstValue = 0;
var PREFIXcount = 0;
var PREFIXaccValue=0;
var PREFIXDisplayOnlyLast = 86400;//1day
//Delta time
var PREFIXurl = new URL(window.location.href);
var PREFIXduration = PREFIXurl.searchParams.get('d');
if( PREFIXduration ) {
PREFIXDisplayOnlyLast = PREFIXduration;
}
var PREFIXdeltaTime1 = PREFIXDisplayOnlyLast;
document.getElementById("PREFIXtimestamp").innerHTML = "⏲ "+PREFIXDisplayOnlyLast/3600+"h";
function PREFIXgetDataPointsFromCSV(csv,col) {
var dataPoints = csvLines = points = [];
csvLines = csv.split(/[\r?\n|\r|\n]+/);
var currentTS = Date.now()/1000;
var fromTS = currentTS - PREFIXDisplayOnlyLast;
var previousTS = -1;
var idxStart = -1;
//console.log("Num records: "+csvLines.length+" col: "+col+" type: "+type);
var lastFcnt = 0;
for (var i = 0; i < csvLines.length-1; i++) {
if (csvLines[i].length > 0) {
points = csvLines[i].split(",");
var dateF = new Date(points[COLDATE]);
var epochS = dateF.getTime()/1000;
if( epochS > fromTS )
{
//if( ( i % 1000 ) == 0 )
console.log("DEBUG: "+i+": "+epochS+" : "+csvLines[i] + " ::: " + fromTS+" ::: "+points[col]);
if( -1 == idxStart ) {
console.log("Index start "+i);
idxStart = i;
PREFIXYmin = parseFloat(points[col]);
PREFIXfirstValue = PREFIXYmin;
}
var value = parseFloat(points[col]);
var pointTS = new Date(epochS*1000);
PREFIXaccValue+=value;
dataPoints.push({
x: pointTS,
y: value
});
PREFIXlatestTS = epochS;{
if( PREFIXYmax < value ) PREFIXYmax = value;
if( PREFIXYmin > value ) PREFIXYmin = value;
PREFIXcount++;
PREFIXlatestValue=value;
}
} else {
console.log("WARNING: line "+i+" is empty");
}
}
PREFIXYmin = parseFloat(parseInt(1000000*PREFIXYmin)/1000000);
PREFIXYmax = parseFloat(parseInt(1000000*PREFIXYmax)/1000000);
}
return dataPoints;
}
$.get("CSVFILE", function(data) {
var PREFIXarrayFU = PREFIXgetDataPointsFromCSV(data,COLVALUE,COLDATE);
var PREFIXgridXInterval="hour";
var PREFIXgridXformat="HH";
document.getElementById("PREFIXvalueLatest").innerHTML = " Latest: "+parseInt(100000000*PREFIXarrayFU[PREFIXarrayFU.length -1].y)/100000000;
document.getElementById("PREFIXvalueFirst").innerHTML = " First: "+parseInt(100000000*PREFIXarrayFU[0].y)/100000000;
document.getElementById("PREFIXaverage").innerHTML = " Avg: "+parseInt(100000000*PREFIXaccValue/PREFIXcount)/100000000;
document.getElementById("PREFIXdelta").innerHTML = " Δ: "+parseInt(100000000*(PREFIXYmax-PREFIXYmin))/100000000;
document.getElementById("PREFIXrecords").innerHTML = " Count: "+PREFIXcount;
if( PREFIXdeltaTime1 < 3601 ) { PREFIXgridX = 2; PREFIXgridXInterval="minute"; PREFIXgridXformat="HH:mm" } // if < 12h then tick is 1h
else if( PREFIXdeltaTime1 < 7201 ) { PREFIXgridX = 10; PREFIXgridXInterval="minute"; PREFIXgridXformat="HH:mm" } // if < 12h then tick is 1h
else if( PREFIXdeltaTime1 < 21601 ) { PREFIXgridX = 15; PREFIXgridXInterval="minute"; PREFIXgridXformat="HH:mm" } // if < 12h then tick is 1h
else if( PREFIXdeltaTime1 < 43201 ) { PREFIXgridX = 30; PREFIXgridXInterval="minute"; PREFIXgridXformat="HH:mm" } // if < 12h then tick is 1h
else if( PREFIXdeltaTime1 < 86401 ) { PREFIXgridX = 1; PREFIXgridXformat="D/M HH"; } // if < 24h then tick is 2h
else if( PREFIXdeltaTime1 <= 172801 ) { PREFIXgridX = 2; PREFIXgridXformat="D/M HH"; } // if <= 48h then tick is 4h
else if( PREFIXdeltaTime1 > 172801 ) { PREFIXgridX = 6; PREFIXgridXformat="D/M HH"; } // if > 48h then tick is 6h
Ydelta = PREFIXYmax - PREFIXYmin;
Yint = (PREFIXYmax-PREFIXYmin)/10;
PREFIXYmax += Yint;
PREFIXYmin -= Yint;
Yint = (PREFIXYmax-PREFIXYmin)/10;
var chart = new CanvasJS.Chart("CHARTCONTAINER", {
toolTip:{
enabled: true, //disable here
animationEnabled: false, //disable here
contentFormatter: function ( e ) {
var d=e.entries[0].dataPoint.x;
var padSeconds = (d.getSeconds() < 10) ? "0"+d.getSeconds(): d.getSeconds();
var padMinutes = (d.getMinutes() < 10) ? "0"+d.getMinutes(): d.getMinutes();
var padMonth = ((d.getMonth()+1) < 10) ? "0"+(d.getMonth()+1): (d.getMonth()+1);
var dateTooltip = d.getDate() + "/" + padMonth +" "+ d.getHours() + ":" + padMinutes + ":" + padSeconds;
return dateTooltip+" : LEGEND "+parseInt(1000000*e.entries[0].dataPoint.y)/1000000+"";
}
},
axisX: {
intervalType: PREFIXgridXInterval,
interval: PREFIXgridX,
valueFormatString: PREFIXgridXformat,
gridThickness: 1,
labelAngle: -50
},
axisY:[
{ lineColor: "lightgrey", gridColor: "lightgrey" , interval: Yint, minimum: PREFIXYmin, maximum: PREFIXYmax}
],
axisY2:[
{ lineColor: "lightred", gridColor: "lightgrey" , interval: 500, minimum: 0, maximum: 5000}
],
data: [
{ name: "LEGEND", type: "line", showInLegend: false, xValueType: "datetime", lineColor: "darkred", dataPoints: PREFIXarrayFU },
],
zoomEnabled: true
});
chart.render();
});
}
window.onload = function() {
PREFIXonload();
}
</script>
</body>
</html>