Why wont the charts show?

Dash Python
1

Hi, i am using data from kaggle and trying to display it in two coloums. The graphs dont show. Any help would be great, i have been staring at this for a while and i cant see what im missing here? Thanks for any help.

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

csv_file = "amazon_books_Data.csv"

# read the file with pandas
df = pd.read_csv(csv_file)

# This calls an external stylesheet
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

# The main layout. This goes in a div
app.layout = html.Div([
    html.H1("Analytics Dashboard Of Amazon Book Data (Dash Plotly)", style={"textAlign":"center"}),
    html.Hr(),
    html.P("Personal project using pandas, dash and plotly"),

    # Every thing below this line (the call backs) will live inside this div
    html.Div(id="output-div", children=[]),
])

@app.callback(Output(component_id="output-div", component_property="children"),)


def make_graphs(): 

    df_hist = df_hist = df[df["product_title"]]
    fig_hist = px.histogram(df_hist, x="product_title")
    fig_hist.update_xaxes(categoryorder="total descending")

    
    fig_strip = px.strip(df_hist, x="product_title", y="Sentiment_books")

    return [
        html.Div([
            html.Div([dcc.Graph(figure=fig_hist)], className="six columns"),
            html.Div([dcc.Graph(figure=fig_strip)], className="six columns"),
        ], className="row"),
    ]





# This runs the program
if __name__ == '__main__':
    app.run_server(debug=False)
2

Hello @FREDDY33,

It looks like your callback is missing an input.

Here is an adjustment that should work. If you want to update it, you can update it in the callback by updating some data.

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

def make_graphs(): 

    df_hist = df_hist = df[df["product_title"]]
    fig_hist = px.histogram(df_hist, x="product_title")
    fig_hist.update_xaxes(categoryorder="total descending")

    
    fig_strip = px.strip(df_hist, x="product_title", y="Sentiment_books")

    return [
        html.Div([
            html.Div([dcc.Graph(figure=fig_hist)], className="six columns"),
            html.Div([dcc.Graph(figure=fig_strip)], className="six columns"),
        ], className="row"),
    ]

csv_file = "amazon_books_Data.csv"

# read the file with pandas
df = pd.read_csv(csv_file)

# This calls an external stylesheet
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

# The main layout. This goes in a div
app.layout = html.Div([
    html.H1("Analytics Dashboard Of Amazon Book Data (Dash Plotly)", style={"textAlign":"center"}),
    html.Hr(),
    html.P("Personal project using pandas, dash and plotly"),

    # Every thing below this line (the call backs) will live inside this div
    html.Div(id="output-div", children=make_graphs()),
])

@app.callback(Output(component_id="output-div", component_property="children"),) ### Place input here, like data updating


def updateGraphs(): 

    return make_graphs()





# This runs the program
if __name__ == '__main__':
    app.run_server(debug=False)
3

Thank you for this, Its funny because i was just playing about with inputs.

Honestly im really confused, im quite new to this. I have read the dash docs, but i learn best through hands on Why do i need an input if there is no input fields?

I did try that code but it returns some sort of error.

im not sure but this part of code might be wrong?

   df_hist = df_hist = df[df["product_title"]]

im actually really muddled right now!

Do i need an input to show a graph?

input-output

4

Change it to this:

df_hist = df[df["product_title"]]

Inputs arent only inputs on Dash. They can be all sorts of elements on the page, url, local/session/memory storage.

An input is something that triggers a callback. State is something that doesnt trigger the callback, but will have variables available for the callback. Output is what output you want to provide, html elements, or information. Each prop can only be used in an output one time throughout the app.

5

Ghank you for this, that makes sense, so the output is for displaying elements, but you need an input to call them elemenrts?

I’m still completely lost though, i have made these adjustments:

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

csv_file = "amazon_books_Data.csv"

# read the file with pandas
df = pd.read_csv(csv_file)

# This calls an external stylesheet
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

