CODEWITHSUNDEEP
pythonplotlyplotly-dash
Steven
Steven

Reputation: 53

Plotly: How to fill table by rows using a pandas dataframe as source

I have this df: vertical_stack = pd.concat([eu_table, us_table], axis=0):

           0   1   2   3   4   5   6   7   8   9   10  11
EU value   21  13   9  11  15   9   8  11  11  20  19   6
USA value  17  28  14  18  16  11  25  26  22  27  25  17

and I wanted to create a table in Plotly as above, by rows, but I can only fill the table vertically, where 'EU value' becomes a column and all its values are filled vertically. This is what I used:

    fig3 = go.Figure(data=[go.Table(header=dict(values=['','Sept. 19', 'Oct. 19', 'Nov. 19', 'Dec. 19', 'Jan. 20', 'Feb. 20', 'Mar. 20', 
             'Apr. 20', 'May 20', 'Jun. 20', 'Jul. 20', 'Aug. 20']),
             cells=dict(values=[vertical_stack])
                 )])

And this is my output:

Output

As you can see all the values are filled in the same cell.

Upvotes: 5

Views: 3145

Answers (2)

Erick Oziel
Erick Oziel

Reputation: 1222

This worked for me:

    df = pd.read_csv(
        'https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

    # Plotly's simple table 
    fig = go.Figure(data=[go.Table(
        header=dict(values=df.columns.tolist()),
        cells=dict(values=df.to_numpy().T.tolist())
    )])

Reference: https://plotly.com/python/table/

Plotly's table

Upvotes: 1

vestland
vestland

Reputation: 61084

I'm not sure what't causing your error here, but I can show you how to build a table out of a pandas dataframe like this:

            0   1   2   3   4   5   6   7   8   9  10  11
EU value   21  13   9  11  15   9   8  11  11  20  19   6
USA value  17  28  14  18  16  11  25  26  22  27  25  17

And since you've tagged your question but only used pure plotly in your example, I might as well provide a suggestion for both approaches in two separate parts.

Part 1 - Plotly and graph_objects

Using df = pd.read_clipboard(sep='\\s+') and df.to_dict() will let you build a reproducible dataframe like so:

df = pd.DataFrame({'0': {'EU value': 21, 'USA value': 17},
                     '1': {'EU value': 13, 'USA value': 28},
                     '2': {'EU value': 9, 'USA value': 14},
                     '3': {'EU value': 11, 'USA value': 18},
                     '4': {'EU value': 15, 'USA value': 16},
                     '5': {'EU value': 9, 'USA value': 11},
                     '6': {'EU value': 8, 'USA value': 25},
                     '7': {'EU value': 11, 'USA value': 26},
                     '8': {'EU value': 11, 'USA value': 22},
                     '9': {'EU value': 20, 'USA value': 27},
                     '10': {'EU value': 19, 'USA value': 25},
                     '11': {'EU value': 6, 'USA value': 17}})

And this data sample is a bit more practical to work with. It shouldn't matter if you're adding data to your table row by row or column by column. The result should be the same for your example. If the following suggestions do not work for your actual use case, then just let me know and we can talk about options.

The snippet below will produce the following figure using go.Figure() and go.Table().

Table 1

enter image description here

Complete code for plotly

import plotly.graph_objects as go
import pandas as pd

df = pd.DataFrame({'0': {'EU value': 21, 'USA value': 17},
                     '1': {'EU value': 13, 'USA value': 28},
                     '2': {'EU value': 9, 'USA value': 14},
                     '3': {'EU value': 11, 'USA value': 18},
                     '4': {'EU value': 15, 'USA value': 16},
                     '5': {'EU value': 9, 'USA value': 11},
                     '6': {'EU value': 8, 'USA value': 25},
                     '7': {'EU value': 11, 'USA value': 26},
                     '8': {'EU value': 11, 'USA value': 22},
                     '9': {'EU value': 20, 'USA value': 27},
                     '10': {'EU value': 19, 'USA value': 25},
                     '11': {'EU value': 6, 'USA value': 17}})

df.reset_index(inplace=True)
df.rename(columns={'index':''}, inplace = True)

fig = go.Figure(data=[go.Table(
    header=dict(values=list(df.columns),
                fill_color='paleturquoise',
                align='left'),
    cells=dict(values=[df[col] for col in df.columns],
               fill_color='lavender',
               align='left'))
])

fig.show()

Part 2 - Plotly Dash using JupyterDash

The snippet below will produce the following table using, among other things:

dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict('records')

Table 1

enter image description here

Complete code for JupyterDash

from jupyter_dash import JupyterDash
import dash_table
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
df = pd.DataFrame({'0': {'EU_value': 21, 'USA_value': 17},
                     '1': {'EU_value': 13, 'USA_value': 28},
                     '2': {'EU_value': 9, 'USA_value': 14},
                     '3': {'EU_value': 11, 'USA_value': 18},
                     '4': {'EU_value': 15, 'USA_value': 16},
                     '5': {'EU_value': 9, 'USA_value': 11},
                     '6': {'EU_value': 8, 'USA_value': 25},
                     '7': {'EU_value': 11, 'USA_value': 26},
                     '8': {'EU_value': 11, 'USA_value': 22},
                     '9': {'EU_value': 20, 'USA_value': 27},
                     '10': {'EU_value': 19, 'USA_value': 25},
                     '11': {'EU_value': 6, 'USA_value': 17}})

df.reset_index(inplace=True)
df.rename(columns={'index':''}, inplace = True)
app = JupyterDash(__name__)

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict('records'),
)

app.run_server(mode='inline', port = 8070, dev_tools_ui=True,
          dev_tools_hot_reload =True, threaded=True)

Upvotes: 4

Related Questions