Sync an html5 video with an highchart.js line chart

Question

I have a one minute long video of a train moving and some data series about his position, onboard accelerometer etc.

My goal is to make line charts (with Highcharts.js) of those measurements that are dynamically drawn with the video at a rate of 20points per second. The charts have to move with the video, so that if the user go back also the charts go at the same frame and so on.

I was wondering if there's a way to attach an event to the video progress bar and redraw the chart every x milliseconds and/or every time that the user play/stop the video

Answer 1

Connecting timeupdate event for a video element with setData method for a Highcharts series should be enough.

Example:

let currentDataIndex = 0;
const video = document.getElementById("video1");

const chart = Highcharts.chart('container', {
    series: [{
        // Highcharts mutate original data array, so use a copy
        data: data[currentDataIndex].slice()
    }]
});

const updateChartData = index => {
    chart.series[0].setData(data[index].slice());
    currentDataIndex = index;
};

video.addEventListener('timeupdate', e => {
    const second = Math.floor(video.currentTime);

    if (second !== currentDataIndex) {
        updateChartData(second);
    }
});

---

Live demo: http://jsfiddle.net/BlackLabel/8a6yvjs5/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData

Docs:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event