# The main layout. This goes in a div
app.layout = html.Div([
    html.H1("Analytics Dashboard Of Amazon Book Data (Dash Plotly)", style={"textAlign":"center"}),
    html.Hr(),
    html.P("Personal project using pandas, dash and plotly"),

    # Every thing below this line (the call backs) will live inside this div
    html.Div(id="output-div", children=[]),
])

@app.callback(Output(component_id="output-div", component_property="children"),
Input(component_id="product_title", component_property="value"),)


def make_graphs(): 

    df_hist = df[df["product_title"]]
    fig_hist = px.histogram(df_hist, x="product_title")
    fig_hist.update_xaxes(categoryorder="total descending")

    
    fig_strip = px.strip(df_hist, x="product_title", y="Sentiment_books")

   

    return [
        html.Div([
            html.Div([dcc.Graph(figure=fig_hist)], className="six columns"),
            html.Div([dcc.Graph(figure=fig_strip)], className="six columns"),
        ], className="row"),
    ]



# This runs the program
if __name__ == '__main__':
    app.run_server(debug=False)

i am also reading this, Part 3. Basic Callbacks | Dash for Python Documentation | Plotly

i just need to display the charts, i dont need any sliders or dropdowns. im not sure what i should be putting in the input field?

Im sorry for this, maybe i am a bit slow at picking this up or making sense of it.

6

The input needs to be something in the layout. So, for this to work, you could something like this:

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

csv_file = "amazon_books_Data.csv"

# read the file with pandas
df = pd.read_csv(csv_file)

# This calls an external stylesheet
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

# The main layout. This goes in a div
app.layout = html.Div([
    html.H1("Analytics Dashboard Of Amazon Book Data (Dash Plotly)", style={"textAlign": "center"}),
    html.Hr(),
    html.P("Personal project using pandas, dash and plotly"),

    ### determines your filter
    dcc.Input(id='product_title'),

    # Every thing below this line (the call backs) will live inside this div
    html.Div(id="output-div", children=[]),
])


@app.callback(Output(component_id="output-div", component_property="children"),
              Input(component_id="product_title", component_property="value"), )
def make_graphs():
    df_hist = df[df["product_title"]]
    fig_hist = px.histogram(df_hist, x="product_title")
    fig_hist.update_xaxes(categoryorder="total descending")

    fig_strip = px.strip(df_hist, x="product_title", y="Sentiment_books")

    return [
        html.Div([
            html.Div([dcc.Graph(figure=fig_hist)], className="six columns"),
            html.Div([dcc.Graph(figure=fig_strip)], className="six columns"),
        ], className="row"),
    ]


# This runs the program
if __name__ == '__main__':
    app.run_server(debug=False)

Then, in the new input spot, punch in one of the product titles that you want to view.

7

I got you! thanks so much.

Really appreciate your help and its clicked whats going on. The graphs wont show but i think thats a issue on my end with the stylesheet or something, i will get to work trouble shooting that!

Thanks again :slight_smile:

8

FYI, the code I gave you won’t filter your data, I misread how you were building your df.

Is it showing a blank graph when you load the page?

9

You could also turn on debug mode to see if something else is going wrong through a pop up on the website.

10

hi, its not showing any graph.

11

Hi bud, i think i have found a fix, but by god this is difficult haha!

1 Like
12

Was it def def make_graphs(): => def make_graphs(value):?

13

Hi buddy,

I managed to get it working with:

def make_graphs(product_title):
    
    # Histogram
    # Always make a copy of the data frame. The bellow is stored in a variable
    
    df_hist = df[df["product_title"]==product_title]
    fig_hist = px.histogram(df_hist, x="product_title")
    fig_hist.update_xaxes(categoryorder="total descending")

    # Strip Chart / A px graph. Good for lots of data

    fig_strip = px.strip(df_hist, x="product_title", y="Sentiment_books")

Thanks for your help with this!
1 Like