How do I display 2 time series with different x values in ECharts?

Question

I am looking at the examples provided with Echarts and I can't find a way to have 2 time series with different time values on the same chart. The time series both represent measures taken during the same interval but they don't align.

Example:

TS1 = [
   {time: 0:00, value: 1}, 
   {time: 0:10: value: 2, 
   {time: 0:22, value: 3},
... ]

TS2 = [
   {time: 0:05, value: 0.2}, 
   {time: 0:11: value: 0.45, 
   {time: 0:15, value: 0.3}, 
   {time: 0:21, value: 0.17},
... ]

Some suggested to merge the 2 streams and replace missing values with null which I'd rather not do if I don't have to...

TS1 = [
   {time: 0:00, value: 1}, 
   {time: 0:05, value: null}, 
   {time: 0:10: value: 2}, 
   {time: 0:11: value: null},
   {time: 0:15, value: null}, 
   {time: 0:21, value: null},
   {time: 0:22, value: 3},
... ]

TS2 = [
   {time: 0:00, value: null}, 
   {time: 0:05, value: 0.2},
   {time: 0:10: value: null}, 
   {time: 0:11: value: 0.45, 
   {time: 0:15, value: 0.3}, 
   {time: 0:21, value: 0.17},
   {time: 0:22, value: null},

Help would be much appreciated thanks!

You should be able to do it easily. But the tooltip will have a weird behavior (maybe that's your issue). Take a look at this post, it might help you ! https://stackoverflow.com/questions/55238820/how-can-i-show-all-series-in-tooltip-when-series-does-not-have-same-time-values — A mere dev, May 23 '22 at 11:54
Thanks. It did help. In the end, I decided to use interpolation on my time series to obtain the missing values. — sandman, May 24 '22 at 00:02

score 1 · Answer 1 · answered Dec 18 '22 at 10:25

I had the same problem and my solution was to send no xAxis to Echarts, instead I sent just the 2 series and included the [x, y] pair inside series.data.

Example:

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      symbolSize: 5,
      data: [
        [0, 2],
        [1, 3],
        [2, 4]
      ],
      type: 'line'
    },
     {
      symbolSize: 5,
      data: [
        [0.1, 3],
        [1.1, 3],
        [1.9, 2]
      ],
      type: 'line'
    }
  ]
};

How do I display 2 time series with different x values in ECharts?

1 Answers1