Update data in chart without complete redraw

[dalbani]

Hello, I've just discovered Chart.js and this plugin, so the answer to my question is probably obvious. But I was wondering, is there a way to use the "auto refresh" functionality of this plugin, without having the whole chart be redrawn completely. Which is not very nice visually — and probably not very efficient as well. That's what I am talking about, when the data gets refreshed: I would have expected the timespan to grow, and the existing data be shifted to the left. Do you see what I mean? Thanks.

[x-077]

Hello @dalbani ,

it seems that it's possible to disable the animation with the following

It should be easy to implement

@samber , do you plan to add a functionality that "cumulate" data instead of "refreshing" the graph ? Let say I monitor memory/cpu, when initializing, the graph show the consuption for the last 10 minutes. Then, when refreshing, it will add the data to the graph, instead of refreshing the graph with the new data ? (I hope its clear ).

Thanks

[samber]

Hi @matth-c3

The plugin supports relative time range (example: from -600 to 0), then you should be able to do that by yourself, with a simple refresh.

[samber]

I just added an example to documentation:

I tried to use chart.update({duration: 0}); but it didn't work. Use options.animation.duration = 0 instead.

var myChart = new Chart(ctx, {
    type: 'line',
    plugins: [ChartDatasourcePrometheusPlugin],
    options: {
        animation: {
            duration: 0,
        },
        plugins: {
            'datasource-prometheus': {
                prometheus: {
                    endpoint: "http://demo.robustperception.io:9090",
                },
                query: 'node_load1',
                timeRange: {
                    type: 'relative',

                    // from 10 minutes ago to now
                    start: -1 * 10 * 60 * 1000,
                    end: 0,
                    msUpdateInterval: 5000,
                },
            },
        },
    },
});