New Component: Streamlit Timeline, creating beautiful timelines with bi-directional communication

image
Open in Streamlit

Streamlit component for rendering vis.js timeline.

Check out the GitHub repositories streamlit-timeline and
streamlit-timeline-demo. For JavaScript examples,
check out the vis.js timeline examples and
documentation.

Installation

pip install streamlit-vis-timeline

Usage

import streamlit as st
from streamlit_timeline import st_timeline

st.set_page_config(layout="wide")

items = [
    {"id": 1, "content": "2022-10-20", "start": "2022-10-20"},
    {"id": 2, "content": "2022-10-09", "start": "2022-10-09"},
    {"id": 3, "content": "2022-10-18", "start": "2022-10-18"},
    {"id": 4, "content": "2022-10-16", "start": "2022-10-16"},
    {"id": 5, "content": "2022-10-25", "start": "2022-10-25"},
    {"id": 6, "content": "2022-10-27", "start": "2022-10-27"},
]

timeline = st_timeline(items, groups=[], options={}, height="300px")
st.subheader("Selected item")
st.write(timeline)

Demo

10 Likes

What a fabulous Component, Qiusheng! :raised_hands:

I’ve added it to @andfanilo’s Component tracker! :tada:

Huge thanks for this wonderful component, Qiusheng!

Would you have an idea how I could accomplish multiselection in my code? I checked the documentation and passed " ‘mulitselect’: True" into the options but it does not work.

import streamlit as st
from streamlit_timeline import st_timeline

st.set_page_config(layout="wide")

st.title("Test Plan")

items = [
    {"id": 1, "content": "Early shift", "start": "2022-10-17T08:00:00", "end": "2022-10-17T16:00:00", "group": "1"},

    {"id": 2, "content": "Early shift", "start": "2022-10-17T11:00:00", "end": "2022-10-17T15:00:00", "group": "2"},

    {"id": 3, "content": "Early shift", "start": "2022-10-17T10:00:00", "end": "2022-10-17T18:00:00", "group": "3"}
]

groups = [
    {"id": 1, "content": "Worker 1", "style": "color: black; background-color: #a9a9a98F;"},
    {"id": 2, "content": "Worker 2", "style": "color: black; background-color: #a9a9a98F;"},
    {"id": 3, "content": "Worker 3", "style": "color: black; background-color: #a9a9a98F;"}
]

timeline = st_timeline(items, groups=groups, options={"selectable": True, 
                                                      "multiselect": True, 
                                                      "zoomable": True, 
                                                      "verticalScroll": True, 
                                                      "stack": False,
                                                      "height": 200, 
                                                      "margin": {"axis": 5}, 
                                                      "groupHeightMode": "auto", 
                                                      "orientation": {"axis": "top", "item": "top"}})

st.subheader("Selected item")
st.write(timeline)

Any help is much appreciated - Thanks in advance!
Robert

1 Like