Dash for Beginners: Create Interactive Python Dashboards

Create interactive python dashboards without html, css and Js

Image designed by freepik

Want to learn plotly Dash ? Read the following article to get a basic understanding of plotly Dash. Get an in-depth understanding by either following the official documentation or check out my Udemy course where you will learn how to create full fledged interactive dashboard.

What is Dash?

Dash is a python framework created by plotly for creating interactive web applications. Dash is written on the top of Flask, Plotly.js and React.js. With Dash, you don’t have to learn HTML, CSS and Javascript in order to create interactive dashboards, you only need python. Dash is open source and the application build using this framework are viewed on the web browser.

With Dash, you don’t have to learn HTML, CSS and Javascript in order to create interactive dashboards, you only need python.

Building blocks of Dash

Dash applications are made up of 2 building blocks :

1. Layout
2. Callbacks

Layout describes the look and feel of the app, it defines the elements such as graphs, dropdowns etc and the placement, size, color etc of these elements. Dash contains Dash HTML components using which we can create and style HTML content such as headings, paragraph, images etc using python. Elements such as graphs, dropdowns, sliders are created using Dash Core components.

Callbacks are used to bring interactivity to the dash applications. These are the functions using which, for example, we can define the activity that would happen on clicking a button or a dropdown.

Layouts using Dash

Now, let’s have a look at how we can create web based layouts using plotly Dash. Before starting with the layout, let’s install some required packages. (You can use Anaconda Spyder, a python development environment, for running the codes.)

Now, we will import dash package, dash_html_components for HTML classes, dash_core_components for elements such as graph, dropdown etc, and plotly packages for creating plots and reading stock prices dataset.

(In the below code) We are initializing our dash app using dash package. Then, we are reading the stock prices data for different companies from 2018 to 2019. We are creating stock_prices function that returns the line chart for Google’s stock prices.

(In the above code) At line 16, we are setting our layout using html Div component, which is a kind of wrapper within which the elements(heading, graph) of the layout will be created. The Div component contains arguments such as id (a unique identifier of the element), style (for setting the width, height, color etc) and children (equal to square bracket within which elements of the layout are initialised).

Inside the children component (of html.Div) we are creating html H1 heading at line 17 using H1 function. Inside the function, we are setting the unique id of the function (id = ‘H1’), children property using which we set the text of the heading and style property as a dictionary within which we are setting styling such as center aligning the text, setting top and bottom margin to 40 pixel. At line 21, we are using dash core component (dcc) to create graph , where we are setting the id of the graph and the figure argument, which is equal to the function call (stock_pricest()) that returns the plotly figure object.

In order to view our application, we need to run our web server just like in Flask. Remember Dash is built on top of Flask.

On running the app, you will see that the app is running on http://127.0.0.1:8050/ , which is your local server. Copy this url and paste it in your browser and you will see the below vizualisation.

Now, we will create a dropdown using dash core components. Using the dropdown, we will be able to select the stocks of Google, Apple or Amazon.

Dropdowns are created using the Dropdown() function, which has the following arguments -

1. id — Unique identifier of the dropdown.
2. options — Sets the ‘label’ (the text visible in the dropdown) and ‘value’ (used by dash to communicate with callbacks) as key value pair.
3. value — default selection for the dropdown.

Callbacks in Dash: Making it interactive

Now, let’s have a look at how we can create the callback that will connect the dropdown and the stock prices line chart.

A callback is initialised using @app.callback(), which is followed by a function definition. Within this function, we define what happens on changing the value of the dropdown.

Let’s have a look at the arguments within the callback function :

1. Output: This is used to define the components within the layout which will be updated when the function below the callback (graph_update()) return some object. Output function takes 2 arguments — 1) component_id defines the id of the component we want to update with our function graph_update. We want to update stock prices chart within the dcc.Graph, so we will set the component id to ‘line_plot’, which is id of our graph component. 2) Component property defines the property of the component that will be updated, which is figure property of dcc.Graph in our layout.
2. Input: This is used to define the components, the change in whose value will trigger the callback. Input function also takes component_id and component_property as argument. We want the callback to get triggered based on change in the value of our dropdown, so we set the component_property to ‘value’ property of dropdown. Please note that Input is defined within a list.

The component property of Input function, which is ‘value’ of the dropdown, goes as an argument within the function graph_update. Inside the function we are creating scatter plot and returning the figure object fig, which is passed to the figure property of dcc.Graph using the Output function of the callback.

Bringing it all together

Now let’s combine the layout, the dropdown and the callback in the below code :

The image below shows how the change in the value of dropdown updates our stock prices line chart.

Summary

So, we looked at how we can create interactive dashboards using plotly Dash. Firstly, we created the layout using html components and dash core components. Then, we added dropdown and connected it with the stock prices line chart using callback.

Sharing the course link again — Plotly Dash Course, in case you want to learn more about plotly dash.

Firstly, you should get my posts in your inbox. Do that here!
Secondly, if you like to experience Medium yourself, consider supporting me and thousands of other writers by signing up for a membership. It only costs $5 per month, it supports us, writers, greatly, and you have the chance to make money with your writing as well.

Examples of Dashboards created using Plotly Dash!

Python Dashboard using Plotly Dash: Example 1

Python Dashboard using Plotly dash: Example 2