My web app connects to an app that steams data from a BLE device and gives the users ECG signal and it all works well except that when I load up the web app I have to zoom in a lot on the chart until I can actually see the ECG signal. I assume this is to do with the JavaScript on the web app but I have no idea what to do to set it so it displays the ECG without having to do any zooming in. The graph before zooming in
/* Create chart if doesn't exist */
if (!ecgChart) {
ecgChart = new Chart(ecgCanvas, {
type: 'line',
data: {
datasets: [{
label: "ECG Trace",
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgb(255, 99, 132)',
data: ecg_data
}]
},
options: {
title: { text: "ECG Data" },
/* Performance */
animation: { duration: 0 },
hover: { animationDuration: 0 },
responsiveAnimationDuration: 0,
elements: {
line: { tension: 0 },
point: { radius: 0 }
},
/* Timeseries */
scales: {
xAxes: [{
type: "time",
time: {
unit: 'second'
},
min: '2',
/* Vertical time */
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
ticks: {
suggestedMin: -300,
suggestedMax: 300
}
}]
},
annotation: {
annotations: []
},
pan: {
enabled: true,
mode: 'xy'
},
zoom: {
enabled: true,
mode: 'xy'
}
}
})
}
/* Create chart if doesn't exist */
if (!ecgFiltChart) {
ecgFiltChart = new Chart(ecgFiltCanvas, {
type: 'line',
data: {
datasets: [{
label: "ECG Filtered Trace",
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgb(255, 99, 0)',
data: ecg_filt_data
}]
},
options: {
title: { text: "ECG Data" },
/* Performence */
animation: { duration: 0 },
hover: { animationDuration: 0 },
responsiveAnimationDuration: 0,
elements: {
line: { tension: 0 },
point: { radius: 0 }
},
/* Timeseries */
scales: {
xAxes: [{
type: "time",
time: {
unit: 'second'
},
/* Vertical time */
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
ticks: {
suggestedMin: -300,
suggestedMax: 300
}
}]
},
annotation: {
annotations: []
},
pan: {
enabled: true,
mode: 'xy'
},
zoom: {
enabled: true,
mode: 'xy'
}
}
})
}
/* Set new data and update */
ecgChart.data.datasets[0].data = ecg_data
if (showLabels) ecgChart.options.annotation.annotations = labels
else savedLabels = labels
ecgChart.update()
ecgFiltChart.data.datasets[0].data = ecg_filt_data
if (showLabels) ecgFiltChart.options.annotation.annotations = labels
else savedLabels = labels
ecgFiltChart.update()
/* Real-time graph */
clearInterval(interval)
interval = setInterval(pushGraph, frequency)
}
function pushGraph() {
/* Times */
let currentTime = Date.now()
let ecgStart = new Date(currentTime - offset - 4 * 1000)
let ecgEnd = new Date(currentTime - offset - 1000)
let spo2Start = new Date(currentTime - offset - 60 * 1000)
let spo2End = new Date(currentTime - offset - 1000)
/* Move & update graphs */
try {
ecgChart.options.scales.xAxes[0].time.min = ecgStart
ecgChart.options.scales.xAxes[0].time.max = ecgEnd
ecgChart.update()
} catch (ignored) { }
try {
ecgFiltChart.options.scales.xAxes[0].time.min = ecgStart
ecgFiltChart.options.scales.xAxes[0].time.max = ecgEnd
ecgFiltChart.update()
} catch (ignored) { }
try {
spo2Chart.options.scales.xAxes[0].time.min = spo2Start
spo2Chart.options.scales.xAxes[0].time.max = spo2End
spo2Chart.update()
} catch (ignored) { }
}
Aucun commentaire:
Enregistrer un commentaire