How do I include a histogram of the variables of my dataset to my dash app?

Question

I want to add a histogram to my dash app where the user can select what variable they want to use from the given dataset. There are 11 variables and I want to have the user select a variable from the drop down menu and in response, a histogram will be created for said variable. I am having ALOT of trouble understanding how the input and out works and where I should place the graph. (I would like to have it placed under the description.) Here is what I have so far:

 import dash
 import pandas as pd
 from dash import Input, Output
 from dash import dash_table
 from dash import dcc
 from dash import html

 app = dash.Dash(__name__)
 df = pd.read_csv('C:\\Users\\Programming\\diamonds.csv')

 app.layout = html.Div([
 html.H1("Diamonds", style={'text-align': 'center'}),
 html.Div(["Choose the number of observations x*: ",
          dcc.Input(id='top_of_table', value=10, type='number')]),

 dash_table.DataTable(id="any_id"),
 html.H1("Description", style={'text-align': 'center'}),

 html.Div("This is a dataframe containing 11 variables on Diamonds. 
 The variables are the "
         "following: price, carat, clarity, cut, color, depth, table, 
          x, y, z, and date."
         "Range in price is $338-$18791.Carats or weight of the 
 diamond ranges from .2-3.0."),

 ])


 @app.callback(
 Output(component_id="any_id", component_property='data'),
 Input(component_id='top_of_table', component_property='value'),
  )
 def diamond_function(num_observ):
 df1 = df.head(10)
 return df1.to_dict('records')


 if __name__ == '__main__':
 app.run_server(debug=True)

Any help? I really appreciate it! Thanks!

Answer 1

I don't have your dataframe so that I just make below code as referrence:

import dash
import pandas as pd
import plotly.express as px
from dash import Input, Output
from dash import dash_table
from dash import dcc
from dash import html

app = dash.Dash(__name__)
app.layout = html.Div([
    html.H1("Diamonds", style={'text-align': 'center'}),
    html.Div(["Choose the number of observations x*: ",
              dcc.Input(id='top_of_table', value=10, type='number')]),
    dash_table.DataTable(id="any_id"),
    html.H1("Description", style={'text-align': 'center'}),
    html.Div("This is a dataframe containing 11 variables on Diamonds. The variables are the "
         "following: price, carat, clarity, cut, color, depth, table, x, y, z, and date."
         "Range in price is $338-$18791.Carats or weight of the diamond ranges from .2-3.0."),
    html.Div([
        dcc.Dropdown(id='variables',
                     options=[{'label':x,'name':x} for x in df.sort_values('Variables')['Variables'].unique()],
                     value=[],
                     multi=False,
                     disabled=False,
                     clearable=True,
                     searchable=True
                    )
    ]),
    html.Div([
        dcc.Graph(id='figure_1',figure={})
    ])

])

@app.callback(Output('figure_1','figure'),
             [Input('variables','value')])
def update_graph(variables):
    if variables != []:
        dff = df[df['Variables'] == variables]
        fig = px.histogram(...)
    else:
        dff= df.copy()
        fig = px.histogram(...)
    return fig

if __name__ == '__main__':
    app.run_server(debug=False)

So you will need to add dcc.Dropdown as variables and dcc.Graph to show histogram for each variable.