Slide X axis chart (linear type) - streaming effect

[Nolandos]

Hi,

I try to synchronize my chart with video. I have a chart with a linear type x axis (with seconds as labels) and I would like to have an axis-shifting effect (Just like streaming for realtime). For example video has 1m 30s, Chart has 130 points, and displays 10 points chunks, sliding from right to left ( as realtime with dates). I can't find the function in docs or any examples on yt. Chart.js allow it or I must write it yourself?

[LeeLenaleee]

There's no out of the box implementation for this in chart.ja itself but you can use the streaming plugin or look at how they did it and write your own implementation

https://nagix.github.io/chartjs-plugin-streaming/latest/

[Nolandos]

Thanks, I'm already using streaming plugin, but I wonder if it is possible to change the X-axis display formatting from hh: mm: ss to seconds only

[kurkle]

You can also pan using api
https://www.chartjs.org/chartjs-plugin-zoom/latest/api/#pan
https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/api.html

(replied to wrong thread, sorry for that)

[Nolandos]

@kurkle I will check it, Thanks!

[LeeLenaleee]

You can use a custom tick callback.

const startTime = new Date();

const config = {
  type: 'line',
  data: data,
  options: {
    scales: {
      x: {
        type: 'realtime',
        time: {
          unit: 'second'
        },
        ticks: {
          callback: function (val, index, ticks) {
            const currentTime = new Date(ticks[index].value);

            const diff = (currentTime.getTime() - startTime .getTime()) / 1000
            return diff < 0 ? 0 : Math.floor(diff)
          }
        },
        realtime: {
          duration: 20000,
          refresh: 1000,
          delay: 2000,
          onRefresh: onRefresh
        }
      },
      y: {
        title: {
          display: true,
          text: 'Value'
        }
      }
    },
    interaction: {
      intersect: false
    }
  }
};

Paste this config in the config tab in this example and you can see it in action: https://nagix.github.io/chartjs-plugin-streaming/latest/samples/charts/line-horizontal.html

[Nolandos]

@LeeLenaleee Looks good, I will try it. Thanks!

[kurkle]

You could also use the pan functionality of chartjs-plugin-zoom

[Nolandos]

I'm already using pan functionaly and chartjs-plugin-zoom, but I have to move the chart manually. It goes to do this automatically following the video time?