Display events in a single row with Vue-echarts

Question

Can someone point me in the direction of creating a chart with vue-echarts?

I have a set of data representing events over 24 hours. This data will be fetched from an API, and it is an array of objects as such:

[
  {
    start: "2023-11-01T01:47:09.930Z"
    end: "2023-11-01T02:47:09.930Z"
    duration: 60 // in minutes
  },
  {
    start: "2023-11-01T02:47:09.930Z"
    end: "2023-11-01T02:57:09.930Z"
    duration: 10
  },
  {
    start: "2023-11-01T02:57:09.930Z"
    end: "2023-11-01T03:27:09.930Z"
    duration: 30
  },
  {
    start: "2023-11-01T03:27:09.930Z"
    end: null
    duration: 30
  },

There are no gaps in the dates, and the latest event might have the end as null.

I want to create a chart with a single row, in which the events are stacked one after another from the oldest to the newest, with the x-axis labels showing the day + time.

Similar to this image

I created a single bar chart following this example echarts stacked horizontal bars, but I can't get the labels to work.

I can try using a different package if it is easier to achieve my goal.

Notes:

• I need a chart that the user can interact with
• The vue-echarts package is already used in the application
• I will add more features to the graph, but I know how
• The event duration can be 1 second or many hours
• The graph can have hundreds of events
• The page is visualized on phones and tablet screens, as well

Answer 1

I am not exactly sure what your issues with echarts are but here is a small idea that may help:

Instead of using a stacked bar chart you could try and use a line chart with enlarged width. Here is a simple example how this could look like:

const data = [
  {
    start: "2023-11-01T01:47:09.930Z",
    end: "2023-11-01T02:47:09.930Z",
    duration: 60, // in minutes
  },
  {
    start: "2023-11-01T02:47:09.930Z",
    end: "2023-11-01T02:57:09.930Z",
    duration: 10,
  },
  {
    start: "2023-11-01T02:57:09.930Z",
    end: "2023-11-01T03:27:09.930Z",
    duration: 30,
  },
  {
    start: "2023-11-01T03:27:09.930Z",
    end: null,
    duration: 30,
  },
]

seriesList = data.map(function(event) {
  let start = event.start;
  let end = event.end;
  if (event.end === null) {
    end = start;  // set end to current time here?
  }
  return {
    type: 'line',
    data: [[start, 1], [end, 1]],
    symbol: 'none',
    lineStyle: {
      width: 60
    }
  };
})

option = {
  xAxis: {
    type: 'time',
  },
  yAxis: {
    type: 'category',
    show: false,
  },
  series: seriesList
};