Graph state resets after page refresh & size changes when extending graph (SQLALCHEMY)

@Iwas wrote:

Hello,

I am trying to add a feature where I have several input components which will be added to a sqlalchemy database and update a graph based on calculations of that input. Everything works but my problem is that if I refresh the page the graph is set back to where it was when I ran the server.

Only after I shut down and re-run the server the graph is updated with the new inputs. Is it possible that a I can refresh the page and keep the state of the graph from the current session?

Another problem is that when I give input to the graph and update it, the size of the graph shrinks. Is there a way to fix the graph size so id doesn’t change even if I add more data points? I tryed to set the height but that doesn’t prevent the graph from shrinking when I update it with new data points.

Layout:

dbc.Row(
	[
		dbc.Col(html.Div(dcc.Graph(id='bmi-graph',
				figure={'data':[

						go.Scatter(y=[i[0] for i in BMI.query.with_entities(BMI.bmi_val).all()])

				],'layout':go.Layout(
												xaxis = dict(showgrid=False,showticklabels=False,zeroline=False),
												yaxis = dict(title='BMI',showgrid=False,showticklabels=False),
												hovermode='closest',
												template = "plotly_white",
												height=300,
												margin = go.layout.Margin(t=0)
												#width=490,
																)},

												config={
														'displayModeBar': False
														})),width=4),
		dbc.Col(html.Div(
												html.Div([
												html.Div(dcc.Input(id='input-height', type='number', debounce=True, min=1, step=1, placeholder=f"{height} cm")),
												html.Div(dcc.Input(id='input-weight', type='number', debounce=True, min=1, step=1, placeholder=f"{weight} kg")),
												dbc.Button('calculate bmi',id='button',color='dark',className='mr-1',style={'marginTop':'5px'}),
												#html.Button('Calculate BMI', id='button'),
												html.Div(id='bmi-alert',style={'width':'200px'})
														])
					),width=2)])

callback:

@app.callback(Output('bmi-graph','figure'),
                [Input('button','n_clicks')],
                [State('input-height','value'),
                State('input-weight','value')])

def update_graph(n_clicks,height,weight):

    bmi = round(float(weight)/((float(height)/100)**2))

    user = BMI(bmi_val=bmi)
    db.session.add(user)
    db.session.commit()

    query = BMI.query.with_entities(BMI.bmi_val).all()
    bmis = [i[0] for i in query]

    figure = {'data':[

            go.Scatter(y=bmis),

        ],'layout':go.Layout(
                    xaxis = dict(showgrid=False,showticklabels=False,zeroline=False),
                    yaxis = dict(title='BMI',showgrid=False,showline=False),
                    hovermode='closest',
                    template = "plotly_white",
                    height=300
        )}

    return figure

Would be glad to get some help!

Posts: 1

Participants: 1

Read full topic