Combining go.Figure and dcc.Graph

Hey @hapygo

I’m not an expert in plotly graph, but I found the solution.

I changed your callback graph to a go.Scatter figure and then using this example Subplots with logscale and two y axes - #2 by jmmease I added the two scatter line in one graph. Here is the code:

from dash_core_components.Graph import Graph
from dash_html_components.Label import Label
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
from plotly.subplots import make_subplots
import pandas as pd
import plotly.graph_objects as go


app = dash.Dash(__name__)

df = pd.read_csv("CO2.csv")
df.head()

df['date'] = pd.to_datetime(df['date'])


xdata = np.arange(15132, len(df.index)+15132)

fig = go.Figure(go.Scatter(x=xdata, y=df['CO2-value']))
fig.update_layout(
    title="The top graph and sine-wave graph should be one",
    yaxis_title="CO2 value",
)


app.layout = html.Div(
    [
        html.Div([
            dcc.Graph(id="env-graph", figure=fig),
            dcc.Graph(id="wave"),
            dcc.Graph(id="join"),
        ]),
        html.Div([
            html.Label("Frequency 1"),
            dcc.Slider(id='f1',
                       min=0.0081,
                       max=0.05,
                       value=0.017456,
                       step=0.0001)
        ]),
        html.Div([
            html.Label("Amplitude 1"),
            dcc.Slider(
                id='a1',
                min=0.0,
                max=3.0,
                step=0.1,
                value=2.15)
        ]),
        html.Div([
            html.Label("Phase 1"),
            dcc.Slider(
                id='ph1',
                min=-5,
                max=5,
                step=0.1,
                value=1.72)
        ]),
    ])


@ app.callback(
    Output('wave', 'figure'),
    Output('join', 'figure'),
    [Input('f1', 'value'),
     Input('a1', 'value'),
     Input('ph1', 'value'),
     ])
def update_chart(f1, a1, phi1):
    T = 2*np.pi * xdata
    wave1 = a1*np.sin(T * f1 + phi1)
    wave = wave1 + 300
    print(wave)

    lineplot = px.line(
        data_frame=wave
    )
    
    # build the same figure with go.Figure
    
    trace1 = go.Scatter(
        x=xdata, y=wave,
        name='wave'
    )
    trace2 = go.Scatter(
        x=xdata, y=df['CO2-value'],
        name='CO2',
        yaxis='y2'
    )
    data = [trace1, trace2]
    layout = go.Layout(
        title='Double Y Axis Example',
        xaxis=dict(
            title='xaxis title',
        ),
        yaxis=dict(
            title='yaxis title',
            type='log'
        ),
        yaxis2=dict(
            title='yaxis2 title',
            overlaying='y',
            side='right'
        )
    )
    fig = go.Figure(data=data, layout=layout)


    return lineplot, fig


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

And this is the result:

1 Like