Echarts: separate series based on dataset field

user_2558240 0
Viewed 282

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!

echarts
1 Answers

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
    };
  })
};
user_62426980
Related