How to integrate plotly.express chart to flask app? - web

Question

There is a simple flask app which writes statistics-table from db to a page. How can I plot plotly.express chart on this page?
Code for chart that I want to integrate to a flask app: (took from https://plotly.com/python/time-series/)
# Using plotly.express
import plotly.express as px
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/...')
fig = px.line(df, x='Date', y='AAPL.High')
fig.show()

Answer 1

There need to be more answers floating around out there that actually show how to do this without using dash. I will share my working example of using plotly.express and flask. I'll cut out most of the data work and figure building to just show what you need to do.
Imports needed
You'll need these in addition to your usual px and flask imports.
from plotly import utils
from json import dumps
Short Explanation: JSON and Plotly.js are key
I use pandas to get a dataframe in a function called get_data and get a scatter plot with lines connected with a function called get_lfig. The only important thing to note here is that get_lfig is returning a figure generated from px.scatter() but it can be any figure. Now the trick here is to turn your figure into a JSON and use it on the template side somewhere, you don't do much in python.
Example 1: Create the fig, JSON and pass it to the template
Altogether it looks something like this
from flask import Flask, render_template
from extensions import get_data, get_lfig
from plotly import utils
from json import dumps
app = Flask(__name__)
#app.route('/')
def home():
# function that get data, private and public sets
days=2
priv_data, pub_data= get_data(hours=24*days)
# function that returns a px.scatter figure
all_pub_fig = get_lfig(pub_data)
# turn the figure into a JSON then pass it to the template
all_pub_json = dumps(all_pub_fig, cls=utils.PlotlyJSONEncoder)
return render_template('graph.html', pub_lines_JSON=all_pub_json)
if __name__ == '__main__':
app.run(debug=True, port=8080, host='0.0.0.0')
On the template side, you want to include the src for plotly.js somewhere and then just use the Plotly.plot() function to populate your graph in a div.
<!-- somewhere up top -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
...
<h3>Line Graph Representation</h3>
<!-- scatter plot goes in this div -->
<div id='all-pub-graph'></div>
<script type="text/javascript">
// here is where the JSON gets plugged in via JS
var the_pubs_graph = {{pub_lines_JSON | safe}};
// you target the graph div id in the first arg,
// put your graph in the second, and set the third as {}
Plotly.plot("all-pub-graph", the_pubs_graph, {});
</script>
Example 2: Create the JSON, send it to JS fetch request
Knowing you just want a JSON of your figure, you can take this further and handle it in all JS without having to pass it to the template directly.
Here I handle a post request from on-page selectors that make an api call every time they're changed. The get_lfig function now returns a JSON of the figure instead of a figure object.
#app.route('/get-graphs', methods=['POST'])
def get_graphs():
if request.method == 'POST':
# This whole block is just form handling and data stuff
form = dict(request.form)
agg_func = form['agg_func']
days = int(form['days'])
interval = int(form['interval'])
if (len(agg_func) > 0) and (interval != 0):
pub, priv = get_data(hours=24*days, interval=interval, agg_func=agg_func)
else:
pub, priv = get_data(hours=24*days)
# get JSON figures from the data
pub_f, priv_f = get_lfig(pub), get_lfig(priv)
return {'public': pub_f, 'private': priv_f}
On the template side I use an event listener attached to a form so every time I make a change the graphs get updated. I still need the JS function to be able to find the url, so I pass it to the function using url_for() since utils.js isn't being rendered and can't take advantage of that same template functionality.
<div id="selectors">
<form id="graph-selectors" method="post" onchange="selector_changed('{{url_for('get_graphs')}}')">
<label for="day-selector">Days</label>
<select name="days" id="day-selector">
{% for opt in range(1,10) %}
<option value={{opt}}>{{opt}}</option>
{% endfor %}
</select>
<label for="function-selector">Aggregate Func</label>
<select name="agg_func" id="function-selector">
{% for opt in ['','mean','sum','min','max','std','count'] %}
<option value="{{opt}}">{{opt}}</option>
{% endfor %}
</select>
<label for="interval-selector">Aggregate Interval</label>
<select name="interval" id="interval-selector">
{% for opt in [0, 5, 10, 30, 60] %}
<option value={{opt}}>{{opt}} minutes</option>
{% endfor %}
</select>
</form>
</div>
<div id="content">
<div id="graph-section"></div>
</div>
<script src="{{ url_for('static', filename='utils.js') }}"></script>
then finally, the selector_changed function that makes an API call is stored in my utils.js and looks like this
// I just use this so it clears existing graphs between changes
const clearChildren = (parent) => {
while (parent.lastChild) {
parent.removeChild(parent.lastChild);
}
}
async function selector_changed(gUrl) {
// get the form data
var form_data = new FormData(document.querySelector('form#graph-selectors'))
// send it to get_graphs()
let response = await fetch(gUrl, {
method: "POST",
body: form_data
});
// get_graphs() returns the figure's JSON
let graphJSONs = await response.json();
// declare and clear the target area graphs will go in
var target_area = document.getElementById('graph-section');
clearChildren(target_area);
// create the public server graph section
var pub_area = document.createElement('div');
var pub_header = document.createElement('h3');
var pub_graph = JSON.parse(graphJSONs['public']);
pub_header.textContent = "Public Servers";
pub_area.id = 'public-graphs';
// create the private server graph section
var priv_area = document.createElement('div');
var priv_header = document.createElement('h3');
var priv_graph = JSON.parse(graphJSONs['private']);
priv_header.textContent = "Internal Servers";
priv_area.id = 'private-graphs';
// add everything to the page
target_area.append(pub_area); // start w/the divs
target_area.append(priv_area);
Plotly.plot(pub_area.id, pub_graph, {}); // then add the graphs
Plotly.plot(priv_area.id, priv_graph, {});
pub_area.prepend(pub_header); // then add the headers
priv_area.prepend(priv_header);
}
This is a lot of code, but I wanted to show two ways to handle this which are:
Creating a JSON and passing it to the template directly, and
Handling it as an API call that responds to fetch requests.
The second option is faster and you don't have to refresh the entire page every time, the first option was just showing how to do it with as little code as possible. Either way there should be enough here to modify to your needs and for my future reference. (:

Answer 2

i think to do this is a little more complicated to just call a fig.show(), take a fast look in the ploty lib i found this packet import dash_html_components as html with this you can return a html with your chart to put in web site,
from flask import Flask
app = Flask(__name__)
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd
#app.route('/chart')
def chart():
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/...')
fig = px.line(df, x='Date', y='AAPL.High')
return html.Div([dcc.Graph(figure=fig)])