CODEWITHSUNDEEP
pythonflaskplotly
Dustin West
Dustin West

Reputation: 53

How to render a list of plotly plots using flask

I am looking to display multiple Plotly plots that are stored in a list. I have successfully created the plots and stored them in a list. But I am having a problem getting those plots to render.

I know the plots have been stored correctly because I have pulled each one out of the list to test them.

views.py

graphone = new_group_plots[0]
graphtwo = new_group_plots[1]
...
graphnine = new_group_plots[8]
graphten = new_group_plots[9]

And them display them.

plots.html

<div id="graphone">
        <script>
            var graphs = {{graphone | safe}};
            Plotly.plot('graphone',graphs,{});
        </script>
</div>
...
<div id="graphten">
        <script>
            var graphs = {{graphten | safe}};
            Plotly.plot('graphten',graphs,{});
        </script>
</div>

This leads me to believe that the issue I'm having is with my flask code.

There are a couple things I have already tried. 

{% for plot in new_group_plots %}

    {{ plot }}

{% endfor %}

I didn't expect this one to work because nothing is telling flask to render a plot. But I tried it to see what would happen. This displays the dictionary containing all the information that will be used to build the plot.

Here is what else I tried.

{% for plot in new_group_plots %}
    <div id="plot">
        <script>
            var graphs = {{plot | safe}};
            Plotly.plot('plot',graphs,{});
        </script>
    </div>
{% endfor %}

Nothing displayed when I tried this.

I have tried one final thing. When I am creating each plot, 'map' is the variable that stores the plot before it is added to the list.

{% for plot in new_group_plots %}
    <div id="map">
        <script>
            var graphs = {{map | safe}};
            Plotly.plot('map',graphs,{});
        </script>
    </div>
{% endfor %}

When I do this, only the final plot is displayed.

I can't figure out how to get all ten plots to display while they are still in the list. Any help would be greatly appreciated.

Upvotes: 2

Views: 1849

Answers (1)

Pasqui
Pasqui

Reputation: 621

I appreaciate you asked the question a long time ago. For what I can see, the problem relates to keeping the id names distinct as well as the variable names.

Here is a working example:

<body style="font-family:arial, sans-serif">
   <h1>{{header}}</h1>
   <h6><a href="/">Return to index page</a></h6>
   <div id="chart" class="chart"></div>
   <div>{{description}}</div>
   <div id="chart2"  class="chart"></div>
</body>

then:

<script type="text/javascript">

var graph = {{ graphJSON | safe}};

Plotly.newPlot('chart', graph, {});

<script type="text/javascript">
var graph2 = {{ graphJSON2 | safe}};

Plotly.newPlot('chart2', graph2, {});

Upvotes: 2

Related Questions