How to use multiple columns on x_axis

📊 Plotly Python
1

I try to remake an existing pivot chart (excell) in jupyter notebook.
In the pivot table they use 3 columns in the row-section. This result in a multi-index x-axis in the chart.
I succeeded to build the chart in pieces but not to concatenate the charts
How I do do this in Plotly ?
I hope the image explains it better:

Q1
Q11072×395 43.5 KB

I figured it out in pyton but i would like to do it with plotly:

import pandas as pd

data = {‘date’: [‘2022-02-01’, ‘2022-03-01’, ‘2022-04-01’, ‘2022-02-01’, ‘2022-03-01’, ‘2022-04-01’,‘2022-02-01’, ‘2022-03-01’, ‘2022-04-01’],
‘type’: [‘TYPE1’, ‘TYPE1’, ‘TYPE1’,‘TYPE2’, ‘TYPE2’, ‘TYPE2’,‘TYPE3’, ‘TYPE3’, ‘TYPE3’],
‘value’: [15,10,15,20,19,20,33,29,24]}
df = pd.DataFrame(data)
df.groupby([‘type’,‘date’]).agg(‘mean’).plot()

2

Hi @marvy and welcome to the community!

Could you share an image of the chart you are trying to plot? This may help others to provide better solutions to you.

3

I have similar question :
link to my question : https://community.plotly.com/t/how-to-create-bar-graph-with-table-attached-to-it/63536

4

@marvy @Maverick06 This solution should help you.

5

Thank you for helping. If I try that code in jupyter notebook i get an:
TypeError: ‘NoneType’ object is not callable
on
fig.update_layout( …)

6

hi @marvy
this error is being generated probably because the initial value is a NoneType. I would have to to see your full code to understand better, but you could potentially add this no_update in the callback:

@app.callback(.......)
def example(value):
    if value is None:
        return dash no_update
    else:
        DoSomethingElse
7

Hello Adam.
Ik took the code from Alooksha:

import pandas as pd
import plotly.graph_objs as go

df = pd.DataFrame(
dict(
week=[1, 1, 2, 2, 3, 3] * 2,
layout=[“classic”, “classic”, “modern”, “modern”] * 3,
response=[“conversion”, “exit”] * 6,
cnt=[26, 23, 45, 34, 55, 44, 53, 27, 28, 25, 30, 34],
)
)

fig.update_layout(
template=“simple_white”,
xaxis=dict(title_text=“Week”),
yaxis=dict(title_text=“Count”),
barmode=“stack”
)

colors = [“#2A66DE”, “#FFC32B”]

for r, c in zip(df.response.unique(), colors):
plot_df = df[df.response == r]
fig.add_trace(
go.Bar(x=[plot_df.week, plot_df.layout], y=plot_df.cnt, name=r, marker_color=c),
)

fig

8

@marvy I am not sure what’s wrong with your code/environment. I tried it now with my jupyter notebook and it works perfectly fine. Here is the code for your reference.

import plotly.graph_objects as go

df = pd.DataFrame(
    dict(
    week=[1, 1, 2, 2, 3, 3] * 2,
    layout=['classic', 'classic', 'modern', 'modern'] * 3,
    response=['conversion', 'exit'] * 6,
    cnt=[26, 23, 45, 34, 55, 44, 53, 27, 28, 25, 30, 34],
    )
    )

fig = go.Figure()

fig.update_layout(
    template="simple_white",
    xaxis=dict(title_text="Week"),
    yaxis=dict(title_text="Count"),
    barmode="stack",
)

colors = ["#2A66DE", "#FFC32B"]

for r, c in zip(df.response.unique(), colors):
    plot_df = df[df.response == r]
    fig.add_trace(
        go.Bar(x=[plot_df.week, plot_df.layout], y=plot_df.cnt, name=r, marker_color=c),
    )

fig
9

Well …on another pc it works well :slight_smile:
So the final solution was just adding a list to the x-axis.

data = {‘date’: [‘2022-02-01’, ‘2022-03-01’,‘2022-04-01’,‘2022-02-01’,‘2022-03-01’, ‘2022-04-01’,‘2022-02-01’,‘2022-03-01’,‘2022-04-01’],
‘type’: [‘TYPE1’, ‘TYPE1’, ‘TYPE1’,‘TYPE2’, ‘TYPE2’, ‘TYPE2’,‘TYPE3’, ‘TYPE3’, ‘TYPE3’],
‘value’: [15,10,15,20,19,20,33,29,24]}
df = pd.DataFrame(data)
fig = go.Figure()
colors = [“#2A66DE”, “#FFC32B”]
fig.add_trace(go.Scatter(x=[df.type,df.date], y=df.value))
fig

Thanks for the support