Unable to assign a time offset for x axis labels

[Talador12]

We have a datastream that at the current time feeds in data from 5 minutes ago. The x axis labels refuse to change. In the examples, they use Date.now(). Using any form of Date object manipulation or moment functions, it is not allowing the offset to occur. See here for methods we have tried: https://stackoverflow.com/questions/674721/how-do-i-subtract-minutes-from-a-date-in-javascript

It moves the data off screen and we would have to have an absurd duration to see it. Instead, we want to adjust the value of the recent time feeding in as shown in the xaxis labels.

In the docs here you can see the following:

Note that the following options are ignored for the 'realtime' scale.

bounds
distribution (always 'linear')
**offset (always false)**

There is no reason why offset should always be false. Let it be default to false, but do not ignore this field. If I specifically set an offset, please use that value.

[nagix]

I think the delay property can be used for this purpose. Try to change the value at https://nagix.github.io/chartjs-plugin-streaming/samples/interactions.html and see how it works. For the offset property, it is mainly used for a (static) bar chart to keep the bars on the both edges from being hidden, and I believe it's not useful for a streaming chart.

[baig]

I am sort of running into the similar issue. We are displaying real time charts but in our case they can also be recorded and replayed. Playing back the recorded stream with the historical time on x-axis does not seem to work.

[nagix]

Let's assume you have the external database that stores the recorded stream, and the function getData (start, end) returns the array that holds partial data for the specified period.

You can set chart.options.plugins.streaming.delay to the time delta between now and the time you want to start replaying, and push the partial data for a certain period in the past on every onRefresh call as follows. The function replay(start) resets the dataset and delay.

function getData(start, end) {
  // get data between start and end from the data store and return the following array
  // [{x: <timestamp>, y: <value>}, ...]
}

var prevHead, delay;

var chart = new Chart(ctx, {
  // ...
  onRefresh: function(chart) {
    var currHead = Date.now() - delay + 3000; // 3000 ms are added so that a line appears smoothly
    var data = getData(prevHead, currHead);
    Array.prototype.push.apply(chart.data.datasets[0].data, data);
    prevHead = currHead;
  }
  // ...
});

// Replay from replayStart
function replay(start) {
  chart.data.datasets[0].data = [];
  delay = Date.now() - start;
  chart.options.plugins.streaming.delay = delay;
  prevHead = start - 1;
  chart.update({duration: 0});
}

var replayStart = new Date('2018-01-01T00:00:00').getTime();
replay(replayStart);

See also the working sample.

[baig]

Thank you for the code example. You practically solved our problem for free. Please consider including this example in the official documentation as well.