I have two versions (if that is a good way to describe it) of a python file, intended to print a bar chart (using mpld3) on a webpage. One version works, while the other (which would print the bar chart as I want it) does not work. Specifically, what the index function returns in each python "version" is different. Why does one "returned value" cause a bar chart to print and the other does not?
(To briefly explain what my program should do: There's data in a SQLite3 table that gets extracted into a python variable, and I want to use it to create a bar chart using mpld3. The bar chart should have, on the x-axis, names of different side effects caused by a cancer medication, and on the y-axis there should be the percentages of occurrence of each of those side effects.)
Being a beginner, please excuse my (potentially very basic) mistakes. Thank you.
Here's the python code where the returned value works and prints a bar chart. Now what is returned here is html that contains a generated bar chart:
import os
import matplotlib.pyplot as plt
import numpy as np
import mpld3
from cs50 import SQL
from flask import Flask, flash, jsonify, redirect, render_template,
request, session
from flask_session import Session
from tempfile import mkdtemp
from werkzeug.exceptions import default_exceptions, HTTPException,
InternalServerError
import sqlite3
app = Flask(__name__)
app.config["TEMPLATES_AUTO_RELOAD"] = True
app.config["SESSION_FILE_DIR"] = mkdtemp()
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_TYPE"] = "filesystem"
Session(app)
db = SQL("sqlite:///cancermeds.db")
@app.route("/", methods=["GET", "POST"])
def index():
if request.method=="POST":
selection = request.form.get("cancerlist")
if selection == "breast cancer":
rows = db.execute("SELECT * FROM 'breast cancer'")
for row in rows:
keys = list(row.keys())
del keys[16:19]
print(keys)
values = list(row.values())
del values[16:19]
print(values)
fig, ax = plt.subplots()
fig = plt.figure(figsize=(7,6))
ax = plt.bar(keys, values, width=0.5)
plt.xlabel("Side Effects")
plt.ylabel("Percentages of Occurence of Side
Effects")
plt.title("Bar Chart showing Side Effects of Breast
Cancer Medication(s) With Their Corrresponding Percentages Of
Occurence")
fig = ax[0].figure
bar_chart = mpld3.fig_to_html(fig)
return '''<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>''' + bar_chart + '''</body>
</html>'''
else:
return render_template("index.html")
if __name__ == '__main__':
app.run(debug=True)
The following code does not create the bar chart I want to create, because what is returned to the function does not work, and I do not understand why. Here's the code:
import os
import matplotlib.pyplot as plt
import numpy as np
import mpld3
from cs50 import SQL
from flask import Flask, flash, jsonify, redirect, render_template,
request, session
from flask_session import Session
from tempfile import mkdtemp
from werkzeug.exceptions import default_exceptions, HTTPException,
InternalServerError
import sqlite3
app = Flask(__name__)
app.config["TEMPLATES_AUTO_RELOAD"] = True
app.config["SESSION_FILE_DIR"] = mkdtemp()
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_TYPE"] = "filesystem"
Session(app)
db = SQL("sqlite:///cancermeds.db")
@app.route("/", methods=["GET", "POST"])
def index():
if request.method=="POST":
selection = request.form.get("cancerlist")
if selection == "breast cancer":
rows = db.execute("SELECT * FROM 'breast cancer'")
for row in rows:
keys = list(row.keys())
del keys[16:19]
print(keys)
values = list(row.values())
del values[16:19]
print(values)
fig, ax = plt.subplots()
fig = plt.figure(figsize=(7,6))
ax = plt.bar(keys, values, width=0.5)
plt.xlabel("Side Effects")
plt.ylabel("Percentages of Occurence of Side
Effects")
plt.title("Bar Chart showing Side Effects of Breast Cancer Medication(s) With Their Corrresponding Percentages Of Occurence")
fig = ax[0].figure
bar_chart = mpld3.fig_to_html(fig)
return render_template("breastcancer.html", bar_chart =
bar_chart)
else:
return render_template("index.html")
if __name__ == '__main__':
app.run(debug=True)
And here is the breastcancer.html file I referred to that is supposed to be returned in the index function in the latter code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<title>Chemotherapy Comparison Website</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min
.css" rel="stylesheet">
<link href="/static/favicon.ico" rel="icon">
<link href="/static/styles.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<h2>
Chemotherapy Comparison Website
</h2>
<h3>
Breast Cancer Page
</h3>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="chart-display-col" col="col-md-6">
{{bar_chart}}
</div>
<div id="info-display-col" col="col-md-6">
</div>
</div>
</div>
</body>
In the html code I showed above, by typing {{bar_chart}} , I expect the bar chart to diplay on the webpage. Instead, what I get displayed is what seems to be many lines of code. I'll paste part of them below, and sorry for not posting all of it, since there are so many lines that they exceeded the maximum allowed body size for this question :
<style> </style> <div id="fig_el59641396267905660961816143295">
</div> <script> function mpld3_load_lib(url, callback){ var s =
document.createElement('script'); s.src = url; s.async = true;
s.onreadystatechange = s.onload = callback; s.onerror = function()
{console.warn("failed to load library " + url);};
document.getElementsByTagName("head")[0].appendChild(s); }
if(typeof(mpld3) !== "undefined" && mpld3._mpld3IsLoaded){ //
already loaded: just create the figure !function(mpld3){
mpld3.draw_figure("fig_el59641396267905660961816143295", {"width":
700.0, "height": 600.0, "axes": [{"bbox": [0.125,
0.10999999999999999, 0.775, 0.77], "xlim": [-1.025, 16.025],
"ylim": [0.0, 52.5], "xdomain": [-1.025, 16.025], "ydomain": [0.0,
52.5], "xscale": "linear", "yscale": "linear", "axes":
[{"position": "bottom", "nticks": 16, "tickvalues": null,
"tickformat": null, "scale": "linear", "fontsize": 10.0, "grid":
{"gridOn": false}, "visible": true}, {"position": "left", "nticks":
7, "tickvalues": null, "tickformat": null, "scale": "linear",
"fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}],
"axesbg": "#FFFFFF", "axesbgalpha": null, "zoomable": true, "id":
"el5964139626790567160", "lines": [], "paths": [{"data": "data01",
"xindex": 0, "yindex": 1, "coordinates": "data", "pathcodes": ["M",
"L", "L", "L", "Z"], "id": "el5964139626787673648", "dasharray":
"none", "alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data02", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787673144", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data03", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787675104", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data04", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787675888", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data05", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787675944", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data06", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787726672", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data07", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787727456", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data08", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787728240", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data09", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787729024", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data04", "xindex": 2,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787729304", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data10", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787775712", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data09", "xindex": 2,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787776496", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data11", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787777280", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data12", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787778064", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data13", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787778344", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data14", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787837040", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}], "markers": [], "texts": [{"text":
"Side Effects", "position": [0.5, -0.06337181337181337],
"coordinates": "axes", "h_anchor": "middle", "v_baseline":
"hanging", "rotation": -0.0, "fontsize": 10.0, "color": "#000000",
"alpha": 1, "zorder": 3, "id": "el5964139626790622600"}, {"text":
"Percentages of Occurence of Side Effects", "position":
[-0.06065028161802356, 0.5], "coordinates": "axes", "h_anchor":
"middle", "v_baseline": "auto", "rotation": -90.0, "fontsize":
10.0, "color": "#000000", "alpha": 1, "zorder": 3, "id":
"el5964139626790623608"}, {"text": "Bar Chart showing Side Effects
of Breast Cancer Medication(s) With Their Corrresponding
Percentages Of Occurence", "position": [0.5, 1.018037518037518],
"coordinates": "axes", "h_anchor": "middle", "v_baseline": "auto",
"rotation": -0.0, "fontsize": 12.0, "color": "#000000", "alpha": 1,
"zorder": 3, "id": "el5964139626790701712"}], "collections": [],
"images": [], "sharex": [], "sharey": []}], "data": {"data01":
[[-0.25, 0.0], [0.25, 0.0], [0.25, 24.0], [-0.25, 24.0]], "data02":
[[0.75, 0.0], [1.25, 0.0], [1.25, 8.0], [0.75, 8.0]], "data03":
[[1.75, 0.0], [2.25, 0.0], [2.25, 40.0], [1.75, 40.0]], "data04":
[[2.75, 0.0, 8.75], [3.25, 0.0, 9.25], [3.25, 19.0, 9.25], [2.75,
19.0, 8.75]], "data05": [[3.75, 0.0], [4.25, 0.0], [4.25, 10.0],
[3.75, 10.0]], "data06": [[4.75, 0.0], [5.25, 0.0], [5.25, 50.0],
[4.75, 50.0]], "data07": [[5.75, 0.0], [6.25, 0.0], [6.25, 14.0],
[5.75, 14.0]], "data08": [[6.75, 0.0], [7.25, 0.0], [7.25, 1.0],
[6.75, 1.0]], "data09": [[7.75, 0.0, 10.75], [8.25, 0.0, 11.25],
[8.25, 0.0, 11.25], [7.75, 0.0, 10.75]], "data10": [[9.75, 0.0],
[10.25, 0.0], [10.25, 28.0], [9.75, 28.0]], "data11": [[11.75,
0.0], [12.25, 0.0], [12.25, 31.0], [11.75, 31.0]], "data12":
[[12.75, 0.0], [13.25, 0.0], [13.25, 32.0], [12.75, 32.0]],
"data13": [[13.75, 0.0], [14.25, 0.0], [14.25, 0.3], [13.75, 0.3]],
"data14": [[14.75, 0.0], [15.25, 0.0], [15.25, 1.8], [14.75,
1.8]]}, "id": "el5964139626790566096", "plugins": [{"type":
"reset"}, {"type": "zoom", "button": true, "enabled": false},
{"type": "boxzoom", "button": true, "enabled": false}]}); }(mpld3);
}else if(typeof define === "function" && define.amd){ // require.js
is available: use it to load d3/mpld3 require.config({paths: {d3:
"https://mpld3.github.io/js/d3.v3.min"}}); require(["d3"],
function(d3){ window.d3 = d3;
mpld3_load_lib("https://mpld3.github.io/js/mpld3.v0.3.js",
function(){
mpld3.draw_figure("fig_el59641396267905660961816143295", {"width":
700.0, "height": 600.0, "axes": [{"bbox": [0.125,
0.10999999999999999, 0.775, 0.77], "xlim": [-1.025, 16.025],
"ylim": [0.0, 52.5], "xdomain": [-1.025, 16.025], "ydomain": [0.0,
52.5], "xscale": "linear", "yscale": "linear", "axes":
[{"position": "bottom", "nticks": 16, "tickvalues": null,
"tickformat": null, "scale": "linear", "fontsize": 10.0, "grid":
{"gridOn": false}, "visible": true}, {"position": "left", "nticks":
7, "tickvalues": null, "tickformat": null, "scale": "linear",
"fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}],
"axesbg": "#FFFFFF", "axesbgalpha": null, "zoomable": true, "id":
"el5964139626790567160", "lines": [], "paths": [{"data": "data01",
"xindex": 0, "yindex": 1, "coordinates": "data", "pathcodes": ["M",
"L", "L", "L", "Z"], "id": "el5964139626787673648", "dasharray":
"none", "alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data02", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787673144", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data03", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787675104", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data04", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787675888", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data05", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787675944", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data06", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787726672", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data07", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787727456", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data08", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787728240", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data09", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787729024", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data04", "xindex": 2,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787729304", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data10", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787775712", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data09", "xindex": 2,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787776496", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data11", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787777280", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data12", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787778064", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data13", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787778344", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data14", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787837040", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}], "markers": [], "texts": [{"text":
"Side Effects", "position": [0.5, -0.06337181337181337],
"coordinates": "axes", "h_anchor": "middle", "v_baseline":
"hanging", "rotation": -0.0, "fontsize": 10.0, "color": "#000000",
"alpha": 1, "zorder": 3, "id": "el5964139626790622600"}, {"text":
"Percentages of Occurence of Side Effects", "position":
[-0.06065028161802356, 0.5], "coordinates": "axes", "h_anchor":
"middle", "v_baseline": "auto", "rotation": -90.0, "fontsize":
10.0, "color": "#000000", "alpha": 1, "zorder": 3, "id":
"el5964139626790623608"}, {"text": "Bar Chart showing Side Effects
of Breast Cancer Medication(s) With Their Corrresponding
Percentages Of Occurence", "position": [0.5, 1.018037518037518],
"coordinates": "axes", "h_anchor": "middle", "v_baseline": "auto",
"rotation": -0.0, "fontsize": 12.0, "color": "#000000", "alpha": 1,
"zorder": 3, "id": "el5964139626790701712"}], "collections": [],
"images": [], "sharex": [], "sharey": []}], "data": {"data01":
[[-0.25, 0.0], [0.25, 0.0], [0.25, 24.0], [-0.25, 24.0]], "data02":
[[0.75, 0.0], [1.25, 0.0], [1.25, 8.0], [0.75, 8.0]], "data03":
[[1.75, 0.0], [2.25, 0.0], [2.25, 40.0], [1.75, 40.0]], "data04":
[[2.75, 0.0, 8.75], [3.25, 0.0, 9.25], [3.25, 19.0, 9.25], [2.75,
19.0, 8.75]], "data05": [[3.75, 0.0], [4.25, 0.0], [4.25, 10.0],
[3.75, 10.0]], "data06": [[4.75, 0.0], [5.25, 0.0], [5.25, 50.0],
[4.75, 50.0]], "data07": [[5.75, 0.0], [6.25, 0.0], [6.25, 14.0],
[5.75, 14.0]], "data08": [[6.75, 0.0], [7.25, 0.0], [7.25, 1.0],
[6.75, 1.0]], "data09": [[7.75, 0.0, 10.75], [8.25, 0.0, 11.25],
[8.25, 0.0, 11.25], [7.75, 0.0, 10.75]], "data10": [[9.75, 0.0],
[10.25, 0.0], [10.25, 28.0], [9.75, 28.0]], "data11": [[11.75,
0.0], [12.25, 0.0], [12.25, 31.0], [11.75, 31.0]], "data12":
[[12.75, 0.0], [13.25, 0.0], [13.25, 32.0], [12.75, 32.0]],
"data13": [[13.75, 0.0], [14.25, 0.0], [14.25, 0.3], [13.75, 0.3]],
"data14": [[14.75, 0.0], [15.25, 0.0], [15.25, 1.8], [14.75,
1.8]]}, "id": "el5964139626790566096", "plugins": [{"type":
"reset"}, {"type": "zoom", "button": true, "enabled": false},
{"type": "boxzoom", "button": true, "enabled": false}]}); }); });
}else{ // require.js not available: dynamically load d3 & mpld3
mpld3_load_lib("https://mpld3.github.io/js/d3.v3.min.js",
function(){
mpld3_load_lib("https://mpld3.github.io/js/mpld3.v0.3.js",
function(){
mpld3.draw_figure("fig_el59641396267905660961816143295", {"width":
700.0, "height": 600.0, "axes": [{"bbox": [0.125,
0.10999999999999999, 0.775, 0.77], "xlim": [-1.025, 16.025],
"ylim": [0.0, 52.5], "xdomain": [-1.025, 16.025], "ydomain": [0.0,
52.5], "xscale": "linear", "yscale": "linear", "axes":
[{"position": "bottom", "nticks": 16, "tickvalues": null,
"tickformat": null, "scale": "linear", "fontsize": 10.0, "grid":
{"gridOn": false}, "visible": true}, {"position": "left", "nticks":
7, "tickvalues": null, "tickformat": null, "scale": "linear",
"fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}],
"axesbg": "#FFFFFF", "axesbgalpha": null, "zoomable": true, "id":
"el5964139626790567160", "lines": [], "paths": [{"data": "data01",
"xindex": 0, "yindex": 1, "coordinates": "data", "pathcodes": ["M",
"L", "L", "L", "Z"], "id": "el5964139626787673648", "dasharray":
"none", "alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data02", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787673144", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data03", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787675104", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data04", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787675888", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data05", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787675944", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data06", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787726672", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data07", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787727456", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data08", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787728240", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data09", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787729024", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data04", "xindex": 2,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787729304", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data10", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787775712", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data09", "xindex": 2,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787776496", "dasharray": "none",
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none",
"edgewidth": 1.0, "zorder": 1}, {"data": "data11", "xindex": 0,
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L",
"L", "Z"], "id": "el5964139626787777280", "dasharray": "none",
...........
1.8]]}, "id": "el5964139626790566096", "plugins": [{"type":
"reset"}, {"type": "zoom", "button": true, "enabled": false},
{"type": "boxzoom", "button": true, "enabled": false}]}); }) }); }
</script>
Thank you for your help.
For security reason template converts some chars which have special meaning in HTML.
If you want to put HTML (and not display it as text) then you have to inform template that this is safe HTML.
{{ bar_chart|safe }}