How to use Callback to update Bar Graph in Dash

Question

Since Dash is a fairly new framework for making interactive web-based graphs, there is not too many information that are specific or detailed for beginners. In my case I need to update a simple bar graph using a callback function. The data does not render on the browser even though the server runs fine without prompting any errors.

Need help sorting out and understanding why data does not render.

import dash
from dash.dependencies import Output, Event
import dash_core_components as dcc
import dash_html_components as html
import plotly
import plotly.graph_objs as go

app = dash.Dash(__name__)

colors = {
    'background': '#111111',
    'background2': '#FF0',
    'text': '#7FDBFF'
}

app.layout = html.Div( children = [ 
        html.Div([
            html.H5('ANNx'),
            dcc.Graph(
                id='cx1'
                )

        ])
    ]
)


@app.callback(Output('cx1', 'figure'))

def update_figure( ):
    return  {
                    'data': [
                        {'x': ['APC'], 'y': [9], 'type': 'bar', 'name': 'APC'},
                        {'x': ['PDP'], 'y': [8], 'type': 'bar', 'name': 'PDP'},
                    ],
                    'layout': {
                        'title': 'Basic Dash Example',
                        'plot_bgcolor': colors['background'],
                        'paper_bgcolor': colors['background']
                    }
                    }


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

Dmitriy Kisil · Accepted Answer · 2019-02-21 11:53:48Z

You can use callback in a such way (I create dropdown menu for this):

import dash
from dash.dependencies import Output, Input
import dash_core_components as dcc
import dash_html_components as html
import plotly
import plotly.graph_objs as go
import pandas as pd

app = dash.Dash(__name__)

df = pd.DataFrame({'x': ['APC', 'PDP'], 'y': [9, 8]})

colors = {
    'background': '#111111',
    'background2': '#FF0',
    'text': '#7FDBFF'
}

app.layout = html.Div(children=[
        html.Div([
            html.H5('ANNx'),
            html.Div(
                id='cx1'
                ),
            dcc.Dropdown(id='cx2',
                         options=[{'label': 'APC', 'value': 'APC'},
                                  {'label': 'PDP', 'value': 'PDP'},
                                  {'label': 'Clear', 'value': None}
                                  ]
                         )
                  ])])


@app.callback(Output('cx1', 'children'),
              [Input('cx2', 'value')])
def update_figure(value):
    if value is None:
        dff = df
    else:
        dff = df.loc[df["x"] == value]
    return html.Div(
            dcc.Graph(
                id='bar chart',
                figure={
                    "data": [
                        {
                            "x": dff["x"],
                            "y": dff["y"],
                            "type": "bar",
                            "marker": {"color": "#0074D9"},
                        }
                    ],
                    "layout": {
                        'title': 'Basic Dash Example',
                        "xaxis": {"title": "Authors"},
                        "yaxis": {"title": "Counts"},
                        'plot_bgcolor': colors['background'],
                        'paper_bgcolor': colors['background']
                    },
                },
            )
    )


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

If we got a lot of Graphs in a page, how can I avoid that my input (like a Input, Dropdown etc) refresh all the page? I want that the input refreshs only the related output.

Sascha · Accepted Answer · 2019-02-08 12:23:41Z

If you write output in your calback function then you need to provide input as well, it can be, slider, date picker or dropdown menu and etc. but in your case you dont need any input and output as your graph is not dynamic in this case. check here https://dash.plot.ly/getting-started-part-2

so in your case it is enough just to put id and figure into dcc.Graph component:

import dash
import dash_core_components as dcc
import dash_html_components as html


app = dash.Dash(__name__)

colors = {
    'background': '#111111',
    'background2': '#FF0',
    'text': '#7FDBFF'
}

app.layout = html.Div( children = [
        html.Div([
            html.H5('ANNx'),
            dcc.Graph(
                id='cx1', figure={
                    'data': [
                        {'x': ['APC'], 'y': [9], 'type': 'bar', 'name': 'APC'},
                        {'x': ['PDP'], 'y': [8], 'type': 'bar', 'name': 'PDP'},
                    ],
                    'layout': {
                        'title': 'Basic Dash Example',
                        'plot_bgcolor': colors['background'],
                        'paper_bgcolor': colors['background']
                    }}
                )

        ])
    ]
)


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

Collectives™ on Stack Overflow

How to use Callback to update Bar Graph in Dash

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related