184 lines
3.8 KiB
HTML
184 lines
3.8 KiB
HTML
<br>
|
|
<div id="tc-edit-plotly-graph"></div>
|
|
<a href="#" onclick="sendTCData()" class="pure-button">Daten senden</a>
|
|
<script>
|
|
var dataPoints = [];
|
|
for (var i = 0; i < 10; i++) {
|
|
var xValue = i * 2;
|
|
dataPoints.push({ x: xValue, y: [0, 0, 0, 0] });
|
|
}
|
|
var options = {
|
|
title: {
|
|
text: "Graph Title"
|
|
},
|
|
data: [{
|
|
type: "line",
|
|
dataPoints: dataPoints
|
|
}]
|
|
};
|
|
var inputIdPrefixes = ["hour", "minute", "ch1", "ch2", "ch3", "ch4"];
|
|
var inputData = {
|
|
hour: [],
|
|
minute: [],
|
|
ch1: [],
|
|
ch2: [],
|
|
ch3: [],
|
|
ch4: []
|
|
};
|
|
var trace1 = {
|
|
x: [],
|
|
y: [],
|
|
mode: 'lines',
|
|
name: 'ch1'
|
|
};
|
|
var trace2 = {
|
|
x: [],
|
|
y: [],
|
|
mode: 'lines',
|
|
name: 'ch2'
|
|
};
|
|
var trace3 = {
|
|
x: [],
|
|
y: [],
|
|
mode: 'lines',
|
|
name: 'ch3'
|
|
};
|
|
var trace4 = {
|
|
x: [],
|
|
y: [],
|
|
mode: 'lines',
|
|
name: 'ch4'
|
|
};
|
|
var data = [trace1, trace2, trace3, trace4];
|
|
var layout = {
|
|
xaxis: {
|
|
title: 'Uhrzeit'
|
|
},
|
|
yaxis: {
|
|
title: 'Wert'
|
|
},
|
|
margin: {
|
|
l: 50,
|
|
r: 50,
|
|
b: 50,
|
|
t: 50,
|
|
pad: 4
|
|
},
|
|
hovermode: 'closest'
|
|
};
|
|
Plotly.newPlot('tc-edit-plotly-graph', data, layout);
|
|
var layout = {
|
|
title: 'Werte der Kanäle ch1 - ch4',
|
|
xaxis: {
|
|
title: 'Uhrzeit',
|
|
range: ['00:00', '23:59'],
|
|
tickformat: '%H:%M'
|
|
},
|
|
yaxis: {
|
|
title: 'Wert in %',
|
|
range: [0, 100]
|
|
}
|
|
};
|
|
var plotDiv = document.getElementById('plot');
|
|
Plotly.newPlot(plotDiv, [], layout, {responsive: true});
|
|
var data = [ { x: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
|
|
y: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
name: 'Channel 1',
|
|
mode: 'lines+markers',
|
|
line: {
|
|
shape: 'spline'
|
|
}
|
|
},
|
|
{
|
|
x: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
|
|
y: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
name: 'Channel 2',
|
|
mode: 'lines+markers',
|
|
line: {
|
|
shape: 'spline'
|
|
}
|
|
},
|
|
{
|
|
x: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
|
|
y: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
name: 'Channel 3',
|
|
mode: 'lines+markers',
|
|
line: {
|
|
shape: 'spline'
|
|
}
|
|
},
|
|
{
|
|
x: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
|
|
y: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
name: 'Channel 4',
|
|
mode: 'lines+markers',
|
|
line: {
|
|
shape: 'spline'
|
|
}
|
|
}
|
|
];
|
|
var layout = {
|
|
xaxis: {
|
|
title: 'Time (hh:mm)',
|
|
showgrid: false,
|
|
zeroline: false
|
|
},
|
|
yaxis: {
|
|
title: 'Value (%)',
|
|
showline: false
|
|
}
|
|
};
|
|
Plotly.newPlot('graph', data, layout);
|
|
var layout = {
|
|
title: 'Graph',
|
|
xaxis: {
|
|
title: 'Uhrzeit'
|
|
},
|
|
yaxis: {
|
|
title: 'Prozent'
|
|
},
|
|
hovermode: 'closest'
|
|
};
|
|
var plot_data = [{ x: [],
|
|
y: [],
|
|
mode: 'lines+markers',
|
|
line: { shape: 'spline' }
|
|
}];
|
|
Plotly.newPlot('graph', plot_data, layout);
|
|
function updateData() {
|
|
for (let i = 0; i < 10; i++) {
|
|
let hour = document.getElementById(`hour-${i}`).value;
|
|
let minute = document.getElementById(`minute-${i}`).value;
|
|
for (let j = 1; j <= 4; j++) {
|
|
let value = parseFloat(document.getElementById(`ch${j}-${i}`).value);
|
|
let index = i * 4 + (j - 1);
|
|
data[index].x = `${hour}:${minute}`;
|
|
data[index].y = value;
|
|
}
|
|
}
|
|
Plotly.update('graph', data, layout);
|
|
}
|
|
for (let i = 0; i < 10; i++) {
|
|
document.getElementById(`hour-${i}`).addEventListener('input', updateData);
|
|
document.getElementById(`minute-${i}`).addEventListener('input', updateData);
|
|
for (let j = 1; j <= 4; j++) {
|
|
document.getElementById(`ch${j}-${i}`).addEventListener('input', updateData);
|
|
}
|
|
}
|
|
function sendTCData() {
|
|
var data = [];
|
|
for (var i = 0; i < 10; i++) {
|
|
var hh = document.getElementById("hh_" + i).value;
|
|
var mm = document.getElementById("mm_" + i).value;
|
|
var ch1 = document.getElementById("ch1_" + i).value;
|
|
var ch2 = document.getElementById("ch2_" + i).value;
|
|
var ch3 = document.getElementById("ch3_" + i).value;
|
|
var ch4 = document.getElementById("ch4_" + i).value;
|
|
data.push({ "hh": hh, "mm": mm, "ch1": ch1, "ch2": ch2, "ch3": ch3, "ch4": ch4 });
|
|
}
|
|
var jsonData = encodeURIComponent(JSON.stringify(data));
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "http://{{IP_ADDRESS}}}}/tc_data_block_store?data=" + jsonData);
|
|
xhr.send();
|
|
}
|
|
</script> |