How can I use multiple datasets in the dash app to visualize a graph?

Question

I am building a dash app. I want to viz a graph for crypto data (being extracted from APIs). The dash dropdowns contain different crypto ticker symbols & on that basis, I want to showcase different graphs. For e.g, if a user selects ETH in the dropdown, the API will extract the eth market price data & feeds it to the dash app so the user can see the graph, but I am struggling with using multiple datasets with the dropdowns.

So far, I think a dropdown is used to change the property of 1 dataset via changing rows, limits, etc. but unable to choose between multiple datasets.

I am looking for a method to show market price graphs for different cryptocurrencies through the dash app.

########################### Importing Libraries #############################################
import numpy as np 
import pandas as pd
from dash import dcc,html,Dash
import plotly.express as px
import warnings
warnings.filterwarnings("ignore")
from api_to_df import open_df,high_df,low_df,close_df,volume_df,mkt_cap_df
###########################################################################################

# Defining app name 
app = Dash(__name__)

colors = {
    'background': '#231F20',
    'text': '#ADD8E6'
}
############### Defining elements for dropdowns ####################################################

ticker_list = ['ETH', 'XRP','BTC','LTC','LRC','DOT','MANA','EGLD','SHIB','SOL','TFUEL','ICP','SAND','MATIC']
type_list = ['Open', 'High','Low','Close','Volume','Mkt cap']
currency_list  = ['USD']
############################################################################################################
markdown_text = '''

Koin is a webapp focussed at providing crypto coin data to crypto newbies in a simple yet elegant fashion.

'''

def generate_table(dataframe, max_rows=15):
    '''

    generate_table function is used to parse pandas dataframes into html tables.
    
    '''
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ])

#fig = px.bar(open_df, x="date", y="open",barmode = "group")
fig = px.line(open_df, x="date", y="open",markers = 1)

# Updating the layout of the figure 
fig.update_layout(
    plot_bgcolor=colors['background'],
    paper_bgcolor=colors['background'],
    font_color=colors['text']
)

#fig.update_traces(marker=dict(size=12,
#                              line=dict(width=2,
#                                        color='Red')),
#                  selector=dict(mode='markers'))

# Div is used to create divisions in an html block
# children is a subbranch of an Division tree
app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[ 
    # H1 is header 1 i.e Heading of the webapp
    html.H1(
        children='KOIN',
        style={
            'textAlign': 'center',
            'color': colors['text']
        }
    ),
    
    # style is used to style a particular dash/html component
    html.Div(children='Your Koin, Our Data', style={
        'textAlign': 'center',
        'color': colors['text']
    }),
    
    #dcc.markdown is used to add markdown/text info to the frontend
    html.Div(children =[dcc.Markdown(children=markdown_text,style={
        'textAlign': 'center',
        'color': colors['text'] } )]),
    
    #Inside children branch, a dcc dropdown component is created to add filters
    html.Div(children =[html.Label('Ticker symbol'), 
            dcc.Dropdown(ticker_list,style={'color':'#000000'})
            ], 
            style={'color': colors['text'],'padding': 10, 'flex': 1} 
            ),

    html.Div(children =[html.Label('Data type'),
             dcc.Dropdown(type_list,style={'color':'#000000'})
             ], 
             style={'color': colors['text'],'padding': 10, 'flex': 1} 
             ),

    html.Div(children = [html.Label('Currency'),
             dcc.Dropdown(currency_list,style={'color':'#000000'})
             ], 
             style={'color': colors['text'],'padding': 10, 'flex': 1}
             ),

    html.H2(children='ETH opening price',style={'color':colors['text']}),
    
    # Adding generate_table function to html division
    html.Div(generate_table(open_df),style={'color':colors['text']}),
    
    #dcc.graph is used to parse plotly graphs to html
    dcc.Graph(
        id='open graph',
        figure=fig
    )
]
)

if __name__ =="__main__":
    app.run_server(debug=True)enter code here

Answer 1

You need a callback that listens to the dropdown and builds a graph for each value selected. It should loop over the selected values, and append a graph to the output value for each one.

Answer 2

Add height to the header

.header { 
        background: black;
        text-align: center;
        padding: 30px;
        height: 80px
    }