The following guide builds on the Flask App example in the Domino Documentation. In addition to being an example of how to utilize Flask and Plotly in Domino, this example also demonstrates how to utilize multiple app routes in a Domino Flask App.
For this example we'll be using Gapminder data to build two graphs.
Building off of the example in the Domino Documentation, we'll add a template for the styling of our page. data-explorer.html will be placed in the /templates subfolder of your app:
<!doctype html>
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function cb(selection) {
$.getJSON({
url: "{{url_for('gdp')}}", data: { 'data': selection }, success: function (result) {
Plotly.newPlot('chart', result, {staticPlot: true});;
}
});
$.getJSON({
url: "{{url_for('population')}}", data: { 'data': selection }, success: function (result) {
Plotly.newPlot('bar', result, {staticPlot: true});;
}
});
}
</script>
</head>
<body style="font-family:arial, sans-serif">
<h1>Exploring the Gapminder Dataset with Plotly</h1>
<h2>Choose your country</h2>
<select id="fname" onchange="cb(this.value)">
<option value="">Choose your Country</option>
<option value="Canada">Canada</option>
<option value="Germany">Germany</option>
<option value="Ireland">Ireland</option>
<option value="Mexico">Mexico</option>
<option value="Spain">Spain</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
<div id="chart" class="chart"></div>
<div id="bar" class="bar"></div>
</body>
</html>
Note carefully the use of url_for() in the above, which is needed to correctly add your project's path to the urls.
The views.py from the Domino Documentation example is modified to add the data-explorer.html template as the file that gets loaded when we view the homepage, and adds an app.route() for each of the two graphs being created. This file will also do the heavy lifting to generate our desired plots:
from flask_app import app
from flask import Flask, config, render_template, request
import pandas as pd
import json
import plotly
import plotly.express as px
####################################################
####################################################
@app.route('/')
def index():
return render_template('data-explorer.html', gdpGraph=gg(), popGraph=pg())
@app.route('/gdp', methods=['POST', 'GET'])
def gdp():
return gg(request.args.get('data'))
@app.route('/population')
def population():
return pg(request.args.get('data'))
####################################################
####################################################
def gg(country=''):
gdpData = px.data.gapminder().query("country == '" + country + "'")
fig = px.line(gdpData, x="year", y="gdpPercap", title=f'GDP Per Capita of {country}')
gdpGraph = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
return gdpGraph
def pg(country=''):
popData = px.data.gapminder().query("country == '" + country + "'")
fig = px.bar(popData, x='year', y='pop', color='lifeExp', height=400, title=f'Population and Life Expectancy in {country}')
popGraph = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
return popGraph
Once these files are saved and you launch your new App, you should be able to change countries in the dropdown list and start exploring this data:
Additional resources referenced when building this app:
An Interactive Web Dashboard with Plotly and Flask
Explore the Gapminder Dataset with Plotly Express
Comments
0 comments
Article is closed for comments.