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
};

Answer 2

To display the provided data in a Vue table (assuming you meant a basic table and not any specific component like v-data-table from Vuetify), you can use the following code:

First, in your script section, define the data you provided:

<script>
export default {
  data() {
    return {
      timeEntries: [
        {
          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
        },
      ]
    };
  }
};
</script>

Then, in your template section, use a table to display the data:

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Start Time</th>
          <th>End Time</th>
          <th>Duration (minutes)</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="entry in timeEntries" :key="entry.start">
          <td>{{ entry.start }}</td>
          <td>{{ entry.end ? entry.end : 'N/A' }}</td>
          <td>{{ entry.duration }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

This will generate a table with columns for "Start Time", "End Time", and "Duration". Each row of the table will display the respective values from the timeEntries array. If the end value is null, it will display "N/A" in the "End Time" column.