Applying layout to an interactive graph

Dash Python
1

I’m trying to create a stacked bar graph that updates as I update the inputs of a table.
The graph looks exactly the way I want it to without any interactivity with a code like this:

m=0
while m<len(Ref) :
        ROWS = [i for i, x in enumerate(Shop) if x == Ref.iloc[m,0]]
        j = len(ROWS)-1
        while(j>0):
            Ref.loc[m,:] = Ref.loc[m,:] + Ref.loc[ROWS[j]]
            Ref = Ref.drop([ROWS[j]])
            j = j -1
       m = m+1
                        
for i in Ref['Shop'] : 
     P = list(Ref['Shop'])
     p = P.index(i)
     Ref.iloc[p,0] = Shop[p]
     Ref.iloc[p,1] =Price[p]
     
data = []
d=0
while d < len(Ref) :
        TITLE = go.Bar(
                            x=Frames,
                            y=Ref.iloc[d,2:26],
                            name=Ref.iloc[d,0],
                            )
        data.append(TITLE)
        d = d+1

##App Design##
app.layout = html.Div([
    html.H4('Stores'),
    dt.DataTable(
        rows=DF_GAPMINDER.to_dict('records'),
        # rows=Data2.to_dict('records'),
        # optional - sets the order of columns
        columns=(DF_GAPMINDER.columns),
        # columns=(Data2.columns),
        filters=True,
        resizable=True,
        sortColumn=True,
        editable=True,
        row_selectable=True,
        filterable=True,
        sortable=True,
        selected_row_indices=[],
        id='datatable-gapminder'
    ),
    html.Div(id='selected-indexes'),
 dcc.Graph(  
         figure = go.Figure(data = data,
        layout=go.Layout(
                barmode='stack',
            title='Storage',
            showlegend=True,
            legend=go.Legend(
                x=0,
                y=1.0
            ),
            margin=go.Margin(l=40, r=0, t=40, b=30)
        )
    ),
  
    style={'height': 300},
    id='graph-gapminder'
)
])

But, when I try to create an interactive graph, by putting the information in @app.callback and returning the layout I want, the data is returned but not the layout.

def datacompile(Ref) :
    m=0
    while m<len(Ref) :
        ROWS = [i for i, x in enumerate(Store) if x == Ref.iloc[m,0]]
        j = len(ROWS)-1
        while(j>0):
            Ref.loc[m,:] = Ref.loc[m,:] + Ref.loc[ROWS[j]]
            Ref = Ref.drop([ROWS[j]])
            j = j -1
        m = m+1   
        for i in Ref['Shop'] : 
            P = list(Ref['Shop'])
            p = P.index(i)
            Ref.iloc[p,0] = Shop[p]
            Ref.iloc[p,1] =Price[p]
        data = []
        d=0
        while d < len(Ref) :
            TITLE = go.Bar(
                                x=list(Ref)[2:26],
                                y=Ref.iloc[d,2:26],
                                name=Shop[d],
                                )
            data.append(TITLE)
            d = d+1
        
        return {
                'data' : np.array(data),

                }
                        
    app.layout = html.Div([
        html.H4('Stores'),
        dt.DataTable(
            rows=DF_GAPMINDER.to_dict('records'),
            # rows=Data2.to_dict('records'),
            # optional - sets the order of columns
            columns=(DF_GAPMINDER.columns),
            # columns=(Data2.columns),
            filters=True,
            resizable=True,
            sortColumn=True,
            editable=True,
            row_selectable=True,
            filterable=True,
            sortable=True,
            selected_row_indices=[],
            id='datatable-gapminder'
        ),
        html.Div(id='selected-indexes'),
     dcc.Graph(
        style={'height': 300},
        id='graph-gapminder'
    )
    ])


    @app.callback(
        Output('graph-gapminder', 'figure'),
        [Input('datatable-gapminder', 'rows')])
    def update_figure(rows):
        dff =pd.DataFrame(rows)
              
        return{ 'data': datacompile(dff),    
               'layout': {
                       'barmode' : 'stack'},
                                   }

The thing is, i can only return the data. If i attempt to return a figure and add the layout to the function, no graph appears. I also tried to return the layout within the function, add it to the app.layout, such that I’m only updating the data, but none of this works.
The second code presents an interactive graph, with no arranged layout (in this case, it is just stacking, but once i get it to work, i’ll add everything else).
Help!

2

Hey, welcome to the Dash community :slight_smile: Would you be able to edit your post to format your code as code blocks? That will make understanding your code much easier!

3

Thank you! How do i do that?

4

You can edit your post by clicking on the pencil icon below it. Then to format as a code block, select the desired text and press the ‘Preformatted Text’ button (looks like </>). Or you can make them extra fancy with color highlighting by manually wrapping the text like this:

```python
print("hello world")
```

Edit: ha, oops I forgot to escape the formatting markup :stuck_out_tongue:

2 Likes