Search code examples
pythonplotlystacked-chart

plotly 2 stacked plots various y-axis types but shared x-axis


I am using Plotly to visualize scientific data in interactive mode. I need to visualize a lot of points on two graphs. Now i am using one, and I need to add another one below the first one.. Data is almost similar, the graphs must use one common x-axis, but the first graph must have a linear y-axis and the second - logarithmic.

I need also to share the x-axis - when I zoom one graph the second must be scaled accordingly. How to handle this?

The current code is here:

import plotly.graph_objs as go
from plotly.subplots import make_subplots

x = table["E"]
y = table["SigmaE"]
yerr = table["SD_SigmaE"]

fig = make_subplots(rows=2, cols=1,
                    shared_xaxes=True,
                    vertical_spacing=0.02)

fig = go.Figure([
    #initial data
    go.Scatter(
        name='Experimantal Data',
        x=table["E"],
        y=table["SigmaE"],
        mode='markers',
        line=dict(color='rgb(31, 119, 180)'),
    ),
    #modelled data
      go.Scatter(
        name='Modeled Data',
        x=table["E"],
        y=model_sum,
        mode='lines',
        line=dict(color='rgb(255, 0, 0)'),
    ),
    # top deviation boundary
    go.Scatter(
        name='Experimantal Data Upper Bound (one SD)',
        x=table['E'],
        y=table["SigmaE"]+table['SD_SigmaE'],
        mode='lines',
        marker=dict(color="#444"),
        line=dict(width=0),
        showlegend=False
    ),
    # bottom deviation boundary
    go.Scatter(
        name='Experimantal Data Lower Bound (one SD)',
        x=table['E'],
        y=table["SigmaE"]-table['SD_SigmaE'],
        marker=dict(color="#444"),
        line=dict(width=0),
        mode='lines',
        fillcolor='rgba(68, 68, 68, 0.3)',
        fill='tonexty',
        showlegend=False
    )
])
fig.update_layout(
    yaxis_title='Σ(E)',
    xaxis_title='E',
    title='Experimantal vs Reconstructed Data',
    hovermode="x"
)
fig.update_traces(marker=dict(size=2, line=dict(width=1, color='DarkSlateGrey')))

#how to add yet another graph under the first one with log y-axis and shared x-axis with the first graph??

#fig.update_yaxes(type="log")
fig.show()

Solution

  • the problem solved very easily when I read the plotly docs..

    import plotly.graph_objs as go
    from plotly.subplots import make_subplots
    
    x = table["E"]
    y = table["SigmaE"]
    yerr = table["SD_SigmaE"]
    
    fig = make_subplots(rows=2, cols=1,
                        shared_xaxes=True,
                        vertical_spacing=0.02)
    
    fig.add_trace(
        #initial data
        go.Scatter(
            name='Experimantal Data',
            x=table["E"],
            y=table["SigmaE"],
            mode='markers',
            line=dict(color='rgb(31, 119, 180)'),
        ), row=1, col=1)
    
    fig.add_trace(
        #modelled data
       go.Scatter(
            name='Modeled Data',
            x=table["E"],
            y=model_sum,
            mode='lines',
            line=dict(color='rgb(255, 0, 0)'),
        ), row=1, col=1)
    
    fig.add_trace(
        #top boundary
      go.Scatter(
            name='Experimantal Data Upper Bound (one SD)',
            x=table['E'],
            y=table["SigmaE"]+table['SD_SigmaE'],
            mode='lines',
            marker=dict(color="#444"),
            line=dict(width=0),
            showlegend=False
        ), row=1, col=1)
    
    fig.add_trace(
        #bottom boundary
        go.Scatter(
            name='Experimantal Data Lower Bound (one SD)',
            x=table['E'],
            y=table["SigmaE"]-table['SD_SigmaE'],
            marker=dict(color="#444"),
            line=dict(width=0),
            mode='lines',
            fillcolor='rgba(68, 68, 68, 0.3)',
            fill='tonexty',
            showlegend=False
        ), row=1, col=1)
    
    fig.update_layout(
        yaxis_title='Σ(E)',
        xaxis_title='E',
        title='Experimantal vs Reconstructed Data',
        hovermode="x"
    )
    
    fig.update_traces(marker=dict(size=2, line=dict(width=1, color='DarkSlateGrey')))
    
    #adding the same but in log scale
    fig.add_trace(
        #initial data
        go.Scatter(
            name='Experimantal Data in log scale',
            x=table["E"],
            y=table["SigmaE"],
            mode='markers',
            line=dict(color='rgb(31, 119, 180)'),
        ), row=2, col=1)
    
    fig.add_trace(
        #modelled data
       go.Scatter(
            name='Modeled Data in log scale',
            x=table["E"],
            y=model_sum,
            mode='lines',
            line=dict(color='rgb(255, 0, 0)'),
        ), row=2, col=1)
    
    fig.update_yaxes(title_text="log[Σ(E)]", type="log", row=2, col=1)
    
    fig.show()