Comment on page
Create a Mito for Streamlit App
A Quickstart guide to creating your first Streamlit app with the Mito Spreadsheet.
The easiest way to create your first Streamlit application with Mito is to try things yourself. Streamlit has an awesome developer story, so for each edit you make to your code, you can just refresh the page and see your new changes.
In this guide, we're going to use Mito for Streamlit to create an interactive app that allows users to explore Tesla stock data. We'll do some basic data cleaning, and then perform an analysis that computes the traded volume in the most recent month.
- 1.First, create a new Python script. Let's call it
stock_data.pyin your favorite IDE or text editor, then add these lines:import streamlit as stfrom mitosheet.streamlit.v1 import spreadsheet
- 3.Let's make the page wide, and set a title:st.set_page_config(layout="wide")st.title('Tesla Stock Volume Analysis')
- 4.Now, run your Streamlit app from the command line:streamlit run stock_data.py
- 5.The Streamlit app should open in a new tab in your web-browser. Check out that awesome title!
- 1.Now, let's use the Mito spreadsheet to displayCSV_URL = 'https://raw.githubusercontent.com/plotly/datasets/master/tesla-stock-price.csv'new_dfs, code = spreadsheet(CSV_URL)
- 2.You'll see a few buttons in the upper-right corner of your app asking if you'd like to rerun the app. Choose Always rerun, and you'll see your changes automatically each time you save the
- 3.When your app refreshes, you will see the Mito spreadsheet with Tesla stock data. Scroll around like you would in any other spreadsheet!
- 4.The return value of the
spreadsheetis each of the tabs of the spreadsheet, as well as the code that corresponds to the edits you make in the spreadsheet. Let's display both:st.write(new_dfs)st.code(code)
- 1.Take a closer look at this dataset. It looks like the first row has an invalid date. Let's remove it from our analysis by right clicking on the row label 0 and then clicking Delete Rows.
- 2.Turn the
Datecolumn into a datetime. Click the Filter icon next to the
Dateheader, and in the taskpane that opens, use the Dtype dropdown to select datetime.
- 3.Pause here and check out the dataframes displayed below the Mitosheet. Note that each
- 4.Turn the
Volumecolumn into a float. Click the Filter icon next to the
Volumeheader, and in the taskpane that opens, use the Dtype dropdown to select float.
We're now ready to use more of Mito's advanced functionality. Let's create a pivot table that allows us to understand how the traded volume has changed over time.
- 1.Click the Pivot button in the Mito toolbar.
Dateto the Rows section. Group date by year-month, so we can understand volume changes on a monthly lee.
Volumeto the Values section. Select an aggregation type of sum.
- 1.If you cannot select sum for
Volume, you may have forgotten to change
Volumeto a float. See step 4 in the section above.
- 4.This pivot table now displayes the total of traded volume per month. If you scroll below, you will see that this pivot table is returned from the Mito spreadsheet, and the code to generate this pivot table is returned as well.
That's it, you made your first app with Mito for Streamlit. Here's our finished script:
import streamlit as st
from mitosheet.streamlit.v1 import spreadsheet
st.title('Tesla Stock Volume Analysis')
CSV_URL = 'https://raw.githubusercontent.com/plotly/datasets/master/tesla-stock-price.csv'
new_dfs, code = spreadsheet(CSV_URL)
After you’ve built an app using Mito for Streamlit, it's time to share it! To show it off to the world you can use Streamlit Community Cloud to deploy, manage, and share your app for free.
It works in 3 simple steps: