Plotly.express graph in Dash

Dash Python
1

I am completely new to Dash and I am trying to create a multi line dash graph.
I am using below code, when i do core_loss_line.show() i see the graph in my browser, but i dont get any graph in Dash, it only shows the layout and no data exists. Can you please help.

#/usr/local/bin/python3
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import sqlite3
import pandas as pd
import chart_studio.plotly as py
import plotly.express as px
import plotly.graph_objs as go
conn = sqlite3.connect("/Users/vishnu/dev/scripts/insights.db")
cdf = pd.read_sql_query("select * from core_loss  where type is 'Core' order by date(date)", conn)
edf = pd.read_sql_query("select * from core_loss  where type is 'Edge' order by date(date)", conn)


core_loss_line=px.line(cdf, x='date', y='loss', color='loss')
edge_loss_line=px.line(edf, x='date', y='loss', color='loss')


#core_loss_line.show()
#edge_loss_line.show()
data = [core_loss_line, edge_loss_line]


layout = dict(
    title='Core network Loss and Outages',
    xaxis=dict(
        rangeselector=dict(
            buttons=list([
                dict(count=1,
                     label='1m',
                     step='month',
                     stepmode='backward'),
                dict(count=6,
                     label='6m',
                     step='month',
                     stepmode='backward'),
                dict(step='all')
            ])
        ),
        type='date'
    )
)

fig = dict(data=data, layout=layout)
app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Graph(id='my-graph', figure=fig)
])


server = app.server
if __name__ == '__main__':
    app.run_server(port=8051, debug=True)
2

Hi @vishnubraj welcome to the forum! The px.line commands return a go.Figure object, so you cannot pass them as the data attribute of a figure. If you can combine your two data sets into one single dataframe on which to call px.line a single time, and then call fig.update_layout on the figure created by px.line, that’d be the best solution. Otherwise you can use just the traces of the figures created by px, like

core_loss_line=px.line(cdf, x='date', y='loss', color='loss')
edge_loss_line=px.line(edf, x='date', y='loss', color='loss')

data = core_loss_line['data'] + edge_loss_line['data']
3

Thanks a lot @Emmanuelle !! it worked.