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();
             });
    


Answer: 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
    ...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.

