Display a Bar chart using Dash#

This tutorial will introduce the development of a Dash application for extracting sales data from Dataiku. You can select countries from a dropdown menu, and the bar plot will dynamically update to display the total sales for the chosen countries.

You should know how to create an empty Dash web application. If you don’t, please refer to this tutorial.

Prerequisites#

Dataiku >= 12.0
A code environment with dash and plotly

Note

We have tested this tutorial using a Python 3.9 code environment with dash==2.18.0 and plotly==5.13.1. Other Python versions may be compatible. Check the webapp logs for potential incompatibilities.

Data preparation#

Start by downloading the source data following this link and make it available in your Dataiku DSS project, for example, by uploading the .csv file. Name the resulting Dataiku dataset Orders_by_Country_sorted.

Creating the webapp#

The webapp will consist of a title, a text (to explain the purpose of the webapp), a multi-select object (for selecting the countries), and a plot.

Importing the libraries#

First, you need to create an empty Dash web application and import the required libraries, as shown in Code 1.

Code 1: Importing the required libraries.#

from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import dataiku

Providing data#

To use the dataset, you must read Orders_by_Country_sorted with the dataiku package, as shown in Code 2.

Code 2: Reading the data.#

# READ DATASET
dataset = dataiku.Dataset("Orders_by_Country_sorted")
df = dataset.get_dataframe()
df = df[df['campaign']]

Creating the layout#

Code 3 defines the web application’s layout, as defined at the beginning of this section. You must plug a callback to update the bar chart, so you don’t need to create it in the layout. The callback will be called when the application will start.

Code 3: Creating the layout.#

# Create the layout of the app
app.layout = html.Div([
    html.Div([
        html.H1("Total Sales by Country", style={'backgroundColor': '#5473FF', 'color': '#FFFFFF', 'width': '98vw', 'margin': 'auto', 'textAlign': 'center'}),
        html.P("This graph allows you to compare the total sales amount and campaign influence by country.", style={'textAlign': 'center'}),
        dcc.Dropdown(
            id='country-select',
            options=[{'label': country, 'value': country} for country in sorted(df['country'].unique())],
            value=['United States', 'China', 'Japan', 'Germany', 'France', 'United Kingdom'],
            multi=True,
            style={'width': '50%', 'margin': 'auto'}
        ),
        dcc.Graph(id='sales-graph')
    ])
])

Updating the bar chart#

Code 4 is responsible for creating/updating the bar chart whenever the user changes the selected countries. For the Dash application, if you don’t use prevent_initial_call=True in the parameter of a callback, the callback is called when the application starts. So, we can use the same callback to create or update the bar chart.

Code 4: Updating the bar chart.#

# Define the callback to update the graph
@app.callback(
    Output('sales-graph', 'figure'),
    [Input('country-select', 'value')]
)
def update_figure(selected_countries):
    """
    Update the bar chart whenever the user selects one country.
    Args:
        selected_countries: all selected countries

    Returns:
        the new bar chart
    """
    filtered_df = df[df['country'].isin(selected_countries)]
    fig = px.bar(filtered_df, x='country', y='total_amount', title='Total amount per campaign')
    fig.update_layout(xaxis_title='Country', yaxis_title='Total Amount')
    return fig

Going further#

You can test different charts, change the column used to display the information and adapt this tutorial to your needs.

Here are the complete versions of the code presented in this tutorial: