Files
AI-on-the-edge-device/sd-card/html/graph.html
2022-11-17 18:25:02 +01:00

134 lines
3.6 KiB
HTML

<html>
<head>
<script src='https://cdn.plot.ly/plotly-2.14.0.min.js'></script>
<script type="text/javascript" src="./gethost.js"></script>
<script type="text/javascript" src="./readconfigcommon.js"></script>
<script type="text/javascript" src="./readconfigparam.js"></script>
<style>
textarea {
width: 600px;
height: 300px;
}
</style>
<script>
function run() {
var el = document.getElementById('cnsl');
el && eval(el.value);
}
</script>
</head>
<body>
<div id='chart'></div>
<select id="datafiles" onchange="run();"></select>
<select id="numbers" onchange="run();"></select>
<select id="datatype" onchange="run();">
<option value="3">Value</option>
<option value="4">PreValue</option>
<option value="5">Change-Rate</option>
<option value="6">Change-Absolut</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=fileserver/log/data/>Download</a>
<!-- <button onclick="document.getElementById('editor').hidden = false; this.hidden = true;" >Editor</button> -->
<div id='editor' hidden='true'>
<textarea id="cnsl">
datefile = document.getElementById("datafiles").value;
numbername = document.getElementById("numbers").value;
datatype = document.getElementById("datatype").value;
//alert("Auslesen: " + datefile + " " + numbername);
_basepath = getbasepath();
fetch(_basepath + '/fileserver/log/data/' + datefile)
.then(response => {
// handle the response
if (response.status == 404) {
alert("no log data available for "+dateString);
}
response.text()
.then( result => {
var lines = result.split("\n");
var trace = {
x: [],
y: [],
type: 'scatter'
};
var timex = 1;
for (let line of lines) {
{
console.log(line);
if (line.split(",")[1] == numbername)
{
var value = line.split(",")[datatype];
var time = line.split(",")[0];
console.log("> "+time+" "+value+"\n");
trace.x.push(time);
// timex += 1;
trace.y.push(value);
}
}
}
console.log(trace);
var data = [trace];
Plotly.newPlot('chart', data);
});
}).catch((error) => {
// handle the error
console.log(error);
alert("test");
});
</textarea><br />
<button onclick="run();">run</button>
</div>
<script>
function WriteModelFiles()
{
list_data = getDATAList();
var _indexDig = document.getElementById("datafiles");
while (_indexDig.length)
_indexDig.remove(0);
for (var i = list_data.length - 1; i >= 0; --i)
{
var optionDig = document.createElement("option");
var text = list_data[i];
optionDig.text = text;
optionDig.value = list_data[i];
_indexDig.add(optionDig);
}
}
function WriteNumbers()
{
list_data = getNUMBERSList();
var _indexDig = document.getElementById("numbers");
while (_indexDig.length)
_indexDig.remove(0);
for (var i = 0; i < list_data.length; ++i)
{
var optionDig = document.createElement("option");
var text = list_data[i];
optionDig.text = text;
optionDig.value = list_data[i];
_indexDig.add(optionDig);
}
}
WriteModelFiles();
WriteNumbers();
run();
</script>
</body>
</html>