Dash is created by plotly which is a python framework for creating dashboards for interactive web applications for data visualization.
Using Dash we can create dashboards for Plotly visualizations without having expert knowledge of JavaScript, HTML & CSS. Dash use Flask as web server. We can host dash apps to server for sharing them and accessing on web browser.
- Plotly use to create visuals like charts, graphs and Dash is to create a interactive dashboard to displays the plotly visuals.
How to Install Dash and Plotly Library
This is the first process for making interactive web applications using Plotly Dash. We can use any of python development environment like Anaconda, PyCharm etc. for creating dash apps. We use pip install commands for installing dash and plotly.
Now import dash package, dash html components for design the dashboard using HTML tags, dash core components (dcc) for using elements like drop down, tables and plotly packages for graphs.
Dash Building Blocks
Dash apps consist of two building blocks :
- Layout.
- Callbacks.
1. Dash Layout:
Layout is used to describe the elements or components like graphs, tables, dropdowns etc. and the size, color, of these elements. For HTML styling dash contains a Dash HTML Components using which we can create and style the HTML elements such as headings, div, table, images etc. For creating elements such as graphs, dropdowns, date picker etc use Dash Core components.
2. Callbacks:
To make the dashboard interactive in dash Callbacks are used. For example: Changing values in graph or tables by selecting options in dropdown or for some action on button click.
A callback is initialized using @app.callback(), which is followed by a function definition. Within this function, we define what happens on changing the value of the drop down or on button click.
@app.callback() function has two arguments: Output and Input.
- Input: This is used to define the input value that triggers the callback components. For example: Input value of dropdown which trigger the changes in graph or table values. Input function takes two argument which are component_id and component_property.
- Output: This is used to define the component which will be change or updated when the callback function is called. Output function is also takes 2 arguments — 1) component_id: defines the id of the component we want to update. 2) component_property defines the property of the component that will be updated.
Whole Code Together
Output of Above Code
The below images show how the changing values of dropdown affect the graph. It is open on localhost.
Some More Articles For You:
