Dash is an open source python framework for building web-based data visualisation applications. Learning and building basic Dash applications requires no knowledge of javascript or any protocols.

I've built a simple cryptocurrency dashboard which shows the

  • Real time price changes of Bitcoin in dollars
  • A drop down menu where the exchange currency can be selected.
  • This dashboard has a table which shows the current price, market cap, 24 hour volume change and 24 hour change of some cryptocurrencies like litecoin, ethereum and dogecoin.

Here I am using pycoingecko, A wrapper over CoinGecko's APIs for getting the latest info on selected cryptocurrencies

A picture of final outcome

app layout

The app layout as the name suggest gives an overall picture of what the application is going to look like and composing an app layout is pretty intuitive if you know HTML.

# layout containing just HTML H1 tag inside a div tag
app.layout = html.Div(
    [
        html.H1(
            children="Header",
            id="live-price-update",
            style=text_style,
        ),
    ]
)

Adding a drop down menu having options for exchange currency should look like

html.Div(
    [
        html.Label("Dropdown"),
        dcc.Dropdown(
            id="currency",
            options=[
                {"label": "USD", "value": "usd"},
                {"label": "INR", "value": "inr"},
                {"label": "EUR", "value": "eur"},
            ],
            value="usd",  # default value
        ),
    ]
),

Now comes the third part of the layout with dash_table which is much like a spreadsheet but in your browser.

dash_table.DataTable(
    id="table",
    # the columns needs to be in a specific way with "name" and "id" fields unlike pandas
    columns=[
        {"name": i, "id": i}
        for i in ["Coin", "Price", "Market Cap", "24h Volume", "24h Change"]
    ],
    data=[],
    # providing option to export the table to csv 
    export_format="csv"
),

callback functions

The callback functions in Dash are called whenever an input property of the component changes. Here we need two kinds of input, One is input from drop down menu and another would be time interval input to update the components with data available at that point in time.

The dcc.Interval component fires a callback at the given interval to update the states in real time without the need to refresh the page.

dcc.Interval(
    # updating every 10 seconds
    id="interval-component", interval=10000  # in milliseconds
),

For updating the bitcoin price, ID'd by live-price-update, An update_price callback is defined. The arguments to Output reflecting the the ID of the component that needs to be updated and the attribute of the component which takes the output returned from the callback. Same process is followed for Input

cg = CoinGeckoAPI()
@app.callback(
    dash.dependencies.Output("live-price-update", "children"),
    [
        dash.dependencies.Input("interval-component", "n_intervals"),
        dash.dependencies.Input("currency", "value"),
    ],
)
def update_price(children, value):
    currency_symbol_map = {"eur": "", "inr": "", "usd": "$ "}
    return currency_symbol_map.get(value) + str(
        cg.get_price(ids="bitcoin", vs_currencies=value)["bitcoin"][value]
    )

Coming to the last component of our app, The dash_table requires the data in specific format of a dictionary within a list like

[{'column1': value1, 'column2': value2}, {'column1': newvalue1, 'column2': newvalue2}...]

So the callback function for updating the table should look like

@app.callback(
    dash.dependencies.Output("table", "data"),
    [dash.dependencies.Input("interval-component", "n_intervals")],
)
def generate_table(data):
    response = cg.get_price(
        ids=["bitcoin", "litecoin", "ethereum", "tether", "dogecoin"],
        vs_currencies="usd",
        include_market_cap="true",
        include_24hr_vol="true",
        include_24hr_change="true",
    )
    return [
        {
            "Coin": r,
            "Price": response[r]["usd"],
            "Market Cap": response[r]["usd_market_cap"],
            "24h Volume": response[r]["usd_24h_vol"],
            "24h Change": response[r]["usd_24h_change"],
        }
        for r in response
    ]


Now we are done building major parts of the dashboard. You can find the entire code with requirements.txt here. Run the following command to view your changes atlocalhost:8050

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

checkout my project @github which uses dash to plot keystroke frequency in realtime