Best practice to illustrate event data

[s-wel]

Hello, I am looking for a way to visualize event data (data at discrete datetimes).
Is there something like a timeline graph (I could not find one in the standard visuals). My current approach using a scatter plot ends up in equally distributed events on the x-axis despite events having very different durations between each other.

[FlorianJacta]

Hi @s-wel, do you have some code to reproduce it? Check if your column is of datetime type and not string.

[s-wel]

Hi, indeed it was a string. I tried to fix by transforming my Date column values into datetime objects and then setting the index to my "Date" column. The final DataFrame contains "Date", "Events", "id" (where "Events" is an empty string to keep the plot on the same y-axis value. The problem then is that the scatter plot does not respect the new index and uses numbers instead (1,2,3,4...). Same behavior if I only use "Date" and "Events" columns.

[s-wel]

I found out what the issue is. The plotly library only accepts strings formatted like "%Y-%m-%d %H:%M:%S.%f". If the resulting column is a string with this format, the x-axis properly positions the events. I suggest you add this to the documentation here: https://docs.taipy.io/en/latest/refmans/gui/viselements/generic/charts/basics/#using-a-time-series

[FlorianJacta]

If the x-axis is of a datetime type, there should be any issues too.Is this what you are trying to visualize:

import pandas as pd
import datetime as dt
import numpy as np
import taipy.gui.builder as tgb
from taipy.gui import Gui

data = pd.DataFrame(
    {
        "Date": [
            dt.datetime.now()
            + dt.timedelta(hours=np.random.randint(3 * i, 3 * (i + 1)))
            for i in range(24)
        ],
        "Value": pd.Series(np.random.randn(24)),
        "Event": ["Event 1" if i % 2 == 0 else "Event 2" for i in range(24)],
    }
).sort_values(by="Date")

with tgb.Page() as page:
    tgb.chart(
        "{data}",
        x="Date",
        y="Value",
        type="bar",
        title="Timeline",
        text="Event",
    )

Gui(page).run()

or something like this;

import datetime

from taipy.gui import Gui
import taipy.gui.builder as tgb

# Tasks definitions
tasks = ["Plan", "Research", "Design", "Implement", "Test", "Deliver"]
# Task durations, in days
durations = [50, 30, 30, 40, 15, 10]
# Planned start dates of tasks
start_dates = [
    datetime.date(2022, 10, 15),  # Plan
    datetime.date(2022, 11, 7),  # Research
    datetime.date(2022, 12, 1),  # Design
    datetime.date(2022, 12, 20),  # Implement
    datetime.date(2023, 1, 15),  # Test
    datetime.date(2023, 2, 1),  # Deliver
]

epoch = datetime.date(1970, 1, 1)

data = {
    "start": start_dates,
    "Task": tasks,
    # Compute the time span as adatetime (relative to January 1st, 1970)
    "Date": [epoch + datetime.timedelta(days=duration) for duration in durations],
}

layout = {
    "yaxis": {
        # Sort tasks from top to bottom
        "autorange": "reversed",
        # Remove title
        "title": {"text": ""},
    },
}

with tgb.Page() as page:
    tgb.chart(
        "{data}",
        type="bar",
        orientation="h",
        y="Task",
        x="Date",
        base="start",
        layout=layout,
    )

if __name__ == "__main__":
    Gui(page).run(title="Chart - Gantt - Simple")

[s-wel]

The example is more like the first graph, but a one-dimensional scatter plot. Each element in the plot has a "Date", "id", and "Event" value. Date is the x-axis value and Event is the y-axis value (id is the selector when clicking on an element in the plot). Each element uses an empty string for "Event" to ensure that all elements are on the same horizontal level (same value for y-axis).

This mimics a one-dimensional timeline visualization where each plot element represents one time-specific event. It is not that great in case events have the same Date value, but it works as a first solution for my case.