Embedding a Plotly chart in a Django template

by

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:

EDIT: Update for using recent (as of 2021/08) versions of plotly. The template does not need any changes.

import plotly.graph_objects 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")

        layout=go.Layout(title="Meine Daten", xaxis={'title':'x1'}, yaxis={'title':'x2'})
        figure=go.Figure(data=['trace1'],layout=layout)

        context['graph'] = figure.to_html()

        return context

This is the original code:

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 %}
<div style="width:600;height:500">
{{ graph|safe }}
</div>
{% endif %}

More Related Contents:

  1. Django CSRF check failing with an Ajax POST request
  2. Having Django serve downloadable files
  3. How can I enable CORS on Django REST Framework
  4. Django URLs TypeError: view must be a callable or a list/tuple in the case of include()
  5. Error on “pip install -U channels” command using for otree (Running setup.py bdist_wheel for twisted … error)
  6. Split views.py in several files
  7. How to execute a GROUP BY … COUNT or SUM in Django ORM?
  8. Any way to make {% extends ‘…’ %} conditional? – Django
  9. How do I add a placeholder on a CharField in Django?
  10. Is it better to use path() or url() in urls.py for django 2.0?
  11. How to get value from form field in django framework?
  12. No Module named django.core
  13. How can I render a tree structure (recursive) using a django template?
  14. Count number of records by date in Django
  15. Running Scrapy spiders in a Celery task
  16. Django migration with uuid field generates duplicated values
  17. How to set and get session variable in django?
  18. Race conditions in django
  19. Django – TypeError – save() got an unexpected keyword argument ‘force_insert’
  20. What is your favorite solution for managing database migrations in django? [closed]
  21. Django 404 error-page not found
  22. Django DoesNotExist
  23. Django Setup Default Logging
  24. How to update manytomany field in Django?
  25. Install mysqlclient for Django Python on Mac OS X Sierra
  26. How to get more diagnostic output on a “no module named xyz” error?
  27. What’s the correct way to set up Django translation?
  28. Django admin: How to display the field marked as “editable=False” in the model?
  29. Plotly chart not showing in Jupyter notebook
  30. How to solve “Page not found (404)” error in Django?

Leave a Comment