How to avoid wiggling animation for real-time time series charts?

[klausb]

Version

4.4.0

Steps to reproduce

In our use of echarts I'm facing the behavior shown on this page: https://bost.ocks.org/mike/path/.
In older posts the solution was to use addData, but this does no longer exist. We use setOption.

We use the series.data array, with tuples of x/y values.

Is there a suggested way of changing the series data to avoid the wiggling effect?

What is expected?

More a shifting of the time series to the left

What is actually happening?

Animation like in https://bost.ocks.org/mike/path/.

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

[Serious-ChrisLopez]

For me to fix that issue I had to make sure that the data I pushed had an object like this: { name: curTime, value: [someValue] }.

For example:

 
  let dataTimestamp = 1582058229; // unix/epoch time
  let dataValue = Math.random() * 1000; // number between 0 and 1000

  chartData.push({
    name: new Date().toString(),
    value: [dataTimestamp, dataValue]
  });

  Chart.setOption({
    series: chartData
  });

However, I am not sure why it works this way. Hopefully, someone in this community can answer why just giving the series an array makes the line wiggle and why giving it this object schema seem to fix that issue.

[klausb]

Maybe it is working because you are reusing the object on each update. I wonder if that method still works, if you fill up the series with new objects, but the values are the same

[klausb]

@Serious-ChrisLopez can you provide a full example?
I tried modifying this https://echarts.apache.org/examples/en/editor.html?c=doc-example/tutorial-dynamic-data, but failed. Even this example shows the wiggling effect, after a few seconds

[echarts-bot]

@klausb Please provide a demo for the issue either with https://jsfiddle.net/ovilia/n6xc4df3/ or https://gallery.echartsjs.com/editor.html.

[klausb]

@Ovilia Please check this example: https://echarts.apache.org/examples/en/editor.html?c=doc-example/tutorial-dynamic-data
Wait about 10 seconds and you see that the chart is no longer just shifting left but also show the strage animation effect of the curve