start streaming with some initial values

[vishalgwalani]

I want to start streaming from current time but the graph should not be blank initially. I want some values to be there. How to do this? I tried supplying 4 values in data array as x,y but it didn't work

[nagix]

Try this:

<div>
  <canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.0"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@next"></script>
<script>
const myChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    datasets: [
      {
        data: [
          {x: Date.now() - 4000, y: Math.random()},
          {x: Date.now() - 3000, y: Math.random()},
          {x: Date.now() - 2000, y: Math.random()},
          {x: Date.now() - 1000, y: Math.random()}
        ]
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'realtime',
        realtime: {
          onRefresh: chart => {
            chart.data.datasets[0].data.push({
              x: Date.now(),
              y: Math.random()
            });
          }
        }
      }
    }
  }
});
</script>

[oasjohn]

This has been open for quite a while. Has anyone figured it out? I'm doing the exact same thing, trying to preload a minute of data. New data shows up on the right, but none of the preloaded data fills in.

I'm also loading data using only the onRefresh, pulling from a server. The initial hit gets the previous minute of data but subsequent hits pulls the new data. Debugging calls show that the data is added to the chart in the onRefresh, but it just never shows up. Only new/current data is plotted.