Echarts: separate series based on dataset field - echarts

Question

I'm trying to create a timeseries chart with several series, using a dataset that comes from an api in the following format:
dataset: {
dimensions: ['tstamp', 'prod'],
source: [
{ src:1, tstamp: '2021-09-16T16:40:30Z', prod: 1 },
{ src:1, tstamp: '2021-09-16T16:41:25Z', prod: 2 },
{ src:1, tstamp: '2021-09-16T16:42:26Z', prod: 3 },
{ src:1, tstamp: '2021-09-16T16:43:32Z', prod: 4 },
{ src:1, tstamp: '2021-09-16T16:44:24Z', prod: 5 },
{ src:1, tstamp: '2021-09-16T16:45:26Z', prod: 6 },
{ src:1, tstamp: '2021-09-16T16:46:30Z', prod: 7 },
{ src:1, tstamp: '2021-09-16T16:47:32Z', prod: 8 },
{ src:1, tstamp: '2021-09-16T16:48:31Z', prod: 9 },
{ src:1, tstamp: '2021-09-16T16:49:28Z', prod: 10 },
{ src:2, tstamp: '2021-09-16T16:40:12Z', prod: 1 },
{ src:2, tstamp: '2021-09-16T16:41:18Z', prod: 2 },
{ src:2, tstamp: '2021-09-16T16:42:09Z', prod: 3 },
{ src:2, tstamp: '2021-09-16T16:43:11Z', prod: 4 },
{ src:2, tstamp: '2021-09-16T16:44:17Z', prod: 5 },
{ src:2, tstamp: '2021-09-16T16:45:02Z', prod: 6 },
{ src:2, tstamp: '2021-09-16T16:46:06Z', prod: 7 },
{ src:2, tstamp: '2021-09-16T16:47:11Z', prod: 8 },
{ src:2, tstamp: '2021-09-16T16:48:14Z', prod: 9 },
{ src:2, tstamp: '2021-09-16T16:49:10Z', prod: 10 },
]
}
x comes from "tstamp", and y comes from "prod", but I don't know how use the "src" field to separate two series. Note that I can't organize the data as having { tstamp, prod1, prod2 } since the timestamps are not synchronized.
Is it possible to do this?
Thanks!

Answer 1

Generally, you need to construct 2 lists for each src
Copy-paste the following code in the Echarts-code-editor website to validate the result.
let dataset = {
dimensions: ['tstamp', 'prod'],
source: [
{ src: 1, tstamp: '2021-09-16T16:40:30Z', prod: 1 },
{ src: 1, tstamp: '2021-09-16T16:41:25Z', prod: 2 },
{ src: 1, tstamp: '2021-09-16T16:42:26Z', prod: 3 },
{ src: 1, tstamp: '2021-09-16T16:43:32Z', prod: 4 },
{ src: 1, tstamp: '2021-09-16T16:44:24Z', prod: 5 },
{ src: 1, tstamp: '2021-09-16T16:45:26Z', prod: 6 },
{ src: 1, tstamp: '2021-09-16T16:46:30Z', prod: 7 },
{ src: 1, tstamp: '2021-09-16T16:47:32Z', prod: 8 },
{ src: 1, tstamp: '2021-09-16T16:48:31Z', prod: 9 },
{ src: 1, tstamp: '2021-09-16T16:49:28Z', prod: 10 },
{ src: 2, tstamp: '2021-09-16T16:40:12Z', prod: 1 },
{ src: 2, tstamp: '2021-09-16T16:41:18Z', prod: 5 },
{ src: 2, tstamp: '2021-09-16T16:42:09Z', prod: 4 },
{ src: 2, tstamp: '2021-09-16T16:43:11Z', prod: 4 },
{ src: 2, tstamp: '2021-09-16T16:44:17Z', prod: 7 },
{ src: 2, tstamp: '2021-09-16T16:45:02Z', prod: 9 },
{ src: 2, tstamp: '2021-09-16T16:46:06Z', prod: 0 },
{ src: 2, tstamp: '2021-09-16T16:47:11Z', prod: 3 },
{ src: 2, tstamp: '2021-09-16T16:48:14Z', prod: 2 },
{ src: 2, tstamp: '2021-09-16T16:49:10Z', prod: 1 }
]
};
// getting unique srcs for manipulting
const uniqueSrc = Array.from(new Set(dataset.source.map((item) => item.src)));
// getting chart labels
const chartLabels = dataset.source.map((row) => row.tstamp);
// getting lists of data filtered by src
const chartData = uniqueSrc.map((uniqueSrc) => {
return {
label: uniqueSrc,
data: dataset.source.map((obj) => {
if (obj.src == uniqueSrc) {
return obj.prod;
} else {
return 0;
}
}),
};
});
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: uniqueSrc.map((item) => item.toString()) // modifier legends
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: chartLabels // modified chart labels
},
yAxis: {
type: 'value'
},
// modified series
series: chartData.map((obj, index) => {
return {
name: obj.label,
type: 'line',
data: obj.data
};
})
};