Mito
Mito for Streamlit
  • Mito Documentation
  • Getting Started
    • Installing Mito
      • Fixing Common Install Errors
      • Installing Mito in a Docker Container
      • Installing Mito for Streamlit
      • Installing Mito for Dash
      • Installing Mito in a Jupyter Notebook Directly
      • Installing Mito in Vertex AI
      • Setting Up a Virtual Environment
  • Data Copilot
    • Data Copilot Core Concepts
    • Agent
    • Chat
    • Autocomplete
    • Smart Debugging
    • Configuration Options
    • AI Data Usage FAQ
  • Mito Spreadsheet
    • Core Concepts
    • Creating a Mitosheet
      • Open Existing Virtual Environments
    • Importing Data
      • Importing CSV Files
      • Importing from Excel Files
      • Importing Dataframes
      • Importing from a remote drive
      • Import: Generated UI from any Python Function
      • Importing from other sources
    • Graphing
      • Graph Creation
      • Graph Styling
      • Graph Export
    • Pivoting/Group By
    • Filter
      • Filter By Condition
      • Filter By Value
    • Mito AI
    • Summary Statistics
    • Type Changes
    • Spreadsheet Formulas
      • Custom Spreadsheet Functions
      • Formula Reference
      • Using VLOOKUP
    • Editing Individual Cells
    • Combining Dataframes
      • Merge (horizontal)
      • Concatenate (horizontal)
      • Anti-merge (unique)
    • Sort Data
    • Split Text to Columns
    • Deleting Columns
    • Deleting Rows
    • Column Headers
      • Editing Column Headers
      • Promote Row to Header
    • Deduplicate
    • Fill NaN Values
    • Transpose
    • Reset Index
    • Unpivot a Dataframe (Melt)
    • Formatting
      • Column Formatting
      • Dataframe Colors
      • Conditional Formatting
    • Exporting Data
      • Download as CSV
      • Download as Excel
      • Generate code to create Excel and CSV reports
    • Using the Generated Code
      • Turn generated code into functions
    • Changing Imported Data
    • Code Snippets
    • Custom Editors: Autogenerate UI from Any Function
    • Find and Replace
    • Bulk column header edits
    • Code Options
    • Scheduling your Automation
    • Keyboard Shortcuts
    • Upgrading Mito
    • Enterprise Logging
  • Mito for Streamlit
    • Getting Started with Mito for Streamlit
    • Streamlit Overview
    • Create a Mito for Streamlit App
    • API Reference
      • Understanding import_folder
      • RunnableAnalysis class
      • Column Definitions
    • Streamlit App Gallery
    • Experienced Streamlit Users
    • Common Design Patterns
      • Deploying Mito for Streamlit in a Docker Image
      • Using Mito for Final Mile Data Cleaning
  • Mito for Dash
    • Getting Started
    • Dash Overview
    • Your First Dash App with Mito
    • Mito vs. Other Dash Components
    • API Reference
      • Understanding import_folder
    • Dash App Gallery
    • Common Design Patterns
      • Refresh Sheet Data Periodically
      • Change Sheet Data from a Select
      • Filter Other Elements to Data Selected in Mito
      • Graph New Data after Edits to Mito
      • Set Mito Spreadsheet Theme
  • Tutorials
    • Pass a dataframe into Mito
    • Create a line chart of time series data
    • Delete Columns with Missing Values
    • Split a column on delimiter
    • Rerun analysis on new data
    • Calculate the difference between rows
    • Calculate each cell's percent total of column
    • Import multiple tables from one Excel sheet
    • Share Mito Spreadsheets Across Users
  • Misc
    • Release Notes
      • April 15 - Now Streaming (0.1.18)
      • March 21 - Smarter, Faster, Stronger Agents
      • February 25 - Agent Mode QoL Improvements
      • February 18 - Mito Agents
      • January 2nd - Inline Completions Arrive
      • December 6th - Smarter Workflow
      • November 27th - @ Mentions, Mito AI Server
      • November 4th, 2024 - Hello Mito AI
      • October 8, 2024 - JupyterLab 4
      • Aug 29th, 2024
      • June 12, 2024
      • March 19, 2024
      • March 13th, 2024
      • February 12th, 2024: Graphing Improvements
      • January 25th, 2024
      • January 5th, 2023: Keyboard Shortcuts
      • December 6, 2023: New Context Menu
      • November 28, 2023: Mito's New Toolbar
      • November 7, 2023: Multiplayer Dash
      • October 23, 2023: RunnableAnalysis class
      • October 16, 2023: Mito for Dash, Custom Editors
      • September 29, 2023: VLOOKUP and Find and Replace!
      • September 7, 2023
      • August 2, 2023: Mito for Streamlit!
      • July 10, 2023
      • May 31, 2023: Mito AI Recon
      • May 19, 2023: Mito AI Chat!
      • April 27, 2023: Generate Functions, Performance improvements, bulk column header transformations
      • April 18, 2023: Cell Editor Improvements, BYO Large Language Model, and more
      • April 10, 2023: AI Access, Excel-like Cell Editor, Performance Improvements
      • April 5, 2023: Range formulas, Pandas 2.0, Snowflake Views
      • March 29, 2023: Excel Range Import Improvements
      • March 14, 2023: Mito AI, Public Interface Versioning
      • February 28, 2023: In-place Pivot Errors
      • February 7, 2023: Excel-like Formulas, Snowflake Import
      • January 23, 2023: Excel range importing
      • January 8, 2023: Custom Code snippets
      • December 26, 2022: Code snippets and bug fixes
      • December 12, 2022: Group Dates in Pivot Tables, Reduced Dependencies
      • November 15, 2022: Filter in Pivot
      • November 9, 2022: Import and Enterprise Config
      • October 31, 2022: Replay Analysis Improvements
      • Old Release Notes
      • August 10, 2023: Export Formatting to Excel
    • Mito Enterprise Features
    • FAQ
    • Terms of Service
    • Privacy Policy
  • Mito
