Get startedGet started for free

Generate key stats on hover

After a recent demonstration of your work with a manager in the e-commerce company, you received a request to create a dashboard for this stakeholder. Having too many visualizations and too much text is absolutely not allowed.

Instead, they want the dashboard to be highly interactive. They have requested a scatter plot that, when hovered over, will provide some additional key stats in a text box to the right. This should change when hovering over a new point on the scatter plot.

This exercise is part of the course

Building Dashboards with Dash and Plotly

View Course

Exercise instructions

  • Add the 'Country' column to the scatter plot's custom_data parameter below line 8 so it will appear in the hoverData property.
  • Create a callback below line 28 that connects the scatter_fig graph to the text_output element and will be triggered by hovering over the scatter plot.

Hands-on interactive exercise

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

from dash import Dash, dcc, html, Input, Output, callback
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/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_country = ecom_sales.groupby('Country')['OrderValue'].agg(['sum', 'count']).reset_index().rename(columns={'count':'Sales Volume', 'sum':'Total Sales ($)'})

# Add the country data to the scatter plot
ecom_scatter = px.scatter(ecom_country, x='Total Sales ($)', y='Sales Volume', color='Country', width=350, height=400, ____=['____'])
ecom_scatter.update_layout({'legend':dict(orientation='h', y=-0.5,x=1, yanchor='bottom', xanchor='right'), 'margin':dict(l=20, r=20, t=25, b=0)})

app = Dash()

app.layout = [
  html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px' }),
  html.H1('Sales breakdowns'),
  html.Div([
    html.H2('Sales by Country'),
    dcc.Graph(id='scatter_fig', figure=ecom_scatter)],
    style={'width':'350px', 'height':'500px', 'display':'inline-block', 
           'vertical-align':'top', 'border':'1px solid black', 'padding':'20px'}),
  html.Div([
    html.H2('Key Stats'),
    html.P(id='text_output', style={'width':'500px', 'text-align':'center'})],
    style={'width':'700px', 'height':'650px','display':'inline-block'})
]

# Trigger callback on hover
@callback(
    Output('text_output', 'children'),
    ____('scatter_fig', '____'))

def get_key_stats(hoverData):
    if not hoverData:
        return 'Hover over a country to see key stats'
    country = hoverData['points'][0]['customdata'][0]
    country_df = ecom_sales[ecom_sales['Country'] == country]
    top_major_cat = country_df.groupby('Major Category').agg('size').reset_index(name='Sales Volume').sort_values(by='Sales Volume', ascending=False).reset_index(drop=True).loc[0,'Major Category']
    top_sales_month = country_df.groupby('Year-Month')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)').sort_values(by='Total Sales ($)', ascending=False).reset_index(drop=True).loc[0,'Year-Month']
    stats_list = [
      f'Key stats for : {country}', html.Br(),
      f'The most popular Major Category by sales volume was: {top_major_cat}', html.Br(),
      f'The highest sales value month was: {top_sales_month}'
    ]
    return stats_list

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