How to create a graph with a piechart and a table has interconnection

Dash Python
1

Hi,

My name is Kim (a Newbie Python coder). I have been trying to create a graph with a piechart and a table has interconnection (see attached image)

How to create a graph with a piechart and a table has interconnection
How to create a graph with a piechart and a table has interconnection1335×644 8.75 KB

However, What I got is only a too large table (see the code below)

import dash 

import dash_table

from dash_table.Format import Format, Sign

import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

df = pd.read_csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vT1BZckjZmge-EOa4WlxrG20Qp_I-7vwiz2TDvWxBxaW1V0LX-R9ipIsUKLuEFH7DyMzQUkCLr_9s_Y/pub?output=csv')

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = dash_table.DataTable(

    data=df.to_dict('records'),

    sort_action='native',

    columns=[

        {"name": i, "id": i} for i in df.columns

    ],

    style_table={'height': '1000px', 'overflowY': 'auto'},

    style_cell={'fontSize':20, 'font-family':'sans-serif'},

    style_header={

        'backgroundColor': 'rgb(230, 230, 230)',

        'fontWeight': 'bold'},

)

if __name__ == '__main__':

    app.run_server(debug=True)

Please advise me how to get the desired graph.

(I know that I need to do 1) app.layout 2) callbacks ,However, I already tried but I could not make it)

2

Hi @asknattawut
Welcome to the Dash community. Why don’t you show us the code you wrote with the layout and the callback. Also add the error you got. That would really help us help you.

3

Hi adamschroeder,

What I can do is up to this point which is cannot run the code:

import dash 
import dash_table
from dash_table.Format import Format, Sign
import pandas as pd
import dash_html_components as html
import dash_core_components as dcc
import plotly.express as px
import plotly.graph_objects as go

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

df = pd.read_csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vT1BZckjZmge-EOa4WlxrG20Qp_I-7vwiz2TDvWxBxaW1V0LX-R9ipIsUKLuEFH7DyMzQUkCLr_9s_Y/pub?output=csv')

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
     html.H3('Organization Personnels'),

     html.Div([html.P('Information updated on 27 May 2020'),

html.Div(colors = ['gold', 'mediumturquoise', 'darkorange', 'lightgreen'],

fig = go.Figure(data=[go.Pie(labels=['Division'],
                             values=['Position'])])

fig.update_traces(hoverinfo='label+percent', textinfo='value', textfont_size=20,
                  marker=dict(colors=colors, line=dict(color='#000000', width=2))))

     (dash_table.DataTable(

    data=df.to_dict('records'),

    sort_action='native',

    columns=[

        {"name": i, "id": i} for i in df.columns

    ],

    style_table={'height': '1000px', 'overflowY': 'auto'},

    style_cell={'fontSize':20, 'font-family':'sans-serif'},

    style_header={

        'backgroundColor': 'rgb(230, 230, 230)',

        'fontWeight': 'bold'},

))])])

dcc.Graph(figure=fig)

if __name__ == '__main__':

    app.run_server(debug=True)

Error Message:

Capture.
Capture.1112×264 17.5 KB

Please advise.

4

Check your syntax. It appears that you have one too many parentheses.

Also, I think you’re missing closing parentheses in this part of your code:

     html.Div([html.P('Information updated on 27 May 2020'),

html.Div(colors = ['gold', 'mediumturquoise', 'darkorange', 'lightgreen'],
5

Hi adamschroeder,

import dash 
import dash_table
from dash_table.Format import Format, Sign
import pandas as pd
import dash_html_components as html
import dash_core_components as dcc
import plotly.express as px
import plotly.graph_objects as go

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

df = pd.read_csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vT1BZckjZmge-EOa4WlxrG20Qp_I-7vwiz2TDvWxBxaW1V0LX-R9ipIsUKLuEFH7DyMzQUkCLr_9s_Y/pub?output=csv')

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
     html.H3('Organization Personnels'),

     html.Div([html.P('Information updated on 27 May 2020')]),

html.Div(colors = ['gold', 'mediumturquoise', 'darkorange', 'lightgreen']),

fig = go.Figure(data=[go.Pie(labels=['Division'],
                             values=['Position'])])

fig.update_traces(hoverinfo='label+percent', textinfo='value', textfont_size=20,
                  marker=dict(colors=colors, line=dict(color='#000000', width=2)))

     (dash_table.DataTable(

    data=df.to_dict('records'),

    sort_action='native',

    columns=[

        {"name": i, "id": i} for i in df.columns

    ],

    style_table={'height': '1000px', 'overflowY': 'auto'},

    style_cell={'fontSize':20, 'font-family':'sans-serif'},

    style_header={

        'backgroundColor': 'rgb(230, 230, 230)',

        'fontWeight': 'bold'},

))])])

dcc.Graph(figure=fig)

if __name__ == '__main__':

    app.run_server(debug=True)

I have reduced too many parentheses, and added closing parentheses as per your advice.

Now I have faced a different error.

Capture2
Capture21125×263 12.8 KB

Please advise me again. Truly appreciated.

6

It’s still a syntax error.
your app.layout = html.Div([…]) section cannot include the:

fig = go.Figure(data=[go.Pie(labels=['Division'],
                             values=['Position'])])

And I’m not sure this is written correctly either:

(dash_table.DataTable(...

And you still have an extra parenthesis that doesn’t belong.

Try re-writing your code. Here are a few examples:

  1. Pie chart with Dash
  2. Bar chart with Dash
  3. Dash DataTable