CODEWITHSUNDEEP
pythondjangoplotlyplotly-dash
laddie_03
laddie_03

Reputation: 25

How to Embed a Plotly Interactive Graph in Webpage

I have an interactive graph generated by Plotly in Python that I saved to an html file using plotly.offline.plot(fig, filename='/tmp/interactiveGraph.html')

I am now trying to embed this interactive graph into some kind of webpage, using either Dash or Django. I'm leaning toward Django at the moment, given that I have an html version of the graph. Which would be better?

My code for the webpage is in a separate file from the code where I am creating the graph.

A lot of the tutorials I've found online just say to add a few lines to the template, but I don't know how to get those lines that they've described.

tl;dr: I'm looking for guidance as how to integrate an html file-for a Plotly interactive graph-with a web python script using Django or Dash

Side Question:

what is the difference between 

plotly.offline.plot(fig, include_plotlyjs=False, output_type='div')

and what I have above?

Reference:

https://github.com/ricleal/DjangoPlotLy

https://www.pythonsetup.com/how-implement-data-visualization-django-and-plotly/

Upvotes: 2

Views: 3523

Answers (1)

Theodore Howell
Theodore Howell

Reputation: 428

I would highly reccomend Django, its a great framework. As for this, the best option is to generate the data via JavaScript and Plotly has a great library for this. If you must use python, then Django can be used. Assuming you are familiar with Django, inside of your view you can collect your data and build your graph ( I would reccomend a celery task for something long running like this unless they are small graphs), and you can then collect the return from creating the graph in div format. This will return a string that holds all the needed html and css for the graphs. Put this inside of you get_context_data() method in your view and place it into the dictionary. You can the use that object inside of a template. I have done this before, if you are having a hard time feel free to DM me. Hope this helps some!

In regards to your side question, I believe having False for including JS will make the graph a bit smaller assuming you have an include for the plotly JS library. They might have done this in a newer release to make the graphs faster as they were significantly slower in the browser from python that the JS rendered one.

Upvotes: 1

Related Questions