Render chart based on radio button selection

Dash Python
1

hi,
as the title suggests im trying to render a graph (pie chart in this case) based on the selection of a radio button

i’ve followed a starter tutorial and can display an image to a div based on the selection made in a radio button but have not been able to figure out how to make a different graph show up for each radio button selection.
This is what my radio button options look like:

dcc.RadioItems(
    id='radio-items',
    options = [
        {'label': 'One', 'value': 'first'},
        {'label': 'Two', 'value': 'second'},
        {'label': 'Three', 'value': 'third'},

        ],
    value = "",
    labelStyle={'display': 'inline-block'}
    ),

i’ve made the ‘value’ key in my ‘options’ list just some dummy strings like ‘first’,‘second’,‘third’ in an attempt to just output random text. but now i want the ‘value’ that is renderd from each selection to be a pie chart. is there a standard way to go about doing this?? what i’ve tried is literally putting a ‘go.Pie’ as the ‘value’ in each ‘option’ dictionary but 1. it just doesnt seem right and 2. can’t get it to work cuz i cant figure out what the heck my callback is supposed to have in it… has anyone seen an example for something like this online??

thank u

2

First off, you need to create a graph component. It could be very simple as such:

dcc.Graph(
        id='pie-chart'
    )

Just make sure it has an id.

Then for the callback, the output will take the id as the first argument and ‘figure’ as the second:

@app.callback(Output('pie-chart', 'figure'),
    [Input('radio-items', 'value')])
def make_pie_chart(value):
    trace = go.Pie(
        #define pie chart
    )
    layout = #define layout
    figure = go.Figure(data=[trace], layout=layout)
    retrun figure

Let me know if that helps.

1 Like
3

this does help, thank you. however i dont understand how separate pie charts are defined, do i need to create a new trace for each pie chart?

thank u

4

No, you just have the function make_pie_chart create each one using python and following the rules of plotly’s declarative syntax.

I suppose you would need more than just a radio button value to create a pie chart. Do you have a dataset?

5

I do but I would like to just use dummy data to make a few different pie charts, perhaps something like this:

fig = {
  "data": [
{
  "values": [16, 15, 12, 6, 5, 4, 42],
  "labels": [
    "US",
    "China",
    "European Union",
    "Russian Federation",
    "Brazil",
    "India",
    "Rest of World"
  ],
  "domain": {"x": [0, .48]},
  "name": "GHG Emissions",
  "hoverinfo":"label+percent+name",
  "hole": .4,
  "type": "pie"
},
{
  "values": [27, 11, 25, 8, 1, 3, 25],
  "labels": [
    "US",
    "China",
    "European Union",
    "Russian Federation",
    "Brazil",
    "India",
    "Rest of World"
  ],
  "text":["CO2"],
  "textposition":"inside",
  "domain": {"x": [.52, 1]},
  "name": "CO2 Emissions",
  "hoverinfo":"label+percent+name",
  "hole": .4,
  "type": "pie"
}],
  "layout": {
    "title":"Global Emissions 1990-2011",
    "annotations": [
        {
            "font": {
                "size": 20
            },
            "showarrow": False,
            "text": "GHG",
            "x": 0.20,
            "y": 0.5
        },
        {
            "font": {
                "size": 20
            },
            "showarrow": False,
            "text": "CO2",
            "x": 0.8,
            "y": 0.5
        }
    ]
}
}

where each radio button corresponds to one of the charts

6

That should be simple if they are already predefined.

  1. Create a variable that stores each dummy figure. They are essentially just python dicts.

  2. Create some sort of if…else logic in the call back and return the figure based on the radio button value.

7

i believe i made a mistake. just to be clear, i would like my charts to correspond to a radio button in a 1-to-1 sorta relationship. here i pasted 2 charts that share the same layout, which is not what i want. I want each chart to have it’s own layout and be completely independent of the other.

does this change anything?
thank u

8

Oh yeah, you are not doing it correctly.

Each figure need to have its own data and layout.

fig_1 = { "data" : [ ... ] , "layout": { ...  } }
fig_2 = { "data" : [ ... ] , "layout": { ...  } }
....
1 Like
9

thank u for all your help. have been unable to get the result i want but i will keep trying. hate to be this guy but if u happen to find a full example online it would be greatly appreciated. thanks again

10

here’s what i’ve got. used the same data for all three charts just for testing

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

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config.suppress_callback_exceptions = True

app.layout = html.Div([
dcc.RadioItems(
    id='radio-items',
    options = [
        {'label': 'One', 'value': 'first'},
        {'label': 'Two', 'value': 'second'},
        {'label': 'Three', 'value': 'third'},

        ],
    value = "",
    labelStyle={'display': 'inline-block'}
    ), 

dcc.Graph(id = 'pie-chart')
])


@app.callback(Output('pie-chart', 'figure'),
    [Input('radio-items', 'value')])
def render_charts(value):
    labels1 = ['Oxygen','Hydrogen','Carbon_Dioxide','Nitrogen'],
    values1 = [4500,2500,1053,500], 

    labels2 = ['Oxygen','Hydrogen','Carbon_Dioxide','Nitrogen'],
    values2 = [4500,2500,1053,500], 

    labels3 = ['Oxygen','Hydrogen','Carbon_Dioxide','Nitrogen'],
    values3 = [4500,2500,1053,500], 

    charts = [
        go.Pie(labels=labels1, values=values1),
        go.Pie(labels=labels2, values=values2),
        go.Pie(labels=labels3, values=values3)
               ]
    
    if value == 'first':
        return {
            'data':charts[0],
            'layout' : go.Layout(
                )
            }
    elif value == 'second': 
         eturn {
            'data':charts[1],
            'layout' : go.Layout(
                )
            }
    else: 
        return {
            'data':charts[2],
            'layout' : go.Layout(
                )
            }

if __name__ == '__main__':
app.run_server(debug=True, port=8056)
11

Hi,
Can you remove the commas at the end of the labels and value lists