Can you help me understand why I receive this syntax error?

Dash Python
1

I think I have figured out the basic mechanics of a multi-page app, but I am running into two error statements that have me a bit baffled when I try to design the page for a pie chart.

  1. If I run it with the pie chart inside a layout div (“layout = html.Div([ ‘pie chart’ ])”), I receive the invalid Syntax error below.

  2. If I run it not framed inside the same layout tag, the pie chart strangely pops up displayed in my browser, but I receive the “has no attribute layout” error message below.

I know I must frame the chart must inside the layout div in order to work within the multi-page app structure, but can anyone explain why I am receiving the syntax error indicating there is something wrong with attempt to set the variable name for px.pie? I cannot figure out what I am doing that would cause that error

And I receive the same error message if I try “df = pd.read_csv” or other alternate ways to read data into a figure like a pie chart. Is there an obvious explanation for this problem? Is it familiar to anyone and do you have a fix?

Many thanks for reviewing my question.

Happy holidays,

Robert

em_syntax
em_syntax873×101 4.57 KB

em_layout
em_layout1109×117 6.15 KB

Right now, my code looks like this, based on a template from one of Adam’s videos, though I’ve tried a number of solutions. I don’t need a ton of bells and whistles. I just need the chart to read a two-column csv file, with the first column named “nutrients” and the second column named “percentages.”

df = pd.read_csv("pie_chart_data.csv")

layout = html.Div([

pie = px.pie(
        data_frame=df,
        values='percentages',
        names='nutrients',
        color_discrete_sequence=["red","green","blue","orange"],     #set marker colors
        # hover_data=['positive'],            #values appear as extra data in the hover tooltip
        # custom_data=['total'],              #values are extra data to be used in Dash callbacks
        title='Nutritional Profile',     #figure title
        template='presentation',            #'ggplot2', 'seaborn', 'simple_white', 'plotly',
                                            #'plotly_white', 'plotly_dark', 'presentation',
                                            #'xgridoff', 'ygridoff', 'gridon', 'none'
        width=800,                          #figure width in pixels
        height=600,                         #figure height in pixels
        hole=0,                           #represents the hole in middle of pie
        )

# pie_chart.update_traces(textposition='outside', textinfo='percent+label',
#                         marker=dict(line=dict(color='#000000', width=4)),
#                         pull=[0, 0, 0.2, 0], opacity=0.7, rotation=180)

pio.show(pie)

])
2

Hi @robertpfaff

When you are working on multi-page apps, it can be helpful to make each page a stand-alone app first because it’s much easier to find bugs.

The syntax you are using here won’t work for any Dash app. To display a figure in Dash, it needs to be in a dcc.Graph component.

For example, first get your pie chart working in a stand-alone app like this one:


from dash import Dash, dcc, html
import plotly.express as px

app = Dash(__name__)

df = px.data.tips()
fig = px.pie(df, values='tip', names='day')


app.layout = html.Div(dcc.Graph(figure=fig))

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

Then you can add it to the pages/ folder with the syntax used to create a multi-page app:


import dash
from dash import dcc, html
import plotly.express as px

dash.register_page(__name__)

df = px.data.tips()
fig = px.pie(df, values='tip', names='day')

layout = html.Div(dcc.Graph(figure=fig))

Also, I also recommend starting with one of the demo apps in dash-labs and run it without making any changes. This will help make sure everything is set up properly first before you start creating your own apps.

1 Like
3

Thanks so much for the direction. It was part of the problem. The other part is my original app.py (from the one-page app) requires the user to enter a recipe, which is then parsed for its nutritional elements, which user reviews and approves.

The app then computes the nutritional composition of the recipe and the results of that analysis are displayed in part in the pie chart. You may remember you helped me with some of that a week or two ago.

Now, after I switched to a multi-page app, the app.py is just the drop-down menu and the app.layout is just the dbc.Container with the plugin, consistent with the demos on Adam’s github.

Inside the pages folder, I created a submit_recipe.py file with the text area and datatable, and a pie_chart.py file where I want to display the nutrients and their proportions. Unfortunately, the text area and submit button no longer work as a “page.” I have struggled with it all afternoon and unable to come up with a solution. The menu looks fine - it is the callbacks and functions that do the heavy lifting that no longer work as a page, not the app.py.

I don’t want to impose or overwhelm you with tons of code. If you have any immediate thoughts about how to solve that kind of problem, I would love to hear them. Thank you again. I wish you a safe and happy holiday.

Robert