Plotting graph using python and dispaying it using HTML

Question

I want build an offline application using plotly for displaying graphs . I am using python(flask) at the back end and HTML(javascript) for the front end . Currently I am able to plot the graph by sending the graph data as JSON object to front end and building the graph using plotly.js at the front end itself . But what I actually want is to build the graph at the server(backend ie python) side itself and then display the data in HTML . I have gone through the plotly documentation that builds the graph in python , but I dont know how to send the build graph to front end for display :( Can someone help me on that ? PS : I want to build an offline application Updated Code

$(window).resize(function() {
         var divheight = $("#section").height();
         var divwidth = $("#section").width();
         var update = {
                  width:divwidth,  // or any new width
                  height:divheight // " "
                };

          var arr = $('#section > div').get();
          alert(arr[1]);
        Plotly.relayout(arr[0], update);
            }).resize();
         });

Andrew Guy · Accepted Answer · 2019-01-09 00:34:54Z

18

My suggestion would be to use the plotly.offline module, which creates an offline version of a plot for you. The plotly API on their website is horrendous (we wouldn't actually want to know what arguments each function takes, would we??), so much better to turn to the source code on Github.

If you have a look at the plotly source code, you can see that the offline.plot function takes a kwarg for output_type, which is either 'file' or 'div':

https://github.com/plotly/plotly.py/blob/master/plotly/offline/offline.py

So you could do:

from plotly.offline import plot
from plotly.graph_objs import Scatter

my_plot_div = plot([Scatter(x=[1, 2, 3], y=[3, 1, 6])], output_type='div')

This will give you the code (wrapped in <div> tags) to insert straight into your HTML. Maybe not the most efficient solution (as I'm pretty sure it embeds the relevant d3 code as well, which could just be cached for repeated requests), but it is self contained.

To insert your div into your html code using Flask, there are a few things you have to do.

In your html template file for your results page, create a placeholder for your plot code. Flask uses the Jinja template engine, so this would look like:

<body>
....some html...

{{ div_placeholder }}

...more html...
</body>

In your Flask views.py file, you need to render the template with the plot code inserted into the div_placeholder variable:

from plotly.offline import plot
from plotly.graph_objs import Scatter
from flask import Markup
...other imports....

@app.route('/results', methods=['GET', 'POST'])
def results():
    error = None
    if request.method == 'POST':
        my_plot_div = plot([Scatter(x=[1, 2, 3], y=[3, 1, 6])], output_type='div')
        return render_template('results.html',
                               div_placeholder=Markup(my_plot_div)
                              )
    # If user tries to get to page directly, redirect to submission page
    elif request.method == "GET":
        return redirect(url_for('submission', error=error))

Obviously YMMV, but that should illustrate the basic principle. Note that you will probably be getting a user request using POST data that you will need to process to create the plotly graph.

edited Jan 9, 2019 at 0:34

answered Jun 20, 2016 at 1:44

Andrew Guy

10.1k3 gold badges30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

danish sodhi Over a year ago

Hi Andrew , Thanks for answering :) Assuming that my_plot_div is a <div>, Can you guide me on how will I be able to transfer this div information to front end ? Earlier I used to transfer JSON(containig info like data , layout but still not plotted infromation) from server to front end for display ....How can I do in this case :( Thanks alot in advance :)

Andrew Guy Over a year ago

I've edited my answer to include info on rendering this data with Flask.

danish sodhi Over a year ago

Thanks alot Andrew .... it was help full alot :) Cas I define a CSS for this div generated by the plotly .........Actually I want to resize my graph as my window resizes :)

A.P. Over a year ago

@AndrewGuy Really? I see this piece of code

return render_template('results.html',                                div_placeholder=Markup(my_plot_div)                               )

. I think I found it from flask import Markup. Thanks still for taking time to come back to an old answer.

Andrew Guy Over a year ago

@A.P. Sorry, missed that somehow. Markup is from the python Flask library. from flask import Markup. I've edited the answer to include this. Thanks for highlighting this.

|

Nicholas Morley · Accepted Answer · 2020-02-14 11:28:20Z

7

You can use the .to_html() method:

https://plot.ly/python-api-reference/generated/plotly.graph_objects.Figure.html#plotly.graph_objects.Figure.to_html

import plotly.express as px

fig = px.scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 4, 9, 16])

div = fig.to_html(full_html=False)  # Get the <div> to send to your frontend and embed in an html page

answered Feb 14, 2020 at 11:28

Nicholas Morley

4,2603 gold badges20 silver badges14 bronze badges

Collectives™ on Stack Overflow

Plotting graph using python and dispaying it using HTML

2 Answers 2

14 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related