Get individual graphs from Plotly using Flask and Python

Question

I am trying to show graphs made in plotly on a webpage served by flask.

The way it is set up now, they both display on the same page, one on top of the other. I want to show them individually on different pages.

The solution I found for plotly displays all of the graphs made, and I'm not sure how to get individual graphs

My flask/python

graphs = [
    dict(
        data=[thetaGraph, deltaGraph, alphaGraph, betaGraph,gammaGraph ],
        layout=dict(
            title='Brain Data'
        )
    ),
    dict(
        data=[xGraph,yGraph,zGraph],
        layout=dict(
            title='Accelerometer Data'
        )
    ),
]

ids = ['graph-{}'.format(i) for i, _ in enumerate(graphs)]
graphJSON = json.dumps(graphs, cls=plotly.utils.PlotlyJSONEncoder)

return render_template('index.html', title='Home',ids=ids, graphJSON=graphJSON)

And then the webpage

<div class="container">
    <div class="row">
        <!-- LEFT SIDE -->
        <div class="col-6">
            {% for id in ids %}
            <div id="{{id}}"></div>
            {% endfor %}
        </div>
    </div>
</div>

<footer>
    <script type="text/javascript">
        var graphs = {{graphJSON | safe}};
        var ids = {{ids | safe}};
        for(var i in graphs) {
            Plotly.plot(ids[i], // the ID of the div, created above
                graphs[i].data,
                graphs[i].layout || {});
        }
    </script>
</footer>

Im unsure how to get just the first graph in that html, and then the second graph elsewhere on the page. Ive tried using {% for id in range(0,1) %} just to get the first element, or just putting <div id="{{ids[0]}}"></div> but I get 'ids' in undefined

When printing out ids i get ['graph-0', 'graph-1'] which means that this is a list and I should be able to index it, but apparently that is not a thing with flask. I'm sure there is some strange way that flask needs it similarly to it's ways of reading from 2D arrays

This might help: https://stackoverflow.com/questions/20233721/how-do-you-index-on-a-jinja-template — sjw, May 01 '18 at 17:10
Yeah that's a post I looked at earlier, for 2D lists. I'll give some of those a try real quick — clbx, May 01 '18 at 17:14
None of those seems to give me the output I want. They index through the entire lists, not just getting one element from it — clbx, May 01 '18 at 17:18

score 0 · Accepted Answer · answered May 01 '18 at 17:30

I was able to figure out a way to complete my task, but it does not involve indexing arrays. Since the javascript creates usable id's I am able to show individual graphs by simple referencing them

Replacing

<div class="col-6">
    {% for id in ids %}
    <div id="{{id}}"></div>
    {% endfor %}
</div>

With

<div class="col-6">
    <div id="graph-0"></div>
</div>

Gave me the outcome I was looking for

Get individual graphs from Plotly using Flask and Python

1 Answers1