Build a sophisticated dashboard using Plotly
Morph allows you to customize and create dynamic dashboard applications with input forms. In this tutorial, you will create an application that filters and displays Plotly charts based on values received from input forms.
Prerequisites
Please install pageckages in advance by the following command.
Output
Tutorial
To create a dynamic application that switches the display content based on user input, you need to create an input form in the MDX file and pass its values to a Python function.
In the Python function, use context.vars
to receive the values entered in the input form and filter the data for the chart to be returned.
In this tutorial, we also introduce how to obtain the options for the input form using SQL in addition to the above.
Here, we create the following two functions:
generate_population_data
: Generates the data used in the tutorial. In a production environment, this function can be used to fetch data. Additionally, this function can be replaced with an SQL file to fetch data from a database.filter_plotly_chart
: Filters the data generated bygenerate_population_data
and returns a Plotly chart.
Plotly and Matplotlib are automatically converted to HTML by Morph’s library when returned as a Figure, making them usable with <Embed />
.
Here, we create the following two functions:
generate_population_data
: Generates the data used in the tutorial. In a production environment, this function can be used to fetch data. Additionally, this function can be replaced with an SQL file to fetch data from a database.filter_plotly_chart
: Filters the data generated bygenerate_population_data
and returns a Plotly chart.
Plotly and Matplotlib are automatically converted to HTML by Morph’s library when returned as a Figure, making them usable with <Embed />
.
This SQL uses the data generated by generate_population_data
to obtain the options used in filter_plotly_chart
.
In other SQL, Python, and MDX load_data
, you can access the results using the get_state_list
specified by name.
Create a dashboard using Python functions and SQL.
The defineState()
function allows you to declare states that can be used within the page.
dateStart
,dateEnd
: The selected date range.state
: The value of the selected state among the options.
Using <DataTable />
and <Embed />
, the original data and chart are displayed.
By using variables
, the values selected in the input forms are passed to the Python function.