VueUiXyCanvas not reacting to dataset updates

[paulh002]

I try to use the VueUiXyCanvas graph to display a spectrum that will update every 100 ms but the spectrum is only showing the first dataset. It are 800 data points that update every time, and the graph is very nice.
To update the data set I use now a longpoll as test

const uuid = generateUUID(); 

const dataset = ref([
   {
        name: "",
        series: [1],
        type: "line",
        color: "rgb(95,139,238)",
        scaleSteps: 5,
        dataLabels: false
    }]);

async function longpolling ()
{
  try {
    const message = {"identifier": uuid, "type": "spectrum"};
    const response = await axios.post('/api/spectrum', message);
    //console.log('Fetched data:', response.data); // Log the fetched data to the console
    dataset.value[0].series = response.data;
    //console.log("data",dataset.value[0].series); 
  }
    catch (error) {
    console.error('error fetching wsjtx data', error);
  }
  finally {
    setTimeout(longpolling, 1);
  }
}

onMounted(async () => {
  longpolling();
});

If I replace the component with the normal XY component the update works. But the response of this component is to slow. So I was hoping the Canvas version will be faster.

[graphieros]

Hi Paul :)

Thanks for pointing this out, a watcher on the dataset was missing.
You can upgrade to v2.4.22 which solves this issue.

Using VueUiXyCanvas is a good choice indeed for this kind of big dataset with frequent update, as the browser doesn't have to manage thousands of DOM nodes.

Cheers

[paulh002]

Yes, now it works fine. Thanks!

[paulh002]

Hi, I have some questions
Is there a way to get an indicator? Also to have data labels on top of the graph. Also the time data labels need to match the amount of datapoints even when you use a modula. Or should I use slots to draw custom data labels? I want to replicate the graph which I can get on my embedded device,

[graphieros]

To display time labels on top, you need to tweak style.chart.grid.y.timeLabels.offsetY with a negative value. You might need to tweak style.chart.paddingProportions too, to give some space for top labels.

For the indicator, you can tweak style.chart.selector.

I'm not sure I understand your question regarding the time labels.
What did you put inside style.chart.grid.y.timeLabels.values ?

[paulh002]

Ok, I will try. The problem with time labels is that it looks like I have to add 800 time labels and use modula to select the subset I want to see. I was wondering If I could only add the time labels I want to display. So only 9 time lables.

[graphieros]

Having 800 time labels set allows to show the label in the tooltip, or when using the selector, on any datapoint.

Enregistrement.de.l.ecran.2024-12-06.a.11.25.24.mov

[paulh002]

Ok, I will try that. Thanks for you help.

[graphieros]

You are welcome, thanks for trying out the lib :)

[paulh002]

I forgot one question. Is it possible to fix the scale of the chart? It looks like the scale is depending on the largest y value. But in realtime you want to have a fixed y scale.

[graphieros]

Yes, I will add config attributes to set scaleMin and scaleMax values.
Will try to do that after work today.

[paulh002]

Thanks! that would be great.

[graphieros]

@paulh002

You can upgrade to v2.4.24 which implements custom scales on VueUiXyCanvas.

For your use case, I think you'll only have to set your scales in the config:

style.chart.scale.min: number | null;
style.chart.scale.max: number | null;

[paulh002]

Thanks! will test it

[paulh002]

Perfect

[paulh002]

One other observation, it looks like the vertical lines are not being displayed. Horizontal lines do work.

[graphieros]

Yes, they are disabled above a certain amount of datapoints.
You need the same modulo as time labels right ?

[paulh002]

yes :)

[graphieros]

Ok, lemme check it out

[graphieros]

@paulh002
You can upgrade to v2.4.25

If you already set style.chart.grid.y.verticalLines.show:true you should be good to go.

[paulh002]

Yes, thanks