Adding two Y Axes for a Plotly/Dash object in Flask

Question

How do I create a plot with two y-axis as in the Plot.ly docs example except using Flask?

The code below appropriately produces the plot, but I cant figure out how I might add the layout object.

If this is simply not sanely possible using Plotly, is there a straightforward solution using Dash? I cant seem to find Dash examples equivalent to the linked Plotly examples.

xScale = np.linspace(0, 1, len(acoustic_data))
xScale2 = np.linspace(0, 1, len(time_to_failure))
# Create traces
acoustic_data = go.Scatter(
    x=xScale,
    y=acoustic_data,
    name='acoustic data'
)
time_to_failure = go.Scatter(
    x=xScale2,
    y=time_to_failure,
    name='time to failure',
    # yaxis='y2'
)  
# How do I integrate the layout?
layout = go.Layout(
    title='Earthquick',
    yaxis=dict(
        title='acoustic data'
    ),
    yaxis2=dict(
        title='time to failure',
        overlaying='y',
        side='right'
    )
)
data = [acoustic_data, time_to_failure]
graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)
return graphJSON

Answer 1

Something like this should get you there.

app = dash.Dash()

app.layout = html.Div(style={'backgroundColor': 'black'}, children=[
    dcc.Graph(id='my-graph', figure={}),
    html.Button('Update graph', id='my-button')
])


@app.callback(Output('my-graph', 'figure'),
              [Input('my-button', 'n_clicks')])
def update_graph_callback(button_click: int):
    xScale = np.linspace(0, 1, len(acoustic_data))
    xScale2 = np.linspace(0, 1, len(time_to_failure))
    # Create traces
    acoustic_data = go.Scatter(
        x=xScale,
        y=acoustic_data,
        name='acoustic data'
    )
    time_to_failure = go.Scatter(
        x=xScale2,
        y=time_to_failure,
        name='time to failure',
        # yaxis='y2'
    )
    # How do I integrate the layout?
    layout = go.Layout(
        title='Earthquick',
        yaxis=dict(
            title='acoustic data'
        ),
        yaxis2=dict(
            title='time to failure',
            overlaying='y',
            side='right'
        )
    )
    data = [acoustic_data, time_to_failure]

    return go.Figure(
        data=data,
        layout=layout)


if __name__ == '__main__':
    app.run_server(debug=True)

I ran it locally with some dummy data and it worked. Let me know if you have any trouble with this.

Answer 2

Here is an example of how the sample plotly plot can be integrated into Python Dash.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.plotly as py
import plotly.graph_objs as go

trace1 = go.Scatter(
    x=[1, 2, 3],
    y=[40, 50, 60],
    name='yaxis data'
)
trace2 = go.Scatter(
    x=[2, 3, 4],
    y=[4, 5, 6],
    name='yaxis2 data',
    yaxis='y2'
)

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                trace1, trace2
            ],
            'layout': go.Layout(
                title='Double Y Axis Example',
                yaxis=dict(
                    title='yaxis title'
                ),
                yaxis2=dict(
                    title='yaxis2 title',
                    titlefont=dict(
                        color='rgb(148, 103, 189)'
                    ),
                    tickfont=dict(
                        color='rgb(148, 103, 189)'
                    ),
                    overlaying='y',
                    side='right'
                )
            )
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)