Plotly: How to use scatter chart to display a multiIndex dataframe?

2
votes

I'm using a multi-index data frame to plot a line chart. I can see the correct result when I plot the graph using Matplotlib but the data frame shows the wrong output when plotted using Plotly scatter charts- why?

import pandas as pd
data = pd.DataFrame([
        ('Q1','Blue',100),
        ('Q1','Green',300),
        ('Q2','Blue',200),
        ('Q2','Green',350),
        ('Q3','Blue',300),
        ('Q3','Green',400),
        ('Q4','Blue',400),
        ('Q4','Green',450),
    ], 
    columns=['quarter', 'company', 'value']
)
data = data.set_index(['quarter', 'company']).value

data.unstack().plot(kind='bar', stacked=True)

The above code plots the right chart. The below code also generate the right result.

fig = go.Figure()
fig.add_trace(go.Scatter(x=sample.index, y=sample['Blue'], 
                         #mode='lines+markers', name='',
                         #line=dict(color=colors_list[1],width=2,) ,
                          
                        )
)

but I don't know how to plot both Blue and Green in the scatter plot at the same time?

example:

fig = go.Figure()
fig.add_trace(go.Scatter(x=sample.index, y=sample, 
                         #mode='lines+markers', name='',
                         #line=dict(color=colors_list[1],width=2,) ,
                          
                        )
)

Can anyone help how to plot both Blue and Green together?

2
pythonpandasplotlyjupyterplotly-python
In the above code, I forgot to add the following. sample = data.unstack(-1).head(5) sample – Ninad
How did my suggestion work out for you? – vestland

2 Answers

1
votes

Your question is a bit unclear, but I'm assuming that your primary objective here is to display values accross an array of quarters where values are split in two groups ['blue', 'red']. (I can't quite understand why you're asking for a plotly scatter figure but showing a matplotlib bar chart...). Anyway, If I'm right, then your use case is very well suited for plotly.express, specifically px.scatter with which the following snippet will produce the figure below.

import pandas as pd
import plotly.graph_objects as go
import plotly.express as px

data = pd.DataFrame([
        ('Q1','Blue',100),
        ('Q1','Green',300),
        ('Q2','Blue',200),
        ('Q2','Green',350),
        ('Q3','Blue',300),
        ('Q3','Green',400),
        ('Q4','Blue',400),
        ('Q4','Green',450),
    ], 
    columns=['quarter', 'company', 'value']
)

fig = px.scatter(data, x = 'quarter', y = 'value',
                 color = 'company',
                 color_discrete_sequence=['Blue', 'Green'])
fig.show()

enter image description here

0
votes

As vestland pointed in his good answer you can use Plotly Express to do it simply.

However, if you do not want to use Plotly Express, you have to add plots (traces) to the figure and configure the figure keys as below.

import plotly.graph_objects as go

fig = go.Figure()
fig.add_trace(go.Scatter(x=sample.index, y=sample['Green'], mode='markers', name = 'Green', marker_color = 'Green'))
fig.add_trace(go.Scatter(x=sample.index, y=sample['Blue'], mode='markers', name = 'Blue', marker_color = 'Blue'))
fig.update_layout(title="The Title", xaxis_title="Quarter", yaxis_title="Value", legend_title="Company")

gives

enter image description here