Range selector buttons

Dash Python
1

image
image.png1260×574 23.8 KB

I just want to create a display of the graph with the range sliders in the same way with html.Div functions.
I have already build some code and I am unable to continue further.Please help me if possible.Thanks in advance.

Here is the code I developed:

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

df = pd.read_csv(“haver_output.csv”)
df.rename(columns = {‘index’:‘Date’},inplace=True)

app = dash.Dash()

#reading the column names to features:
features = df.columns[2:len(df.columns)]
#print(features)

app.layout = html.Div([

            html.Div([
            dcc.Dropdown(id='yaxis',
                         options = [{'label':i,'value':i} for i in features],
                         value = 'pztexp')#
            ],style={'width':'48%'}),#
            
            html.Button('1m', id='button-1'),
            html.Button('6m', id='button-2'),
            html.Button('1y', id='button-3'),
            html.Button('3y', id='button-4'),
            
            dcc.Graph(id='feature-graphics')
    ],style={'padding':15})#

@app.callback(Output(‘feature-graphics’,‘figure’),
[Input(‘yaxis’,‘value’),
Input(‘button-1’,‘nclicks’)
])

def update_graph(yaxis_column_name,nclicks):
return {‘data’: [go.Scatter(x = df[“Date”],
y = df[yaxis_column_name],
mode = ‘lines+markers’,
marker={‘size’:5})
],
[go.Scatter(x = df[“Date”],
y = df[yaxis_column_name],
mode = ‘lines+markers’,
marker={‘size’:5})
]

    'layout':go.Layout(title = yaxis_column_name)}

if name == ‘main’:
app.run_server()