How to export a plotly dashboard app into a html standalone file to share with the others?

Question

I have built a plotly interactive dashboard, and am looking a way to export this app to HTML format, and share it with others.

Is there any hints for me?

I have googled, and most answer divert me to the following links.

https://plot.ly/python/getting-started-with-chart-studio/

and i have tried to put :

import plotly.io as pio

pio.write_html(app, file='hello_world.html', auto_open=True)

in my app.py after :

if __name__ == "__main__":
    app.run_server(debug=True, port=8052)

but it doesn't work.

Peduncle

You can't. There are actually ways to add simple callbacks to a static plots otherwise you should generate all possible plots files and play with html and css. – Heilner

thank you @Heilner , would you please pass me some articles about that so that i can check it out? – Peduncle

github.com/covid19-dash/covid-dashboard ? – Aphrodite

Answer 1

So I think the answer you needed was "it cannot be done".

To clarify the repeated ask of converting a dashboard to HTML:

HTML is a markup language; it displays text in aesthetic ways, you can use CSS to improve the aesthetics.

The idea of interactivity like a dashboard where onClick() leads to changes in visuals because the csv file was re-queried or filtered or re-calculated is what a server-side brings to the HTML/CSS/JavaScript front-end.

You cannot have a fully encapsulated dashboard with interactivity in an HTML file alone. You must bring server-side logic to the table. This is why everyone is mentioning Heroku, AWS, etc.

Now if your dashboard is not interactive, and it's actually just a bunch of static visuals with some basic hover-over effects; then a standalone HTML file can read in SVGs that contain hover over text prepared. This is what plotly's write_html does (my understanding is plotly.offline.plot just uses this under the hood or something similar).

The gist that someone else noted, duplicated here:

https://gist.github.com/ybressler/e0d40e63a5f35cf2dda65378333c6436

Shows the limits of HTML only "dashboarding". You can show/hide and hover over points, but you can't incorporate sliders that change values without the server side or very bloated and complex show/hide logic hidden somewhere.

Ovoviviparous

This is a limitation of the way plotly/dash is designed, though. Serverless callbacks and querying is most definitely possible, just take a look at something like Altair. – Menthol

This answer IMAHO is misleading, of course you can have all on client side (called Single Page App). And also you can pack all your CSS and JS in a HTML. So technically, I don't see this limitation. – Laager

Answer 2

Assuming your app has many interrelated components, I would suggest you deploy your plotly dash app to heroku: https://dash.plot.ly/deployment

If you have several graph objects, you could export them individually to html with the following code:

plotly.offline.plot(
  # Your plotly go figure here
  show_link=False,
  filename = 'my_file.html'
)

Alternatively, if you want to embed your chart:

from plotly.offline.offline import _plot_html
#Only for embedding
embedable_chart = plotly.offline.plot(fig, include_plotlyjs=False, output_type='div')
f = open("embedable_chart.text", "w")
f.write(embedable_chart)
f.close()

Herrle

thank you for answering me, would you please elaborate more like in where you should i put these snippets? – Peduncle

sorry for my dumb question, but is there any example i can refer to? – Peduncle

Yes, see this gist – download to your computer and open the html gist.github.com/ybressler/e0d40e63a5f35cf2dda65378333c6436 – Herrle

thank you @Yaakow Bressler. That's for one graph, because, right now i have a dashboard, with several graphs in it, and it is linked to a csv data file. So how to i make it a standalone html file? And i don't need it to get update from the csv file. Is there any way to do that? – Peduncle

Gotya. I'd suggest deploy to a web server such as Heroku, AWS, or GCloud. Heroku is pretty straightforward, check link in my original post. – Herrle

Answer 3

If you only have static data / no interactivity; I've had good results in the past creating a basic dashboard using ipywidgets like tabs and plotly figurewidget in jupyter notebooks and exporting that to an html file.

Square

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Aftereffect

Answer 4

My workaround: https://gist.github.com/exzhawk/33e5dcfc8859e3b6ff4e5269b1ba0ba4 related issue: https://github.com/plotly/dash/issues/1056#issuecomment-997439760

To see the demo: Download the Python file and run it. You will see a simple bar chart as well as a table. After clicking the left upper button, you will find a folder besides the Python file named "target". In which you will have a fully offline static HTML file with all other files needed (hopefully). You may stop Python and open the index.html directly inside the "target" folder. You may send the whole "target" folder to others and let them open it without any Python runtime or HTTP server, just with a browser.

Under the hood: The code is actually simple but hacky. The dash web page relies on ajax communication to fetch JSON data to render. So the make_static function downloads all resources and the JSON, patches the JSON into the index.html file, and tells the scripts in the page to get data from index.html instead of requesting to Python backend.

Limitation: It's a static HTML file bro. No fancy callbacks anymore. You can only save the initial state rather than the ideal "current layout when the save button is clicked".

Sayce

Answer 5

You can deploy your dash app for free via pythonanywhere.

See https://towardsdatascience.com/the-easiest-way-to-deploy-your-dash-app-for-free-f92c575bb69e for details.

Avionics