System File 3: HTML file to make an internet accessible real-time graph of panel activity
This file is a web page that graphs the current accumulated data for the day:
CODE
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="300" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="./resources/dateFormatscript.js"></script>
<script type="text/javascript" src="./resources/d3.v3.min.js"></script>
<script type="text/javascript" src="./resources/c3.js"></script>
<link rel="stylesheet" type="text/css" href="./resources/c3.css">
<style type="text/css"></style>
<title>once again</title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var d = new Date();
$d = (d.getMonth()+1) + '-' + d.getDate()+ '-' + d.getFullYear();
$de = 'data_' + dateFormat('m-d-Y',$d)+'.txt';
$df = dateFormat('m-d-Y',$d);
d3.csv($de)
.row(function(d) { return [d.time12, d.PVpower, d.BattSOC, d.elevcalc, d.azicalc]; })
.get(function(error,rows) {
rows.unshift (["time12","PVpower","BattSOC","elevcalc","azicalc"])
console.log(rows);
$c = new Date().getFullYear();
$a = new Date().getMonth() + 1;
$b = new Date().getUTCDate();
$d2 = $df;
var chart = c3.generate({
title: {
text: $d2
},
size:{
width: 1000,
height: 400
},
bindto: '#chart',
data: {
rows: rows,
type: 'line',
x: 'time12',
xFormat:'%I:%M:%S %p'
},
point: {show: false},
tooltip: {show: false},
axis: {
x: {
localtime: true,
type:'timeseries',
tick:{
//culling:{max: 50},
fit: true,
count: 50,
format: '%I:%M:%S %p',
rotate: 65,
}//end tick
},//end x
y: {
max: 350,
min: 0
} //end y
},//end axis
grid:{
x:{
show: true
},//end x
y:{
show: true
}//end y
}//end grid
});
});
}//]]>
</script>
</head>
<body>
<div id="chart"></div>
<script>
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "None"
}], "*")
}
</script>
</body>
</html>
END CODE
posted by jimlynnjulian @ March 05, 2018
0 Comments
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home