How to make subplots with shared axis on Dash

Dash Python
1

Hi,

I am looking to create subplots in Dash with shared X axis. The x axis is datetime object and the y axis is array data.
Is making subplots possible in Dash? I tried this but I get value error stating that is not the property of go.scatter?
How to do it?

The code looks like this

import dash
from dash import dcc
from dash import html
from Line_plot import plot_config2, serialDate_to_datetime # Internal packages
from file_path import file_select # Internal packages
from read_dataFiles import read_mat, read_csv # Internal packages
from dash.dependencies import Input, Output
import plotly.graph_objs as go
from plotly.subplots import make_subplots

app = dash.Dash()

read all the data from the matlab file

filepath = file_select()
key_list, mat_data = read_mat(filepath)

list_mat_data =
for data in mat_data:
list_mat_data.append({‘label’:data,‘value’:data})

Configue layout for subplots

app.layout = html.Div([

html.Div([
    dcc.Dropdown(id='drop1',searchable=True,options=list_mat_data,value='Msg00000201_dieselEnergy_kJ'),
]),
html.Div([
    dcc.Dropdown(id='drop2',searchable=True,options=list_mat_data,value='Msg00000203_engineSpeed'),
]),
html.Div([
    dcc.Dropdown(id='drop3',searchable=True,options=list_mat_data,value='Msg00000204_cngRailTemperatureC')
]),
html.Div([
    dcc.Dropdown(id='drop4',searchable=True,options=list_mat_data,value='Msg00000209_mainUS')
]),
dcc.Graph(id='subPlot_fig')

])

@app.callback(
Output(‘subPlot_fig’,‘figure’),
[Input(‘drop1’,‘value’),
Input(‘drop2’,‘value’),
Input(‘drop3’,‘value’),
Input(‘drop4’,‘value’)])
def update_subPlots(input1,input2,input3,input4):

Code for extracting x and y

x1 = []
temp1 = mat_data[input1]  # A temporary variable to hold selected parameter 2-d value
serialTime = temp1[:, 0]
for t in serialTime:  # Convert each serialdate to date time object
    x1.append(serialDate_to_datetime(t))
y1 = temp1[:, 1]

x2 = []
temp2 = mat_data[input2]  # A temporary variable to hold selected parameter 2-d value
serialTime = temp2[:, 0]
for t in serialTime:  # Convert each serialdate to date time object
    x2.append(serialDate_to_datetime(t))
y2 = temp2[:, 1]

x3 = []
temp3 = mat_data[input3]  # A temporary variable to hold selected parameter 2-d value
serialTime = temp3[:, 0]
for t in serialTime:  # Convert each serialdate to date time object
    x3.append(serialDate_to_datetime(t))
y3 = temp3[:, 1]

x4 = []
temp4 = mat_data[input4]  # A temporary variable to hold selected parameter 2-d value
serialTime = temp4[:, 0]
for t in serialTime:  # Convert each serialdate to date time object
    x4.append(serialDate_to_datetime(t))
y4 = temp4[:, 1]

fig= make_subplots(rows=4,cols=1,
                   shared_xaxes=True,vertical_spacing=0.02)
fig.add_trace(go.Scatter(x = x1,y=y1,
                         row=4,col=1))
fig.add_trace(go.Scatter(x=x2, y=y2,
                         row=3, col=1))
fig.add_trace(go.Scatter(x=x3, y=y3,
                         row=2, col=1))
fig.add_trace(go.Scatter(x=x4, y=y4,
                         row=1, col=1))

return {'data':[fig],
        'layout':go.Layout(
            title='{} , {}, {}, {}'.format(input1,input2,input3,input4),
            hovermode='closest'
        )}

if name == ‘main’:
app.run_server(debug=True)

Dash subplots
Dash subplots1758×757 64 KB

2

The answers lies here
[Dash callback not outputting a subplot]

Instead of fig.add_trace(), I need to do fig.append_trace() so it appends as a list and then return as a fig object and not as ‘data’: fig

maybe someone can give me difference between the two?