One way to do it would be to store the plot as a figure in the static folder of your Flask app folder structure and then display it on using an image reference in your html template. Something like this:
fig = df_b.plot.line(x='Date',y='Story Points Left',figsize=(10,5)).get_figure()
fig.savefig('static/plot.png')
However, this limits your flexibility to customize your chart as you need to convert it into an image file. Therefore, the better way to do it would be to use something like chart.js in your html template by passing the data frame.
You'd need to convert your data frame to something that's JSON serializable, since python data frames can't be serializable into JSON format. Since you have two columns, you could split them into two lists like this.
date_list = df_b['Date'].tolist()
sp_list = df_b['SPs_Left'].tolist()
And then pass it like this.
return render_template('output_burndown.html', date_list=date_list, sp_list=sp_list)
You'd then need to convert your lists to JSON using the tojson command and use those as the data for your graph.
<canvas id="myChart"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: {{ date_list|tojson }},
datasets: [{
label: "burndown",
data: {{ sp_list|tojson }},
borderColor: "#3e95cd",
}]
},
options: {}
});
</script>
More on chart.js can be found here
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
