Get startedGet started for free

Adding an HTML list to Dash

While working at your desk, someone from the Marketing department saw the last little dashboard you produced and have asked you to create one for them. They would like a bar chart of the top categories by total sales amount but with a list below that notes the top few categories for a quick glance.

They also have a few stylistic notes - but they all seem within your knowledge base given your recent work in HTML and Dash.

Your task is to extend the dashboard you created to include a list of the top categories and their sales volume.

This exercise is part of the course

Building Dashboards with Dash and Plotly

View Course

Exercise instructions

  • Create an ordered HTML list using Dash below line 22.
  • Add two list elements containing the top two categories and their associated sales volumes (created for you on lines 9 and 10) to the ordered list below line 24.
  • Add a line break, so the copyright notice is on a new line below line 28.

Hands-on interactive exercise

Have a go at this exercise by completing this sample code.

import dash
from dash import dcc, html
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/2bac9433b0e904735feefa26ca913fba187c0d55/e_com_logo.png'
ecom_category = ecom_sales.groupby(['Major Category','Minor Category']).size().reset_index(name='Total Orders').sort_values(by='Total Orders', ascending=False).reset_index(drop=True)
num1_cat, num1_salesvol = ecom_category.loc[0].tolist()[1:3]
num2_cat, num2_salesvol = ecom_category.loc[1].tolist()[1:3]
ecom_bar = px.bar(ecom_category, x='Total Orders', y='Minor Category', color='Major Category')
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}})             

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Img(src=logo_link),
    html.H1('Top Sales Categories'),
    html.Div(dcc.Graph(figure=ecom_bar)),
    html.Span(children=[
    'The top 2 sales categories were:',
    # Set up an ordered list
    html.____(children=[
      	# Add two list elements with the top category variables
        html.____(____=[____, ' with ', num1_salesvol, ' sales volume']),
        html.____(____=[____, ' with ', num2_salesvol, ' sales volume'])
    ], style={'width':'350px', 'margin':'auto'}),
    # Add a line break before the copyright notice
    html.____(),
    html.I('Copyright E-Com INC')])
    ], style={'text-align':'center', 'font-size':22})

if __name__ == '__main__':
    app.run_server(debug=True)
Edit and Run Code