Search code examples
pythonuser-interfacechartswidget

Advice on widget/GUI for displaying charts (not Jupyter)


I apologise if this question is too opinion based. If that's the case I'll delete it.

I'm looking for advice on creating a rather simple widget/GUI for displaying charts with time series data. My idea is to have the user input a date which is used to query the database. The query will return about 20k rows that I'm hoping can be stored in a dataframe in memory to avoid querying the database again.

For the layout I would like to have a grid of 2x3 charts where the user can select three items per chart to uniquely identify the product and select if it should be a line or scatter plot. There are no requirements for the style of layout around the charts, this is mainly about showing the charts, not a beauty contest. For each product there are eight different time series that I would like in a dropdown, the user can choose 1-3. If its a line chart, time will be on the first axis and if its a scatter the user chooses a pair of time series. The input data should be dropdown with the possible values based on the dataframe. For now, its not needed that the user can change the layout of the charts.

I have looked into ipywidget but its impossible for me to have the users use Jupyter. ipywidget should be available in pycharm pro, but not all users will have the pro version and even having some of them open pycharm is a real stretch. I think the ipywidget would be a good solution, if I was able to roll it out to everyone. I have also looked in to PyQtGraph but I don't want to massage the data into numpy arrays. Then there's Tkinter and embedding matplotlib charts but I don't want to spend a week on configuring the placement of buttons.

So I'm a little lost on what could be a viable solution. The GUI itself should be simple and just be able to show these six charts, based on user input. Ideally it would work with matplotlib, seaborn and plotly, in case I want to change something in the future.

Please let me know if you have a solution for how this can be done. Is it something like Flask or dash that can do this?


Solution

  • I tried Corralien's solution with streamlit. I've used used plotly to create the charts. As a starting point, this is what I'll be using. plotly creates a chart grid that streamlit can show directly. I guess the code itself is self explanatory.

    import plotly.graph_objects as go
    from plotly.subplots import make_subplots
    import streamlit as st
    
    fig = make_subplots(rows=2, cols=3)
    
    fig.add_trace(go.Scatter(x=[1, 2, 3], y=[4, 5, 6], mode='lines'), row=1, col=1)
    fig.add_trace(go.Scatter(x=[1, 2, 3], y=[4, 5, 6], mode='lines'), row=1, col=2)
    fig.add_trace(go.Scatter(x=[1, 2, 3], y=[4, 5, 6], mode='lines'), row=1, col=3)
    fig.add_trace(go.Scatter(x=[1, 2, 3], y=[4, 5, 6], mode='markers'), row=2, col=1)
    fig.add_trace(go.Scatter(x=[1, 2, 3], y=[4, 5, 6], mode='markers'), row=2, col=2)
    fig.add_trace(go.Scatter(x=[1, 2, 3], y=[4, 5, 6], mode='markers'), row=2, col=3)
    
    st.plotly_chart(fig)
    

    This outputs the chart grid as is and does what I asked for. To begin with, I'll hard code how the charts look and only have the user select which product to look at. Later I'll add more user input to change the charts and combine different products.