<div id="readability-page-1" class="page"><div>
<p>It’s difficult to find explanation on how we can render plotly chart on flask + jinja, so I’m sharing my code snippets.</p>



<p>First, in python, given a figure, turn that into json response of flask.</p>


<div><pre title="">import plotly
from flask import Response, jsonify
import json  # It's never "from flask import json"

def func(chart_name):
  ... generate necessary chart and save it to fig ...
  return jsonify(json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder))
</pre></div>


<p>The chart data will be served via /get_chart/&lt;chart_name&gt;</p>


<div><pre title="">    @app.route("/get_chart/&lt;string:chart_name&gt;")
    def get_chart(chart_name: str):
        return &lt;here, return the json from the func&gt;
</pre></div>


<p>Prepare js code that can render the given json. Following code inserts a div to be filled with a chart. Chart data comes from /get_chart/&lt;name&gt;.</p>


<div><pre title="">function fetchAndRenderChart(name) {
    const parentTag = document.currentScript.parentElement;
    const chartDiv = document.createElement("div");
    chartDiv.alt = name;
    const uniqueId =
        "plotly-chart-" + Math.random().toString(36).substring(2, 9);  # unique id for the div
    chartDiv.id = uniqueId;
    parentTag.appendChild(chartDiv);
    fetch(`/get_chart/${name}`)
        .then((response) =&gt; response.json())
        .then((data) =&gt; {
            let plotData = JSON.parse(data);
            Plotly.newPlot(uniqueId, plotData.data, plotData.layout, {
                responsive: true,  # responsive to the browser width
            });
        });
}
</pre></div>


<p>Now in your html, load relevant scripts:</p>


<div><pre title="">&lt;head&gt;
  ...
  &lt;script src="https://cdn.plot.ly/plotly-latest.min.js"&gt;&lt;/script&gt;
  &lt;script src="....&lt;path to fetchAndRenderChart of the above&gt;..."&gt;&lt;/script&gt;
&lt;/head&gt;
</pre></div>


<p>Now, whenever you need a chart, render it as below. Note that js code looks for a parent to insert a child div. I’m using &lt;p&gt;…&lt;/p&gt;. You will need one.</p>


<div><pre title="">    &lt;p&gt;
        &lt;script&gt;fetchAndRenderChart("{{ CHART_KEYS.BITCOIN_PROCESSED }}");&lt;/script&gt;
    &lt;/p&gt;
</pre></div>


<p>For better speed, I’m storing response of /get_chart/&lt;chart_name&gt;  output in the redis using <a href="https://flask-caching.readthedocs.io/en/latest/">https://flask-caching.readthedocs.io/en/latest/</a> which is reloaded whenever I update dataset of my website.</p>




</div></div>

Passion is like genius; a miracle.

It’s difficult to find explanation on how we can render plotly chart on flask + jinja, so I’m sharing my code snippets. First, in python, given a figure, turn that into json response of flask. The chart data will be served via /get_chart/<chart_name> Prepare js code that can render the given json. Following code inserts […]

Interactive plotly charts on jinja2 + flask

댓글