Range slider on live data

Dash Python
1

0

I’m new to dash and python, I’m trying to add a range slider for my live graph. i.e : Range Slider and Selector | Python | Plotly

I’m confused on how to use the rangeslider component. I got this error :

"Invalid argument value[0] passed into RangeSlider with ID “slider”. Expected number .

Failed component prop type: Invalid component prop min of type string supplied to function n(){return function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,n),s(this,g(n).apply(this,arguments))} Was supplied type string ." and “Callback error updating live-graph.figure - TypeError: update_graph_scatter() takes 1 positional argument but 2 were given”

should I build another function for the slider ?

import dash
from dash.dependencies import Output, Input
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import sqlite3
import pandas as pd
import ccxt
import plotly


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

ftx = ccxt.ftx({'verbose': True})
ftx = ccxt.ftx({
    'apiKey': '',
    'secret': '',

    
})

conn1 = sqlite3.connect('ftx1.db')
c = conn1.cursor()
dfx = pd.read_sql("SELECT * FROM result ORDER BY time DESC LIMIT 1000", conn1)

app.layout = html.Div(
    [   html.H1('Dashboard'),
        html.H2(children="PnL's Analytics"),
        html.P(
            children="Analyze the daily PnL's of your positions"),
        dcc.Graph(id='live-graph'),
        dcc.Interval(
            id='graph-update',
            interval=1*10000,
            n_intervals=0
        ),

        dcc.RangeSlider(
        id='slider',
        min = dfx['time'].min(),
        max = dfx['time'].max(),
        value=[dfx.iloc[-101]['time'], dfx.iloc[-1]['time']]
    ),
        
        html.Div([
        html.H4('FTX Live Feed'),
        html.Div(id='live-update-text'),
        # dcc.Graph(id='live-update-graph'),
        dcc.Interval(
            id='interval-component',
            interval=1*10000, # in milliseconds
            n_intervals=0
        ),
    ]),
        #subaccount 
        html.Div([
            html.Div([
                html.H4(children = 'Live PnL Sub-account' , style = {'color':'#fff' , 'backgroundColor':"#18191c"}),
                dcc.Graph(id = 'fig_1'),
                dcc.Interval(id = 'fig_1_update' ,interval=1*10000 , n_intervals = 0)
                ],
            ),

            html.Div([
            html.H4('FTX2 Live Feed'),
            html.Div(id='live-update-pnl'),
            dcc.Interval(
            id='interval-update',
            interval=1*10000, # in milliseconds
            n_intervals=0
                ),
            ]),
        ], 
    ),
        
    ],
     #close the layout
)


@app.callback(Output('live-update-text', 'children'),
              [Input('interval-component', 'n_intervals')])


def update_metrics(n):
    conn = sqlite3.connect('ftx1.db')
    dp = pd.read_sql("SELECT pnl FROM result ORDER BY time DESC LIMIT 1", conn)
    pc = pd.read_sql("SELECT pnl FROM result WHERE time > datetime('now', '-24 hours') LIMIT 1", conn)
    ap = pd.read_sql("SELECT pnl FROM result ORDER BY time DESC LIMIT 1", conn)
    maxPrice = pd.read_sql("SELECT MAX(pnl) FROM result WHERE time > datetime('now', '-24 hours') LIMIT 1", conn)
    minPrice = pd.read_sql("SELECT MIN(pnl) FROM result WHERE time > datetime('now', '-24 hours') LIMIT 1", conn)
    
    pp = pc.pnl[0]
    afp = ap.pnl[0]
    dx = afp - pp
    pc = (dx/pp)*100

    actualp = dp.pnl[0]

    maxP = maxPrice["MAX(pnl)"][0]
    minP = minPrice["MIN(pnl)"][0]



    style = {'padding': '5px', 'fontSize': '16px'}
    return [
        html.Span('Balance: ${0:.2f}'.format(actualp), style=style),
        html.Span('| 24h PnL: ${0:.2f}'.format(dx), style=style),
        html.Span('| PnL %: {0:.2f}'.format(pc), style=style),
        html.Span('| Max PnL 24h: ${0:.2f}'.format(maxP), style=style),
        html.Span('| Min PnL 24h: ${0:.2f}'.format(minP), style=style)
    ]

@app.callback(Output('live-graph', 'figure'),
              [Input('graph-update', 'n_intervals'),
              Input('slider', 'value')])



def update_graph_scatter(n):
    try:
        conn = sqlite3.connect('ftx1.db')
        c = conn.cursor()
        df = pd.read_sql("SELECT * FROM result ORDER BY time DESC LIMIT 1000", conn)

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

        # df['sentiment_smoothed'] = df['sentiment'].rolling(int(len(df)/5)).mean()
        df.dropna(inplace=True)

        tim = -500
        pp = -500
        X = df.time.values[tim:]
        Y = df.pnl[pp:]


        data = plotly.graph_objs.Scatter(
                x=X,
                y=Y,
                name='Scatter',
                mode= 'lines+markers',
                marker_color='rgba(249, 166, 2, .8)'
                )

        return {'data': [data],'layout' : go.Layout(xaxis=dict(range=[min(X),max(X)]),
                                                    yaxis=dict(range=[min(Y),max(Y)]),title='FTX Main',)}

     

    except Exception as e:
        with open('errors.txt','a') as f:
            #add time of error
            f.write(str(e))
            f.write('\n



if __name__ == '__main__':
    app.run_server(debug=True, host='0.0.0.0', port='8050')

here is the sqlite db : image of the sql database

format : pnl : float time : text