How to display multiple Plotly graphs in a HTML webpage? (using plot_div)

Question

I would like to display multiple plotly graphs in a HTML webpage. I tried many codes, but the simplest one I found was this:

In my views function, I have:

for graphs in res:
            plot_div = plot(res[graphs], output_type='div')

        return render(request, '__', context={'plot_div': plot_div, "result": res})

In my HTML, I have:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>test</title>
</head>
<body>
  {% autoescape off %}
  {{ plot_div }}
  {% endautoescape %}
</body>
</html>

However, only the last graph is displayed. That's because the variable plot_div is constantly being updated under the for loop. Thus, I tried to create a dictionary like so:

plot_div = dict()
        for index, graphs in enumerate(res, 1):
            plot_div.update({index: plot(res[graphs], output_type='div')})

        return render(request, 'account/user/IndFin/indfin_resultado.html', context={'plot_div': plot_div, "result": res})

Thus, I needed to change the HTML to:

{% for graphs in plot_div %}
    {{plot_div.graphs}}
{% endfor %}

But, as a result I get, in my webpage, the matrix result and the last graph again. No graphS at all, just the last one. Has anyone faced such problem before?

Thanks

I think this might help you out!

Jan Kees
– Jan Kees

2021-12-14 14:19:59 +00:00
Commented Dec 14, 2021 at 14:19 — Jan Kees
– Jan Kees, Commented Dec 14, 2021 at 14:19

Luiz · Accepted Answer · 2021-12-14 17:01:29Z

1

I think you need a list of dicts instead of a dict, something like

plot_div = [{index: plot(res[graphs], output_type='div')} for index, graphs in enumerate(res, 1)]
return render(request, 'account/user/IndFin/indfin_resultado.html', context={'plot_div': plot_div, "result": res})

And in your template

{% for plot in plot_div %}
    {{plot .output_type}}
{% endfor %}

answered Dec 14, 2021 at 17:01

Luiz

2,0659 silver badges17 bronze badges

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

Comments

Tommaso Iaquinta · Accepted Answer · 2023-02-20 21:53:18Z

0

It worked for me to create figure multiple times and passing them separately.

def index(request):
        figure1= fig.to_html()
        figure2= fig.to_html()
    
    return render(request, 'more.html', {'figure1':figure1,'figure2':figure2})

answered Feb 20, 2023 at 21:53

Tommaso Iaquinta

243 bronze badges

Collectives™ on Stack Overflow

How to display multiple Plotly graphs in a HTML webpage? (using plot_div)

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related