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

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

It cannot be done using Plot_div but it can be done using plotly enter link description here

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 %}
Back to Top