Changing the value of a widget based on selection in a graph

Using Streamlit
1

Hello! I am currently working with Vega-Lite’s interactive charts. Basically, I am trying to get the input from my bar chart and change the selection in a SelectBox based off of that value. I understand that I have to use on_select=“rerun” or a callable, but I’m having trouble connecting all the dots. Specifically, I’m not sure exactly the best way to reference the value that was input by the user from selecting the graph bar. If anyone can point me in the right direction it would be greatly appreciated.
Here is the current code for my bar chart:

errorCountChart = st.vega_lite_chart(
            data_frame,
            {
                "mark": {"type": "bar", "color": "#38946b"},
                "params": [{"name": "interval_selection", "select": "interval"}],
                "encoding": {
                    "x": {"field": "Start Time", "type": "temporal"},
                    "y": {"field": "Error Count", "type": "quantitative"}
                },
            },
            on_select="rerun"
        )

And here is the current code for the SelectBox:

add_selectbox = st.sidebar.selectbox(
        'View a specific session:',
        data_frame['Start Time'],
        index=None,
        placeholder="No session selected",
        key='sidebar-dropdown',
    )
2

Hi @natehicks04
I tried to create a small example starting from your inputs.

import streamlit as st
import pandas as pd
from datetime import datetime
from time import time

data_frame = pd.DataFrame(
    {
        "Start Time": [
            "2023-10-01 10:00:00 UTC",
            "2023-10-01 11:00:00 UTC",
            "2023-10-01 12:00:00 UTC",
        ],
        "Error Count": [5, 10, 15],
    }
)
data_frame['Start Time'] = pd.to_datetime(data_frame['Start Time'])

errorCountChart = st.vega_lite_chart(
    data_frame,
    {
        "mark": {"type": "bar", "color": "#38946b"},
        "params": [
            {"name": "interval_selection", "select": "interval"},
            {"name": "bar_selection", "select": "point"},
        ],
        "encoding": {
            "x": {"field": "Start Time", "type": "temporal"},
            "y": {"field": "Error Count", "type": "quantitative"}
        },
    },
    on_select="rerun",
)

if errorCountChart["selection"] and errorCountChart["selection"]["bar_selection"]:
    d = datetime.fromtimestamp(errorCountChart["selection"]["bar_selection"][0]["Start Time"]/1000.0)
    st.session_state['sidebar-dropdown'] = d.strftime("%Y-%m-%d %H:%M:%S")
else:
    st.session_state['sidebar-dropdown'] = None

add_selectbox = st.sidebar.selectbox(
    'View a specific session:',
    data_frame['Start Time'],
    index=None,
    placeholder="No session selected",
    key='sidebar-dropdown',
)

st.write("Chart selection:", errorCountChart)
st.write("Sidebar selection:", add_selectbox)
3

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.