Powered by GitBook

© Mito

On this page
  • Dash: The Basics
  • (1) The Dash App Instance
  • (2) The App Layout
  • Understanding More About Dash

Was this helpful?

  1. Mito for Dash

Dash Overview

Create data apps in Python.

Dash: The Basics

Dash is a Python-based dashboarding library that makes it easy to build detailed, Enterprise-grade dashboards and data apps.

To understand Dash, there are three basic concepts to understand:

  1. A Dash App instance: a single running instance of your data app.

  2. The app layout: how to configure what is actually displayed in your dash app.

  3. Callbacks: how to make your dash app interactive.

To see how each of these come together, consider the following simplest example of an interactive Dash application:

from dash import Dash, html, dcc, callback, Output, Input
import plotly.express as px
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv')

# (1) The Dash App instance
app = Dash(__name__)

# (2) The app layout
app.layout = html.Div([
    html.H1(children='Title of Dash App', style={'textAlign':'center'}),
    dcc.Dropdown(df.country.unique(), 'Canada', id='dropdown-selection'),
    dcc.Graph(id='graph-content')
])

# (3) A callback
@callback(
    Output('graph-content', 'figure'),
    Input('dropdown-selection', 'value')
)
def update_graph(value):
    dff = df[df.country==value]
    return px.line(dff, x='year', y='pop')

if __name__ == '__main__':
    app.run(debug=True)

(1) The Dash App Instance

To create a new Dash app instance, all you need is the following code (in a file app.py

from dash import Dash
app = Dash(__name__)

# Code elided from above

if __name__ == '__main__':
    app.run(debug=True)

Running this code with python app.py will start a server that serves a blank webpage. Congrats, that's your first data app! But because you havent set a layout, or configured any callbacks, it's not super interesting.

(2) The App Layout

Ok, so you actually want something to be displayed. Let's add in more code - to set the layout.

from dash import Dash, html, dcc, callback, Output, Input
import plotly.express as px
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv')

# (1) The Dash App instance
app = Dash(__name__)

# (2) The app layout
app.layout = html.Div([
    html.H1(children='Title of Dash App', style={'textAlign':'center'}),
    dcc.Dropdown(df.country.unique(), 'Canada', id='dropdown-selection'),
    dcc.Graph(id='graph-content')
])

if __name__ == '__main__':
    app.run(debug=True)

If you run this code, a webpage with some content will be served! It will have two things:

  1. A title - set on line 12. The title is set to Title of Dash App and some additional styling is added to center the text.

  2. A dropdown - set on line 13. The possible options of this dropdown are the various countries in the dataframe defined on line 5, and the starting value is Canada

However, nothing happens when you change the dropdown item that is selected! That's no good -- we want to update the graph component defined on line 14...

(3) A Callback

Callbacks are how you add interactivity to your application. By registering a series of Outputs that change when a different set of Inputs change, you can make pieces of your application respond changes in other pieces of your application.

from dash import Dash, html, dcc, callback, Output, Input
import plotly.express as px
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv')

# (1) The Dash App instance
app = Dash(__name__)

# (2) The app layout
app.layout = html.Div([
    html.H1(children='Title of Dash App', style={'textAlign':'center'}),
    dcc.Dropdown(df.country.unique(), 'Canada', id='dropdown-selection'),
    dcc.Graph(id='graph-content')
])

# (3) A callback
@callback(
    Output('graph-content', 'figure'),
    Input('dropdown-selection', 'value')
)
def update_graph(value):
    dff = df[df.country==value]
    return px.line(dff, x='year', y='pop')

if __name__ == '__main__':
    app.run(debug=True)

Here's what's happening above:

  1. On line 18, a callback is registered. The callback is the function update_graph

  2. The Input to the callback is the value of the dropdown-selection component - defined on line 13.

  3. The Output from the callback is the figure of the graph-content component, defined on line 14.

Here's what this accomplishes:

  1. When the value of the component with id dropdown-selection changes because the user selects something different from the dropdown, the function update-graph changes.

  2. When this function runs, the value that is passed to the function as it's singular argument is the new value of the Dropdown the user has selected on the frontend.

  3. This function runs, creates a new Plotly line chart, and then returns it.

  4. This returned line chart is written to the graph-content component, specifically for it's figure value, which then updates on the frontend.

By reading the documentation for a component, you can see what the correct props are to write to with outputs!

Understanding More About Dash

PreviousGetting StartedNextYour First Dash App with Mito

Last updated 1 year ago

Was this helpful?

app.layout is how you actually tell the Dash app what to display. You can nest components like div's (which are just containers), or H1 (which is a large header) or Dropdown (which lets you select from a variety of options). See the Dash documentation for

New to writing Dash applications and looking to understand more? Check out the Dash docs to learn more

all components.
core concepts.