Selecting data from a chart and printing it using st.write() with streamlit-vega-lite

Using Streamlit
1

Summary

I want to be able to select data in a bar chart using this: https://github.com/domoritz/streamlit-vega-lite and return it as a table.

Steps to reproduce

Code snippet:

brush = alt.selection(type='interval', encodings=['x'])

interactive_test = alt.Chart(df_display_all).mark_bar(opacity=1, width=5).encode(
    x= alt.X('reached points', scale=alt.Scale(domain=[0, maxPoints])),
    y=alt.Y('count()', type='quantitative', axis=alt.Axis(tickMinStep=1), title='students count'),
    
).properties(width=1200)

upper = interactive_test.encode(
    alt.X('reached points', sort=alt.EncodingSortField(op='count', order='ascending'), scale=alt.Scale(domain=brush, domainMin=-0.5)),
    alt.Tooltip(['reached points'])
)

lower = interactive_test.properties(
    height=60
).add_selection(brush)

concat_distribution_interactive = alt.vconcat(upper, lower)

event_dict = altair_component(altair_chart=concat_distribution_interactive)

r = event_dict.get("x")
if r:
    filtered = df_display_all[(df_display_all['reached points'] >= r[0]) & (df_display_all['reached points'] < r[1])]
    st.write(filtered)

st.altair_chart(concat_distribution_interactive, use_container_width=True)

Selecting a range in my displayed chart doesn’t seem to do anything.
I also tried copying the example code from above and it only reloaded the chart and filled it with new sample data.

Expected behavior:

The expected behavior would be that st.write(filtered) gives me the selected range from my DataFrame df_display_all or at least some kind of KeyError so I know that the selection has been recognized in any kind.

Actual behavior:

Selecting a range doesnt give any value to event_dict or r.
For example, st.write(str(event_dict)) only returns as {}, while st.write(str(r)) only returns as None.
This also happens using the given sample code from the link above.

Debug info

  • Streamlit version: 1.14.0
  • Python version: 3.7.7
  • Browser version: Mozilla Firefox 1.14.0
2

Hi @Jan_D ,

That component is only a PoC (proof of concept) and I don’t think it is working at this current moment. Also, that component is actually not related to streamlit’s official components so support for this is not available unless you wish to go into their GitHub page and post an issue (but it’s just a PoC so I doubt you will get a response sadly).

good news is that we will be looking into chart selections in the upcoming likely 6 months and hopefully have a good way for built in selection in charts.

William

2 Likes
3

Hi @willhuang , has there been any progress with chart selections yet?

4

Hi @willhuang … following-up a few months later … Do you know if this feature is on the roadmap yet? I use Streamlit when teaching my course at CMU and it is the most requested feature every year by our students.

Thanks!

5

Hi @adamp , thanks for following up. Right now, this is our current roadmap:

However, there are projects that get deprioritized and prioritized and I will talk to the PMs about trying to get this done earlier within the roadmap as we do know it’s extremely important for the community and data science.

6

Chart selections are officially supported as of Streamlit 1.35.0.