Creating website to collect input from user and plot onto chart

[limjiahau]

Summary

Hi everyone,

I am trying to create a survey website (ignore the variable names) that will allow users to input their scores and plot the scores accordingly.

I am trying to:

1. Display only the latest input from the user when they click submit (but still save all of the inputs into a CSV file
2. Change the plot from a stacked bar chart to an unstacked bar chart or radar chart?

My code:

Code snippet:

import os
import datetime
import pandas as pd
import numpy as np
import streamlit as st


csv_file = 'results_option1.csv'
if os.path.exists(csv_file):
    # read from file
    results_option1 = pd.read_csv(csv_file, index_col=False)
else:
    # create empty dataframe with the right columns & dtypes
    results_option1 = pd.DataFrame(
        {'time': np.array([]).astype('datetime64[ns]'),
         'Primary Air Flow Rate': np.array([], dtype=np.float64),
         'Primary Air Temperature': np.array([], dtype=np.float64),
         'Reference Air Temperature': np.array([], dtype=np.float64),
         }
    )

st.write('before')
st.dataframe(results_option1)

with st.form('input_form'):
    qavalue = st.slider('Primary Air Flow Rate', min_value=0, max_value=10, value=5)
    travalue = st.slider('Primary Air Temperature', min_value=0, max_value=10, value=5)
    trvalue = st.slider('Reference Air Temperature', min_value=0, max_value=10, value=5)
    clickSubmit = st.form_submit_button('Submit')

if clickSubmit:
    timestamp = datetime.datetime.now()
    results_option1.loc[len(results_option1)] = [timestamp, qavalue, travalue, trvalue]
    results_option1.to_csv(csv_file, index=False)
    st.write('after')
    st.dataframe(results_option1)
else:
    st.markdown("Please submit to save")

# df = pd.read_csv("results_option1.csv")
# st.write(df)
st.write(results_option1)

chart_data = pd.DataFrame(results_option1[['Primary Air Flow Rate', 'Primary Air Temperature', 'Reference Air Temperature']])
# st.write(chart_data)

# plot bar chart
st.bar_chart(chart_data, use_container_width=True)

st.write(chart_data.columns)

Current:

Something similar to what I want to achieve:

Thank you so much!

[Caroline]

Hey @limjiahau,

Thank you for sharing your question – sorry for the delayed reply!

It looks like you figured out how to implement the first part. For the second part, you can use Plotly Express to create a radar chart. Here’s an example:

import streamlit as st
import plotly.express as px
import pandas as pd

df = pd.DataFrame(dict(
    r=[1, 5, 2, 2, 3],
    theta=['processing cost','mechanical properties','chemical stability',
           'thermal stability', 'device integration']))
fig = px.line_polar(df, r='r', theta='theta', line_close=True)
st.plotly_chart(fig)