Embedding a Plotly chart in a Django template

Question

I am trying to embed a plotly pie chart in a Django html template. This works fine when the chart is produced in \'online mode\' (i.e. the html snippet is stored on the plot

Answer 1

Instead of writing the html to a file you can have plotly return the html part of the graph as a string. For example, using a class based TemplateView:

import plotly.offline as opy
import plotly.graph_objs as go

class Graph(TemplateView):
    template_name = 'graph.html'

    def get_context_data(self, **kwargs):
        context = super(Graph, self).get_context_data(**kwargs)

        x = [-2,0,4,6,7]
        y = [q**2-q+3 for q in x]
        trace1 = go.Scatter(x=x, y=y, marker={'color': 'red', 'symbol': 104, 'size': "10"},
                            mode="lines",  name='1st Trace')

        data=go.Data([trace1])
        layout=go.Layout(title="Meine Daten", xaxis={'title':'x1'}, yaxis={'title':'x2'})
        figure=go.Figure(data=data,layout=layout)
        div = opy.plot(figure, auto_open=False, output_type='div')

        context['graph'] = div

        return context

and the template:

{% if graph %}

{{ graph|safe }}

{% endif %}