Updating text

[RonKrem]

I am using a text plugin to write some text in the top-left corner of a plot:
<
// Custom plugin to add dynamic text
const textParameter1 = {
id: 'textParameter1',
beforeDatasetsDraw(chart, args, plugins) {
const {ctx, chartArea: {top, bottom, left, right, width, height}} = chart;
ctx.save();
ctx.font = 'bold 15px sans-serif';
ctx.fillStyle = 'black';
ctx.fillText('T5000 S0.00043', left+2, top);
}
};

This works well. However, I need to dynamically update the numbers shown in the fillText command, something like:
<
ctx.fillText('T~' + tValue + 'S~' + sValue, left+2, top);

Where in the script do I put those two strings, and what Chartjs function would I use in the javascript to update them?

Many thanks.

[Udemology]

Do you mean something like this? Where the text changes based on an event: https://youtu.be/TnGF5XFdMuI

[RonKrem]

Many thanks for that. I have used almost exactly the same code sequence:

 // Custom plugin to add dynamic text
  const textParameter3 = {
     id: 'textParameter3',
     beforeDatasetsDraw(chart, args, plugins) {
        const {ctx, chartArea: {top, bottom, left, right, width, height}} = chart;
        ctx.save();
        ctx.font = '15px sans-serif';
        ctx.fillStyle = 'black';
        ctx.fillText('T5000 m2/d, K0.004 m/d S0.00043 m', left+2, top);
     }
  };

However, I need to write the text shown there from the server as json text, based on events occurring in the server code. Something like:

     ctx.fillText(myObj.mytext, left+2, top);

where the mObj variable comes from something like:

  source.addEventListener("set_chart_0_text", function (e)
  {
     console.log("set chart0 text");
     var myObj = JSON.parse(e.data);

What I do not understand is how to pass the myObj object from the EventListener into the chart code? Any help would be appreciated.

Ron

[Udemology]

Am I correct you also have the afterEvent section: See timestamp 4:11 of video https://youtu.be/TnGF5XFdMuI?t=293
As that makes the canvas being redrawn.

[RonKrem]

Many thanks. The global was the clue. The chart code now looks like:

  let sensor1text;

  // Custom plugin to add dynamic text
  const textParameter1 = {
     id: 'textParameter1',
     beforeDatasetsDraw(chart, args, plugins) {
        const {ctx, chartArea: {top, bottom, left, right, width, height}} = chart;
        // Initial text value
        if (sensor1text === undefined) {
           sensor1text = '-';
        }
        ctx.save();
        ctx.font = '15px sans-serif';
        ctx.fillStyle = 'black';
        ctx.fillText(sensor1text, left+2, top);
     },
  };

The update script is just:

        var obj = JSON.parse(e.data);
        console.log(obj);
        sensor1text = obj.t1estim;  // new text for sensor1text

There are 4 plots on this page and now each has some summary details in the top-left corner just below the plot title.
Regards, Ron