Black Lives Matter. Please consider donating to Black Girls Code today.

the whole page is being updated!

Hi,

i’m trying to read data from database (mysql) and plot a Live updated graph.

The user can choose a Period of time from ( year-month-day) to (year-month-day) and the refershing Time ( every minute , second , day)

The problem is that , the whole page ist being refreshed and the user can’t input the values

How can i solve this problem?

--------------------------------------------------------------------------------------------------------------------------------- code :

import dash

from dash.dependencies import Output, Event ,Input

import dash_core_components as dcc

import dash_html_components as html

import plotly

import plotly.graph_objs as go

import mysql.connaector

import pandas as pd

from datetime import datetime as dt

from datetime import timedelta

import flask

import os

max_date=dt(2018, 8, 5)

min_date=dt(2018, 8, 5)

app = dash.Dash(name)

app.layout =html.Div([

html.P(html.Label('Date Selection :')),

dcc.DatePickerRange(

    id='my-date-picker-range',

    min_date_allowed=dt.strptime(str(min_date),'%Y-%m-%d %H:%M:%S'),

    max_date_allowed=dt.strptime(str(max_date),'%Y-%m-%d %H:%M:%S'),

    initial_visible_month=dt(2018, 8, 5),

    end_date=dt.strptime(str(max_date),'%Y-%m-%d %H:%M:%S'),

    start_date=dt.strptime(str(min_date),'%Y-%m-%d %H:%M:%S')

),

   html.P(html.Label('Refreshing time:')),

   html.P(dcc.Input(id='input-1-state', type='text', value=10)),

   html.Button(id='submit-button', n_clicks=0, children='ok'),





html.Div([

    dcc.Graph(id='live-graph'),

    dcc.Interval(

        id='graph-update',

        interval=10*1000 ,

        n_intervals=0

        )]

        )

])

@app.callback(Output(‘live-graph’, ‘figure’),

         [Input('graph-update', 'n_intervals')])

def update_graph_scatter(n):

try:

    mydb = mysql.connector.connect(

      host="localhost",

      user="root",

      passwd="",

      database="abc"

    )

    print('update')

    mycursor = mydb.cursor()

    mycursor.execute("SELECT A0,A1,A2,Date FROM adc_signal ORDER BY Date DESC LIMIT 20")

    rows = mycursor.fetchall()

    str(rows)[0:5000]

    df = pd.DataFrame( [[ij for ij in i] for i in rows] )

    df.rename(columns={0: 'A0', 1: 'A1', 2: 'A2', 3: 'Date'}, inplace=True);

    df.sort_values('Date', inplace=True)

    X = df['Date']

    Y = df['A0']

    data = go.Scatter(

        x=X,

        y=Y,

         fill='tozeroy',

         mode= 'lines+markers',

        line=dict(shape='spline'),

        marker = {

            'size': 2,

            'color': 'rgb(39, 108, 221)',

            'symbol':'pentagon',

            'line': {'width': 5}

            }

)





    return {'data': [data],'layout' : go.Layout(

        title = 'Channel1',

        xaxis = {'title': 'Time'},

        yaxis = {'title': 'Value'},

        hovermode='closest'

    )}



except Exception as e:

    with open('errors.txt','a') as f:

        f.write(str(e))

        f.write('\n')

css_directory = os.getcwd()

stylesheets = [‘stylesheet.css’]

static_css_route = ‘/static/’

@app.server.route(’{}’.format(static_css_route))

def serve_stylesheet(stylesheet):

if stylesheet not in stylesheets:

    raise Exception(

        '"{}" is excluded from the allowed static files'.format(

            stylesheet

        )

    )

return flask.send_from_directory(css_directory, stylesheet)

for stylesheet in stylesheets:

app.css.append_css({"external_url": "/static/{}".format(stylesheet)})

if name == ‘main’:

app.run_server(debug=True)

I am not sure if this can solve your problem, but did you try to set debug to False? in app.run_server(debug=True)