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: