I’m creating a webapp for my bachelor thesis using a lot of data and wanted to make a visualization of that data using dash. However, Im finding it difficult to embed those dash graphs into my html layout. Im very new to this and I’d really appreciate any type of help.
To be more specific about the problem, I’ve created web app using flask in python, created layout using html and I already have a lot of data stored in a database. (Its data about real estate) I’ve watched few tutorials on how to create some graphs in dash, but that is all created in a .py file and I dont know how to use it in my html layout and already working web app.
Hopefully I’ve covered it well. If anyone would be interested in helping me, I can send the code.
Embedding a dash app into an existing Flask app is possible. However, since you are a beginner, I would not recommend trying that.
I think you should start with the official tutorial.
Dash does not work by directly embedding graphs into some html template. Instead, you define a layout of your app using dash-html-components and dash-core-components. dash-html-components are (as far as I understand) basically just a python wrapper around normal html components. Thus, it shouldn’t be too difficult to take your html layout and rebuild it using dash-html-components. Once you have your layout defined, you wire the individual components together using callback functions.
I hope this answer is helpful. If not, just ask further
Tip: Also have a look at dash-bootstrap-components. Especially the layout components (Row, Columns, and Containers) are really helpful for arranging your components in the layout.
first of all, thank you very much for a quick response. If I understand correctly, it is possible for me to replicate every bit of detail I have in my html layout using dash html components and everything will work just the same? For example, I have a nav bar, that changes its structure, whether the user is logged in or not. Is it possible to recreate that aswell?
Here’s the complete list of dash-html-components. You can check out whether there’s everything you need.
Some navbars are available in the dash-bootstrap-components.
If you already have login functionality implemented in your flask app, it might be actually easier to really embed your dash app into it. It is possible to add login functionality to a dash app but the official documentation is quite scarce. You should be able to find something about this topic here on the forum.
If you want single Dash graphs inside a larger Jinja template it can work with iFrames as shown in the template but I’ve found going full Jinja or full Dash layout for each page to be the most sustainable approach.
If anyone would be interested in helping me, I can send the code.