mercredi 25 septembre 2019

How do I set the graph to be zoomed in automatically

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