Takeaway Sheet: Designing and Developing Dashboards with Dash

Practice


1# Importing libraries to work with dashboards
2
3import dash # the dash library
4import dash_core_components as dcc # dash controls
5import dash_html_components as html # dash dashboard elements
6import plotly.graph_objs as go # plotly graphs


1# defining the layout
2
3external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
4app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
5app.layout = html.Div(children=[
6 # your code for graphs and controls
7])


1# Dashboard header
2html.H1(children = 'Header'),


1# Dashboard graph
2
3dcc.Graph(
4        figure = {
5                'data': [
6             # the set of plotly graphic elements to be displayed on the graph
7        ],
8                'layout': # the visual properties of the graph
9             }, # this parameter is omitted if it's formed dynamically
10        id = 'graph_id' # graph identifier
11    ),


1# Displaying a table graph
2
3go.Table(header = {'values': ['<b>Year</b>',
4               '<b>Country</b>',
5                 '<b>% of urban population</b>'],
6                   'fill_color': 'lightgrey', # the cell background color
7                   'align': 'center'}, # text alignment
8        cells = {'values': table.T.values})


1# Time range selector
2dcc.DatePickerRange(
3    start_date = urbanization['Year'].dt.date.min(), # start date with default value
4    end_date = urbanization['Year'].dt.date.max(), # end date with default value
5    display_format = 'YYYY', # date and time display format
6    id = 'dt_selector', # the unique control identifier
7),


1# Checkboxes
2
3dcc.Checklist( options = [{'label': 'Africa', 'value': 'afr'},
4                          {'label': 'Eurasia', 'value': 'eur'},
5                          {'label': 'Australia', 'value': 'au'},
6                          {'label': 'Americas', 'value': 'am'}], # array with options
7        # label — the value the user sees
8        # value — technical value for inner processing 
9               value = ['afr', 'eur', 'au', 'am'], # the set of values
10               id = 'continent_selector' ) # the unique control identifier


1# Dropdown list
2
3dcc.Dropdown( options = [{'label': 'Africa', 'value': 'afr'},
4                         {'label': 'Eurasia', 'value': 'eur'},
5             {'label': 'Australia', 'value': 'au'},
6             {'label': 'Americas', 'value': 'am'}], # array with options
7        # label — the value the user sees
8        # value — technical value for inner processing 
9        value = ['afr', 'eur', 'au', 'am'], # the set of values
10        multi = True, # allows selection of multiple elements from the list
11        id = 'continent_selector') # the unique control identifier


1# Radio button
2
3dcc.RadioItems(options = [{'label': 'Dog', 'value': 'dog',           
4                          {'label': 'Cat', 'value': 'cat'},    
5                          {'label': 'Opossum', 'value': 'possum'},   
6                         ],  # array with options
7        # label — the value the user sees
8        # value — technical value for inner processing      
9               value = 'possum', # the set of values
10               id = 'pet_selector') # the unique control identifier


1# the logic of a dashboard that depends on controls
2@app.callback(
3    [Output('trig_func', 'figure'),
4    ],
5    [Input('mode_selector', 'value'),
6    ])
7def update_figures(selected_mode):
8  # code for updating the graph


1# a case with multiple inputs
2
3@app.callback(
4    [Output('plot_1', 'figure'),
5     Output('plot_2', 'figure')
6    ],
7    [Input('control_1', 'value'),
8     Input('control_2', 'value'),
9     Input('control_3', 'value')
10    ])
11def update_figures(control_1_value, control_2_value, control_3_value):
12# creating dynamic graphs
13return (
14            { # plot_1 graph
15                'data': plot_1_data,
16                'layout': go.Layout(…)
17             },
18            { # plot_2 graph
19                'data': plot_2_data,
20                'layout': go.Layout(…)
21           },
22  )


1# a div element
2
3html.Div([
4 html.Div([
5  html.Label('I use 9 out of 12 available columns:'),
6 ], className = 'nine columns'),
7 html.Div([
8  html.Label('I use 3 out of 12 available columns:'),
9 ], className = 'three columns'),
10], className = 'row'),


1# setting the graph's height to 25% of the page width
2
3dcc.Graph(
4 style = {'height': '25vw'},
5 id = 'sales_by_platform'
6)


1# adding an empty line between two dashboard elements
2
3html.Br()