Revert "Refactorized the Plotly graph code"
This reverts commit bb0c390937.
This commit is contained in:
Kai Lauterbach
parent
bb0c390937
commit
88b738ac75
2 changed files with 268 additions and 105 deletions
|
|
@ -49,14 +49,6 @@ var channel1 = [];
|
||||||
var channel2 = [];
|
var channel2 = [];
|
||||||
var channel3 = [];
|
var channel3 = [];
|
||||||
var channel4 = [];
|
var channel4 = [];
|
||||||
parseData(data, time, channel1, channel2, channel3, channel4, currenttime);
|
|
||||||
var index = getIndex(currenttime, time);
|
|
||||||
var indexFloat = getIndexFloat(index, currenttime, time);
|
|
||||||
adjustIndex(indexFloat, index, currenttime, time);
|
|
||||||
createGraph(time, channel1, channel2, channel3, channel4, index);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function parseData(data, time, channel1, channel2, channel3, channel4, currenttime) {
|
|
||||||
for (var i = 0; i < data['tcdata'].length; i++) {
|
for (var i = 0; i < data['tcdata'].length; i++) {
|
||||||
time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
|
time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
|
||||||
channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
|
channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
|
||||||
|
|
@ -66,16 +58,9 @@ channel4.push(data['tcdata'][i]['ch4'] * 100 / 255);
|
||||||
}
|
}
|
||||||
currenttime.push(data['currenttime']['hour']);
|
currenttime.push(data['currenttime']['hour']);
|
||||||
currenttime.push(data['currenttime']['min']);
|
currenttime.push(data['currenttime']['min']);
|
||||||
}
|
|
||||||
function getIndex(currenttime, time) {
|
|
||||||
var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
|
var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
|
||||||
var index = time.indexOf(currentTimeStr);
|
var index = time.indexOf(currentTimeStr);
|
||||||
if (index === -1) {
|
if (index === -1) {
|
||||||
index = findIndex(currenttime, time);
|
|
||||||
}
|
|
||||||
return index;
|
|
||||||
}
|
|
||||||
function findIndex(currenttime, time) {
|
|
||||||
var lowerIndex = -1;
|
var lowerIndex = -1;
|
||||||
var upperIndex = -1;
|
var upperIndex = -1;
|
||||||
for (var i = 0; i < time.length - 1; i++) {
|
for (var i = 0; i < time.length - 1; i++) {
|
||||||
|
|
@ -101,21 +86,15 @@ var tmp1 = time[0].split(':');
|
||||||
currenttime[0] = tmp1[0];
|
currenttime[0] = tmp1[0];
|
||||||
currenttime[1] = tmp1[1];
|
currenttime[1] = tmp1[1];
|
||||||
}
|
}
|
||||||
return lowerIndex;
|
var lowerTime = time[lowerIndex].split(":");
|
||||||
}
|
var upperTime = time[upperIndex].split(":");
|
||||||
function getIndexFloat(index, currenttime, time) {
|
|
||||||
var lowerTime = time[index].split(":");
|
|
||||||
var upperTime = time[index + 1].split(":");
|
|
||||||
var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
|
var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
|
||||||
var indexFloat = index + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
|
var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
|
||||||
return indexFloat;
|
} else {
|
||||||
}
|
}
|
||||||
function adjustIndex(indexFloat, index, currenttime, time) {
|
|
||||||
if (indexFloat > index) {
|
if (indexFloat > index) {
|
||||||
index = indexFloat;
|
index = indexFloat;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
function createGraph(time, channel1, channel2, channel3, channel4, index) {
|
|
||||||
var trace1 = {
|
var trace1 = {
|
||||||
x: time,
|
x: time,
|
||||||
y: channel1,
|
y: channel1,
|
||||||
|
|
@ -168,8 +147,9 @@ dash: 'dot'
|
||||||
}]
|
}]
|
||||||
};
|
};
|
||||||
Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
|
Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
setInterval(loadGraphData, 60000);
|
setInterval(loadGraphData, 10000);
|
||||||
loadGraphData();
|
loadGraphData();
|
||||||
function loadTCGraphData() {
|
function loadTCGraphData() {
|
||||||
console.log('----> generate tc data graph <----');
|
console.log('----> generate tc data graph <----');
|
||||||
|
|
@ -180,11 +160,104 @@ var channel1 = [];
|
||||||
var channel2 = [];
|
var channel2 = [];
|
||||||
var channel3 = [];
|
var channel3 = [];
|
||||||
var channel4 = [];
|
var channel4 = [];
|
||||||
parseData(data, time, channel1, channel2, channel3, channel4, currenttime);
|
for (var i = 0; i < data['tcdata'].length; i++) {
|
||||||
var index = getIndex(currenttime, time);
|
time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
|
||||||
var indexFloat = getIndexFloat(index, currenttime, time);
|
channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
|
||||||
adjustIndex(indexFloat, index, currenttime, time);
|
channel2.push(data['tcdata'][i]['ch2'] * 100 / 255);
|
||||||
createGraph(time, channel1, channel2, channel3, channel4, index);
|
channel3.push(data['tcdata'][i]['ch3'] * 100 / 255);
|
||||||
|
channel4.push(data['tcdata'][i]['ch4'] * 100 / 255);
|
||||||
|
}
|
||||||
|
currenttime.push(data['currenttime']['hour']);
|
||||||
|
currenttime.push(data['currenttime']['min']);
|
||||||
|
var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
|
||||||
|
var index = time.indexOf(currentTimeStr);
|
||||||
|
if (index === -1) {
|
||||||
|
var lowerIndex = -1;
|
||||||
|
var upperIndex = -1;
|
||||||
|
for (var i = 0; i < time.length - 1; i++) {
|
||||||
|
const currentDate = new Date();
|
||||||
|
const year = currentDate.getFullYear();
|
||||||
|
const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
|
||||||
|
const day = currentDate.getDate().toString().padStart(2, '0');
|
||||||
|
const dateString = `${year}-${month}-${day}`;
|
||||||
|
const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
|
||||||
|
const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
|
||||||
|
const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
|
||||||
|
if (curr.isBetween(start, end)) {
|
||||||
|
lowerIndex = i;
|
||||||
|
upperIndex = i + 1;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (lowerIndex === -1 || upperIndex === -1) {
|
||||||
|
console.log("Warning: Current time not found in time array and not between two elements in time array. Fixing it...");
|
||||||
|
lowerIndex = 0;
|
||||||
|
upperIndex = 1;
|
||||||
|
var tmp1 = time[0].split(':');
|
||||||
|
currenttime[0] = tmp1[0];
|
||||||
|
currenttime[1] = tmp1[1];
|
||||||
|
}
|
||||||
|
var lowerTime = time[lowerIndex].split(":");
|
||||||
|
var upperTime = time[upperIndex].split(":");
|
||||||
|
var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
|
||||||
|
var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
|
||||||
|
} else {
|
||||||
|
}
|
||||||
|
if (indexFloat > index) {
|
||||||
|
index = indexFloat;
|
||||||
|
}
|
||||||
|
var trace1 = {
|
||||||
|
x: time,
|
||||||
|
y: channel1,
|
||||||
|
name: 'Channel 1',
|
||||||
|
type: 'scatter',
|
||||||
|
mode: 'lines+markers',
|
||||||
|
};
|
||||||
|
var trace2 = {
|
||||||
|
x: time,
|
||||||
|
y: channel2,
|
||||||
|
name: 'Channel 2',
|
||||||
|
type: 'scatter',
|
||||||
|
mode: 'lines+markers',
|
||||||
|
};
|
||||||
|
var trace3 = {
|
||||||
|
x: time,
|
||||||
|
y: channel3,
|
||||||
|
name: 'Channel 3',
|
||||||
|
type: 'scatter',
|
||||||
|
mode: 'lines+markers',
|
||||||
|
};
|
||||||
|
var trace4 = {
|
||||||
|
x: time,
|
||||||
|
y: channel4,
|
||||||
|
name: 'Channel 4',
|
||||||
|
type: 'scatter',
|
||||||
|
mode: 'lines+markers',
|
||||||
|
};
|
||||||
|
var layout = {
|
||||||
|
title: 'Timing Control Data Blocks',
|
||||||
|
xaxis: {
|
||||||
|
title: 'Time',
|
||||||
|
tickangle: -45,
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
title: 'Brightness',
|
||||||
|
range: [0, 100],
|
||||||
|
},
|
||||||
|
shapes: [{
|
||||||
|
type: 'line',
|
||||||
|
x0: index,
|
||||||
|
y0: 0,
|
||||||
|
x1: index,
|
||||||
|
y1: 255,
|
||||||
|
line: {
|
||||||
|
color: 'lightgrey',
|
||||||
|
width: 3,
|
||||||
|
dash: 'dot'
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
|
||||||
var plot = document.getElementById('tc_plot_chart');
|
var plot = document.getElementById('tc_plot_chart');
|
||||||
}
|
}
|
||||||
function rgbaToHex(rgba) {
|
function rgbaToHex(rgba) {
|
||||||
|
|
|
||||||
|
|
@ -64,15 +64,131 @@ function loadGraphData() {
|
||||||
var channel2 = [];
|
var channel2 = [];
|
||||||
var channel3 = [];
|
var channel3 = [];
|
||||||
var channel4 = [];
|
var channel4 = [];
|
||||||
parseData(data, time, channel1, channel2, channel3, channel4, currenttime);
|
for (var i = 0; i < data['tcdata'].length; i++) {
|
||||||
var index = getIndex(currenttime, time);
|
time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
|
||||||
var indexFloat = getIndexFloat(index, currenttime, time);
|
channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
|
||||||
adjustIndex(indexFloat, index, currenttime, time);
|
channel2.push(data['tcdata'][i]['ch2'] * 100 / 255);
|
||||||
createGraph(time, channel1, channel2, channel3, channel4, index);
|
channel3.push(data['tcdata'][i]['ch3'] * 100 / 255);
|
||||||
|
channel4.push(data['tcdata'][i]['ch4'] * 100 / 255);
|
||||||
|
}
|
||||||
|
currenttime.push(data['currenttime']['hour']);
|
||||||
|
currenttime.push(data['currenttime']['min']);
|
||||||
|
//console.log(currenttime);
|
||||||
|
var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
|
||||||
|
var index = time.indexOf(currentTimeStr);
|
||||||
|
if (index === -1) {
|
||||||
|
var lowerIndex = -1;
|
||||||
|
var upperIndex = -1;
|
||||||
|
for (var i = 0; i < time.length - 1; i++) {
|
||||||
|
//console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
|
||||||
|
const currentDate = new Date();
|
||||||
|
const year = currentDate.getFullYear();
|
||||||
|
const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
|
||||||
|
const day = currentDate.getDate().toString().padStart(2, '0');
|
||||||
|
const dateString = `${year}-${month}-${day}`;
|
||||||
|
const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
|
||||||
|
const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
|
||||||
|
const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
|
||||||
|
//console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
|
||||||
|
//console.log(curr.isBetween(start, end));
|
||||||
|
if (curr.isBetween(start, end)) {
|
||||||
|
lowerIndex = i;
|
||||||
|
upperIndex = i + 1;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//console.log('lowerIndex=' + lowerIndex);
|
||||||
|
//console.log('upperIndex=' + upperIndex);
|
||||||
|
if (lowerIndex === -1 || upperIndex === -1) {
|
||||||
|
console.log("Error: Current time not found in time array and not between two elements in time array. Fixing it...");
|
||||||
|
lowerIndex = 0;
|
||||||
|
upperIndex = 1;
|
||||||
|
var tmp1 = time[0].split(':');
|
||||||
|
//console.log('tmp1 = ' + tmp1);
|
||||||
|
currenttime[0] = tmp1[0];
|
||||||
|
currenttime[1] = tmp1[1];
|
||||||
|
}
|
||||||
|
var lowerTime = time[lowerIndex].split(":");
|
||||||
|
var upperTime = time[upperIndex].split(":");
|
||||||
|
var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
|
||||||
|
var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
|
||||||
|
//console.log("Index (float): " + indexFloat);
|
||||||
|
} else {
|
||||||
|
//console.log("Index (integer): " + index);
|
||||||
|
//console.log("Index (float): " + index);
|
||||||
|
}
|
||||||
|
if (indexFloat > index) {
|
||||||
|
index = indexFloat;
|
||||||
|
}
|
||||||
|
//console.log("index in graph >>>" + index);
|
||||||
|
var trace1 = {
|
||||||
|
x: time,
|
||||||
|
y: channel1,
|
||||||
|
name: 'Channel 1',
|
||||||
|
type: 'scatter',
|
||||||
|
mode: 'lines+markers',
|
||||||
|
};
|
||||||
|
var trace2 = {
|
||||||
|
x: time,
|
||||||
|
y: channel2,
|
||||||
|
name: 'Channel 2',
|
||||||
|
type: 'scatter',
|
||||||
|
mode: 'lines+markers',
|
||||||
|
};
|
||||||
|
var trace3 = {
|
||||||
|
x: time,
|
||||||
|
y: channel3,
|
||||||
|
name: 'Channel 3',
|
||||||
|
type: 'scatter',
|
||||||
|
mode: 'lines+markers',
|
||||||
|
};
|
||||||
|
var trace4 = {
|
||||||
|
x: time,
|
||||||
|
y: channel4,
|
||||||
|
name: 'Channel 4',
|
||||||
|
type: 'scatter',
|
||||||
|
mode: 'lines+markers',
|
||||||
|
};
|
||||||
|
var layout = {
|
||||||
|
title: 'Timing Control Data Blocks',
|
||||||
|
xaxis: {
|
||||||
|
title: 'Time',
|
||||||
|
tickangle: -45,
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
title: 'Brightness',
|
||||||
|
range: [0, 100],
|
||||||
|
},
|
||||||
|
shapes: [{
|
||||||
|
type: 'line',
|
||||||
|
x0: index,
|
||||||
|
y0: 0,
|
||||||
|
x1: index,
|
||||||
|
y1: 255,
|
||||||
|
line: {
|
||||||
|
color: 'lightgrey',
|
||||||
|
width: 3,
|
||||||
|
dash: 'dot'
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
setInterval(loadGraphData, 10000);
|
||||||
|
loadGraphData();
|
||||||
|
|
||||||
function parseData(data, time, channel1, channel2, channel3, channel4, currenttime) {
|
function loadTCGraphData() {
|
||||||
|
console.log('----> generate tc data graph <----');
|
||||||
|
|
||||||
|
var data = JSON.parse(createJsonFromTable());
|
||||||
|
//console.log(data);
|
||||||
|
var currenttime = [];
|
||||||
|
var time = [];
|
||||||
|
var channel1 = [];
|
||||||
|
var channel2 = [];
|
||||||
|
var channel3 = [];
|
||||||
|
var channel4 = [];
|
||||||
for (var i = 0; i < data['tcdata'].length; i++) {
|
for (var i = 0; i < data['tcdata'].length; i++) {
|
||||||
time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
|
time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
|
||||||
channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
|
channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
|
||||||
|
|
@ -82,61 +198,54 @@ function parseData(data, time, channel1, channel2, channel3, channel4, currentti
|
||||||
}
|
}
|
||||||
currenttime.push(data['currenttime']['hour']);
|
currenttime.push(data['currenttime']['hour']);
|
||||||
currenttime.push(data['currenttime']['min']);
|
currenttime.push(data['currenttime']['min']);
|
||||||
}
|
//console.log(currenttime);
|
||||||
|
|
||||||
function getIndex(currenttime, time) {
|
|
||||||
var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
|
var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
|
||||||
var index = time.indexOf(currentTimeStr);
|
var index = time.indexOf(currentTimeStr);
|
||||||
if (index === -1) {
|
if (index === -1) {
|
||||||
index = findIndex(currenttime, time);
|
var lowerIndex = -1;
|
||||||
}
|
var upperIndex = -1;
|
||||||
return index;
|
for (var i = 0; i < time.length - 1; i++) {
|
||||||
}
|
//console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
|
||||||
|
const currentDate = new Date();
|
||||||
function findIndex(currenttime, time) {
|
const year = currentDate.getFullYear();
|
||||||
var lowerIndex = -1;
|
const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
|
||||||
var upperIndex = -1;
|
const day = currentDate.getDate().toString().padStart(2, '0');
|
||||||
for (var i = 0; i < time.length - 1; i++) {
|
const dateString = `${year}-${month}-${day}`;
|
||||||
const currentDate = new Date();
|
const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
|
||||||
const year = currentDate.getFullYear();
|
const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
|
||||||
const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
|
const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
|
||||||
const day = currentDate.getDate().toString().padStart(2, '0');
|
//console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
|
||||||
const dateString = `${year}-${month}-${day}`;
|
//console.log(curr.isBetween(start, end));
|
||||||
const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
|
if (curr.isBetween(start, end)) {
|
||||||
const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
|
lowerIndex = i;
|
||||||
const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
|
upperIndex = i + 1;
|
||||||
if (curr.isBetween(start, end)) {
|
break;
|
||||||
lowerIndex = i;
|
}
|
||||||
upperIndex = i + 1;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
//console.log('lowerIndex=' + lowerIndex);
|
||||||
|
//console.log('upperIndex=' + upperIndex);
|
||||||
|
if (lowerIndex === -1 || upperIndex === -1) {
|
||||||
|
console.log("Warning: Current time not found in time array and not between two elements in time array. Fixing it...");
|
||||||
|
lowerIndex = 0;
|
||||||
|
upperIndex = 1;
|
||||||
|
var tmp1 = time[0].split(':');
|
||||||
|
//console.log('tmp1 = ' + tmp1);
|
||||||
|
currenttime[0] = tmp1[0];
|
||||||
|
currenttime[1] = tmp1[1];
|
||||||
|
}
|
||||||
|
var lowerTime = time[lowerIndex].split(":");
|
||||||
|
var upperTime = time[upperIndex].split(":");
|
||||||
|
var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
|
||||||
|
var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
|
||||||
|
//console.log("Index (float): " + indexFloat);
|
||||||
|
} else {
|
||||||
|
//console.log("Index (integer): " + index);
|
||||||
|
//console.log("Index (float): " + index);
|
||||||
}
|
}
|
||||||
if (lowerIndex === -1 || upperIndex === -1) {
|
|
||||||
console.log("Error: Current time not found in time array and not between two elements in time array. Fixing it...");
|
|
||||||
lowerIndex = 0;
|
|
||||||
upperIndex = 1;
|
|
||||||
var tmp1 = time[0].split(':');
|
|
||||||
currenttime[0] = tmp1[0];
|
|
||||||
currenttime[1] = tmp1[1];
|
|
||||||
}
|
|
||||||
return lowerIndex;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getIndexFloat(index, currenttime, time) {
|
|
||||||
var lowerTime = time[index].split(":");
|
|
||||||
var upperTime = time[index + 1].split(":");
|
|
||||||
var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
|
|
||||||
var indexFloat = index + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
|
|
||||||
return indexFloat;
|
|
||||||
}
|
|
||||||
|
|
||||||
function adjustIndex(indexFloat, index, currenttime, time) {
|
|
||||||
if (indexFloat > index) {
|
if (indexFloat > index) {
|
||||||
index = indexFloat;
|
index = indexFloat;
|
||||||
}
|
}
|
||||||
}
|
//console.log("index in graph >>>" + index);
|
||||||
|
|
||||||
function createGraph(time, channel1, channel2, channel3, channel4, index) {
|
|
||||||
var trace1 = {
|
var trace1 = {
|
||||||
x: time,
|
x: time,
|
||||||
y: channel1,
|
y: channel1,
|
||||||
|
|
@ -188,28 +297,9 @@ function createGraph(time, channel1, channel2, channel3, channel4, index) {
|
||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
};
|
};
|
||||||
Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
|
Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
|
||||||
}
|
|
||||||
setInterval(loadGraphData, 60000);
|
|
||||||
loadGraphData();
|
|
||||||
|
|
||||||
function loadTCGraphData() {
|
var plot = document.getElementById('tc_plot_chart'); // Das HTML-Div-Element, in dem der Plot angezeigt wird
|
||||||
console.log('----> generate tc data graph <----');
|
|
||||||
|
|
||||||
var data = JSON.parse(createJsonFromTable());
|
|
||||||
var currenttime = [];
|
|
||||||
var time = [];
|
|
||||||
var channel1 = [];
|
|
||||||
var channel2 = [];
|
|
||||||
var channel3 = [];
|
|
||||||
var channel4 = [];
|
|
||||||
parseData(data, time, channel1, channel2, channel3, channel4, currenttime);
|
|
||||||
var index = getIndex(currenttime, time);
|
|
||||||
var indexFloat = getIndexFloat(index, currenttime, time);
|
|
||||||
adjustIndex(indexFloat, index, currenttime, time);
|
|
||||||
createGraph(time, channel1, channel2, channel3, channel4, index);
|
|
||||||
|
|
||||||
var plot = document.getElementById('tc_plot_chart');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function rgbaToHex(rgba) {
|
function rgbaToHex(rgba) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue