Custom time in chart.js streaming plugin

Question

I'm struggling with changing default realtime from streaming plugin for chart.js. Only what I need is "moving chart" which refresh data every 1 second and display my data on X and Y axis.

My chart

Ultimately I want to display the simulation time from the simulink model in seconds. I have the actual time in my vuex so just need to somehow convert the realtime to time from the simulation.

    simuTime() {
        return this.$store.getters.simulationTime
    }
  },
  mounted() {
    const ctx = this.$refs.mychart
    const data = {
        labels: [],
        datasets: [
            {
                label: "Mains_1_Voltage",
                data: [],
                backgroundColor: "rgba(54, 162, 235, 0.2)",
                borderColor: "rgba(75, 192, 192, 1)",
                borderWidth: 1,
            },
            {
                label: "Mains_1_Frequency",
                data: [],
                backgroundColor: "rgba(248, 109, 181, 1)",
                borderColor: "rgba(163, 109, 181, 1)",
                borderWidth: 1,
            },
        ],
    }
    var config = {
        type: "line",
        data: data,
        options: {
            scales: {
                x: {
                    type: 'realtime',
                    realtime: {
                        delay: 1000,
                        onRefresh: chart => {
                            chart.data.datasets[0].data.push({
                                //this doesn't work after changing from Date.now()
                                x: this.simuTime,
                                y: this.V1[0].value
                            })
                            chart.data.datasets[1].data.push({
                                //this doesn't work after changing from Date.now()
                                x: this.simuTime,
                                y: this.F1[0].value
                            })
                        }
                    }
                },
                y: {
                    beginAtZero: true,
                },
            },
        },
    }
    const myChart = new Chart(ctx, config);
    myChart
    this.simu_time_interval = setInterval(() => {
        this.$store.dispatch('calculateSimulationTime')
    }, 500);
  },
  beforeUnmount() {
    clearInterval(this.simu_time_interval)
  }
};

user_2057925 · Answer

If I have understood your use case, you would like to have the elapsed time from the start of simulation.

I think the Date.now() must be used anyway because the realtime scale is anyway a time scale and needs to have a time as x value. But you can implement the ticks.callback in order to show on the chart the elapsed time, instead of the date.

In the below sample, I assumed that the start of simulation is the current time (Date.now()).

EDIT: after the thread with @dymek662, the solution is changed a bit. Main changes in order to address the use case:

use ticks.source: 'data'
the data have got all the same datetime
add "simutime" as additional property of the data of the 1 dataset

const ctx = document.getElementById("myChart");

//lets simulate 'simutime'
let simutime = Math.floor(Math.random(100)*100);
setInterval(() => {
  //i added some random values just to have raising values like in my original simutime from matlab model
  simutime += 3;
}, 500);

const data = {
  datasets: [
    {
      label: "Mains_1_Voltage",
      data: [],
      backgroundColor: "rgba(54, 162, 235, 0.2)",
      borderColor: "rgba(75, 192, 192, 1)",
      borderWidth: 1,
    },
    {
      label: "Mains_1_Frequency",
      data: [],
      backgroundColor: "rgba(248, 109, 181, 1)",
      borderColor: "rgba(163, 109, 181, 1)",
      borderWidth: 1,
    }
  ]
};
const config = {
  type: "line",
  data: data,
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          title(items) {
            if (items.length) {
              const item = items[0];
              const {chart, datasetIndex, dataIndex} = item;
              const simutimeData = chart.data.datasets[0].data[dataIndex];
              return 'Simutime: ' + simutimeData.simutime;
            }
          }
        }
      }
    },
    scales: {
      x: {
        type: 'realtime',
        realtime: {
          delay: 1000,
          onRefresh: chart => {
            // get unique time stamp for all data
            const now = Date.now(); 
            // check if the simutime is already stored
            // if yes, set undefined
            const data = chart.data.datasets[0].data.filter(element => element.simutime);
            let simu = simutime;
            if (data.length) {
              const lastData = data[data.length - 1];
              if (lastData.simutime === simu) {
                simu = undefined;
              }
            }
            chart.data.datasets[0].data.push({
              x: now,
              y: Math.random() * 100,
              simutime: simu
            });
            chart.data.datasets[1].data.push({
              x: now,
              y: Math.random() * 100
            });
          }
        },
        ticks: {
          // this forces to use the data for ticks 
          source: 'data',
          callback(value, index, ticks) {
            const tickValue = ticks[index].value;
            if (tickValue) {
              const dataset1Data = this.chart.data.datasets[0].data;
              const data = dataset1Data.filter(element => element.x === tickValue);
              if (data.length) {
                return data[0].simutime;
              }
            }
          }
        }
      },
      y: {
        beginAtZero: true,
        min: 0,
        max: 100
      },
    },
  },
};
const myChart = new Chart(ctx, config);

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

Custom time in chart.js streaming plugin

1 Answers