Get startedGet started for free

Interactive key stats table

Using graphs to display your data visually is a great way to visually see aggregated figures. Yet sometimes, you also need to see more numbers than is feasible to display in common visualization formats.

A key stakeholder in the e-commerce company, the finance department head, has heard of your great work but is someone who needs to see some figures in tabular rather than visual format. He has requested a dashboard displaying some aggregated stats in a tabular format. However, he wonders if you could also include some 'Dash magic' to make it a bit more interactive than his existing Excel spreadsheets?

This exercise is part of the course

Building Dashboards with Dash and Plotly

View Course

Exercise instructions

  • Set up the money_fmt object for USD currency formatting below line 9 using the appropriate function and style parameters.
  • Add the money_fmt formatter to the 'Total Sales ($)' column in the column_defs below line 15.

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
from dash_ag_grid import AgGrid
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'
key_stats_tb = ecom_sales.groupby(['Country','Major Category', 'Minor Category'])['OrderValue'].agg(['sum', 'count', 'mean']).reset_index().rename(columns={'count':'Sales Volume', 'sum':'Total Sales ($)', 'mean':'Average Order Value ($)'})

# Set up the money object
money_fmt = {
"____": (
  """params.value.toLocaleString(
  'en-US', {style: '____', currency: '____'})""")}

# Add the formatter to the relevant column
column_defs = [
  {"field": "Major Category"},
  {"field": "Total Sales ($)", "____": ____},
  {"field": "Average Order Value ($)"},
  {"field": "Sales Volume"}]

grid = AgGrid(
  columnDefs=column_defs,
  rowData=key_stats_tb.to_dict("records"))

app = Dash()
app.layout = [
  html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px'}),
  html.H1('Sales Aggregations'),
  html.Div([
    html.H2('Key Aggregations'),
    grid],
    style={'width':'850px', 'height':'750px', 'margin':'0 auto'})
]

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