huww98/TimeChart

How to update series dynamically?

BigeYoung opened this issue · 4 comments

BigeYoung commented

At first I tried to code this:

const el = document.getElementById('chart');
let x = 0, s = 0;
let series = [];
const chart = new TimeChart(el, {
    series: series,
});
let itv = setInterval(() => {
    if ((x++) % 50 == 0) {
        if ((s++) > 3) {
            window.clearInterval(itv)
            return;
        }
        series.push({
            name: "" + s,
            data: []
        });
    }
    for (let _s = 0; _s < s; _s++) {
        series[_s].data.push({
            x: x,
            y: Math.random()
        });
    }
    chart.update();
}, 20);

The chart was not updated.

Then I tried this:

const el = document.getElementById('chart');
let x = 0, s = 0;
let chart = new TimeChart(el, {
    series: [],
});
let series = chart.options.series;
let itv = setInterval(() => {
    if ((x++) % 50 == 0) {
        if ((s++) > 3) {
            window.clearInterval(itv)
            return;
        }
        series.push({
            name: "" + s,
            data: []
        });
    }
    for (let _s = 0; _s < s; _s++) {
        series[_s].data.push({
            x: x,
            y: Math.random()
        });
    }
    chart.update();
}, 20);

The chart refreshes and the data points display normally when hovering, but the lines are not visible.

What's wrong?

huww98 commented

This is a bug. It is triggered if you only add one data point when the data array is empty. No meaningful line can be drawn from only one data point, so that data point is simply dropped currently.

huww98 commented

Please try again with the current master branch. I will create a new release tomorrow.