I am trying to use Dash to create an interactive dashboard that takes user input and then utilizes this input in a function. To better explain, I would like to provide users with a form in which they can input real estate information. Once they hit the submit button, I would like to utilize the user input as input for a function that will collect additional information on their real estate from the internet and other sources and then use this data to create graphs on other tabs of my dashboard.
I am having trouble understanding if this is even possible after a few hours of searching or how I would even do it.
Any help or direction would be greatly appreciated.
The example for the
Button component in the Dash core components page should contain a nice starter for what you described :
For tutorials and quick start up about dash I would recommand https://dash.plot.ly/
Thanks for the quick reply. This helps, but I am still quite confused on as to how I would initiate my other function (written in python) on the press of the button. For instance, I see how the button will take input and return an output, but it seems that that output needs to be already stored. What I am aiming to do is use the button to take the input, push that through to the function, run the function which will return output based on the input, and then I want to graph the returned data on another tab. Is this possible?
could you provide me with your layout code? This will help me helping you
blast from the past but - did you ever find a way to make this work?
Hi @ryanoud, @rajb_1,
To achieve what you described, and if I understood correctly, you’ll need to make use of callbacks.
Dash apps are made interactive through Dash Callbacks
There are lots of examples of how to use callbacks in the documentation.
Basically the structure of a callback looks like so:
Then to combine the data collection part, one solution would be to feed the user input into an API for example that will then retrieve some data that you can store and use to build graphs. Might look like something like this (assuming that you’re making use of
@app.callback(Output(component_id = 'data-storage', property_name = 'data'),
Input(component_id = 'user-input', property_name = 'value'))
# code to query an API
Hope that helps!