Hello all, first post here!
Iām attempting to make a webapp for temperature data. one particular part is to view a temperature probeās temperature by months of all years.
in Jupyter, this snippet works wonderfully:
import plotly.figure_factory as ff
z=np.round(data_test_group_pivot.values[::-1],2)
x=list(data_test_group_pivot.columns)
y=list(data_test_group_pivot.index[::-1])layout_two = dict(title=ā128 TMR_SUB_18ā,
xaxis=dict(title=āMonthsā),
yaxis=dict(title=āYearsā)
)fig = go.Figure(data=ff.create_annotated_heatmap(z, x=x, y=y, font_colors=[āantiquewhiteā], hoverinfo=āy+x+zā),
layout=layout_two)fig.update_layout({ātitleā: {ātextā: ā128 Temperature Data: Months over Yearsā}})
fig.show()
however, when i try to incorporate it into my flask app:
hereās the snippet code, which also works in Jupyter Notebook:
best result in Jupyter
graph_two = []
import plotly.figure_factory as ff
z=np.round(df_all_rules_group_pivot.values[::-1],2)
x=list(df_all_rules_group_pivot.columns)
y=list(df_all_rules_group_pivot.index[::-1])
# fig = ff.create_annotated_heatmap(z, x=x, y=y, annotation_text=z, colorscale='Viridis')
layout_two = dict(title='128 TMR_SUB_18',
xaxis=dict(title='Months'),
yaxis=dict(title='Years')
)
fig_heatmap = go.Figure(data=ff.create_annotated_heatmap(z,
x=x,
y=y,
font_colors=['antiquewhite'],
hoverinfo='y+x+z'),
layout=layout_two)
graph_two.append(fig_heatmap)
figures = []
figures.append(dict(data=graph_two, layout=layout_two))
Figures is then returned which is handled in my routes.py:
from myapp import app
import json, plotly
from flask import render_template
from wrangling_scripts.wrangle_data import return_figures
@app.route('/')
@app.route('/index')
def index():
figures = return_figures()
# plot ids for the html id tag
ids = ['figure-{}'.format(i) for i, _ in enumerate(figures)]
# Convert the plotly figures to JSON for javascript in html template
figuresJSON = json.dumps(figures, cls=plotly.utils.PlotlyJSONEncoder)
return render_template('index.html',
ids=ids,
figuresJSON=figuresJSON)```
and index.html file has this:
<script type="text/javascript">
// plots the figure with id
// id much match the div id above in the html
var figures = {{figuresJSON | safe}};
var ids = {{ids | safe}};
for(var i in figures) {
Plotly.plot(ids[i],
figures[i].data,
figures[i].layout || {});
}
</script>
iāve used line charts, bar charts, scatters, and tables, but this is the first thing from plotly, iāve had trouble with.
any ideas?
)
