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

**URL:** <https://community.plotly.com/t/how-to-create-a-graph-with-a-piechart-and-a-table-has-interconnection/40025>\
**Category:** Dash Python\
**Created:** [May 25, 2020, 5:50am UTC](https://community.plotly.com/t/how-to-create-a-graph-with-a-piechart-and-a-table-has-interconnection/40025 "2020-05-25T05:50:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![asknattawut](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/asknattawut/32/10636_2.png) [@asknattawut](https://community.plotly.com/u/asknattawut)\
**Post date:** [May 25, 2020, 5:50am UTC](https://community.plotly.com/t/how-to-create-a-graph-with-a-piechart-and-a-table-has-interconnection/40025/1 "2020-05-25T05:50:34Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/0/0c975c25aa5a1ba39fbcaf029171c91739c18298.png)

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

```auto
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)

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [May 25, 2020, 7:11am UTC](https://community.plotly.com/t/how-to-create-a-graph-with-a-piechart-and-a-table-has-interconnection/40025/2 "2020-05-25T07:11:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![asknattawut](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/asknattawut/32/10636_2.png) [@asknattawut](https://community.plotly.com/u/asknattawut)\
**Post date:** [May 27, 2020, 1:49am UTC](https://community.plotly.com/t/how-to-create-a-graph-with-a-piechart-and-a-table-has-interconnection/40025/3 "2020-05-27T01:49:19Z")

</div>

Hi adamschroeder,

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

```auto
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.](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/e/ebe523f5adece9aff998fbd532f6ebaba73e45bb.png)

Please advise.

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [May 27, 2020, 2:40am UTC](https://community.plotly.com/t/how-to-create-a-graph-with-a-piechart-and-a-table-has-interconnection/40025/4 "2020-05-27T02:40:33Z")

</div>

> [@asknattawut](#):
>
> ```auto
> fig.update_traces(hoverinfo='label+percent', textinfo='value', textfont_size=20,
> marker=dict(colors=colors, line=dict(color='#000000', width=2))))
> 
> ```

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:

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

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

```

---

<div class="post-metadata">

**Author:** ![asknattawut](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/asknattawut/32/10636_2.png) [@asknattawut](https://community.plotly.com/u/asknattawut)\
**Post date:** [May 27, 2020, 3:38am UTC](https://community.plotly.com/t/how-to-create-a-graph-with-a-piechart-and-a-table-has-interconnection/40025/5 "2020-05-27T03:38:58Z")

</div>

Hi adamschroeder,

```auto
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/5/50b20681909ff2aafb6b28ae1b9169b57711318e.png)

Please advise me again. Truly appreciated.

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [May 27, 2020, 4:06am UTC](https://community.plotly.com/t/how-to-create-a-graph-with-a-piechart-and-a-table-has-interconnection/40025/6 "2020-05-27T04:06:48Z")

</div>

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

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

```

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

```auto
(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](https://github.com/Coding-with-Adam/Dash-by-Plotly/blob/master/Dash_Interactive_Graphs/pie.py)
2. [Bar chart with Dash](https://github.com/Coding-with-Adam/Dash-by-Plotly/blob/master/Dash_Interactive_Graphs/bar.py)
3. [Dash DataTable](https://github.com/Coding-with-Adam/Dash-by-Plotly/blob/master/DataTable/datatable_intro_and_sort.py)