Embed dash plot into web page

Dash Python
1

Dash is amazing! But is there any way to embed dash plot/component into simple web page?
I realised that I can save dash component to Plotly cloud and then share code as iframe. But in this case code will be opened (private functions is only for paid version).
Thanks.

2

For now, you’ll have to host the dash app somewhere (see https://plot.ly/dash/deployment) and then embed the Dash app in your web page using an html <iframe/>

3

I’ve been asked if I can add Dash to Django-based website without iframe, so I did this:

  1. added dash-index view, which renders html page, copied from Dash main page (will be styled as website)
  2. added view for all requests, started with ‘_dash’, with code:
    return HttpResponse(dispatcher(request), content_type='application/json')
  1. where dispatcher looks like this:
app = _create_app() # create usual Dash app
# request is Django HttpRequest
params = {
    'data': request.body,
    'method': request.method,
    'content_type': request.content_type
}
with app.server.test_request_context(request.path, **params):
    app.server.preprocess_request()
    try:
        response = app.server.full_dispatch_request()
    except Exception as e:
        response = app.server.make_response(app.server.handle_exception(e))
    return response.get_data()

I know this is not an ideal solution, but it works and does the job for now.

12 Likes
4

Wow, that’s really smart. Thanks for sharing @ead! For step 1, you might be able to just serve the response from app.index().

5

This a great idea, and works really well. I have authentication on my website, however using an iframe also publishes the url of the iframe in the website code, potentially enabling a user to extract that url and access without using my authentication. Is there a way to restrict who accesses the iframe url ?

1 Like
6

I have been using plotly for a while now for projects and would like to be able to share some of the dash visualisations through the web using Django. I am an analyst and have been picking up learning Django recently but was hoping you might be able to explain the process you went through in more detail to someone who doesn’t have as much experience with it?

At the moment I am just looking for a very simple way to share the dash apps and so by no means has to have any particular features, just a link (ideally with a login) I could actually send in an email without the person on the other end requiring python/ plotly installed. I had hoped to use Django to achieve this, is this something your would recommend?

Thanks
P

2 Likes
7

Here you can find example: https://bitbucket.org/m_c_/sample-dash. It’s quite simple if you already have basic knowledge of django. The interesting question now is how to manage multiple dash apps. If I find an answer, I’ll write to you.

4 Likes
8

I’ve updated repo https://bitbucket.org/m_c_/sample-dash, now it has two pages with dash figures + index page.

1 Like
9

Thank you so much, I’ll give it a go and see how it works out

10

Is there an example of a multiple page-app embedded in django using multiple dash applications in separate files?
I’ve set up my dash app using the second method in this tutorial: https://plot.ly/dash/urls and I’d like to make it visible on my local network.

11

If you’re embedding within an existing Django app, putting the Dash app within an iframe is probably the simplest way of achieving this.

12

So what should I do if I want to insert a chart (dcc.chart) into a div flask existed? Thank you

1 Like
14

Quick question, what r the advantages of using dash over iframe embedding?