Multiple output graphs for different data from single Dataframe in a single Call back function

Hi All,

I am working on displaying graphs for all the metrics(cpu, memory,response times etc.) In Dashboard. We have 30 such metrics. I want to create a single dashboard with 30 graphs for 30 metrics.with dropdowns(start date, end date,Application name) at the top of the screen. I am filtering the dataframe inside the call back function based on metric id and dropdown values.
I am getting callback errors when trying to plot multiple graphs for multiple metrics.
Any suggestions will be really helpful.

If you don’t post your code (along with the errors you are seeing), it’s difficult for folks to provide constructive suggestions.

Hi flyingcujo,

I am getting the error “Callback error updating graph1.figure, graph2.figure graph3.figure” when running the below code.


import glob2
import os
import dash
import dash_core_components as dcc
import dash_html_components as html
import numpy as np
import pandas as pd
from dash.dependencies import Input, Output
from datetime import datetime as dt
from dict import appsinmetrics as dd
import plotly.graph_objs as go
from plotly.subplots import make_subplots

external_stylesheets = [‘https://codepen.io/w3core/pen/EVdGoO.css’]
external_scripts = [‘https://codepen.io/w3core/pen/EVdGoO.js’]

app = dash.Dash(name, external_scripts=external_scripts, external_stylesheets=external_stylesheets)

root= “P:/Project/Data Files”
all_files = glob2.glob(root + “/*.csv”)
mylist =
for filename in all_files:
for chunk in pd.read_csv(filename, chunksize=2000):
mylist.append(chunk)

datapoints_df = pd.concat(mylist, axis=0, ignore_index=True)
del mylist

print(datapoints_df[datapoints_df[‘metrictID’] == 3].head())

datapoints_df[‘time’] = pd.to_datetime(datapoints_df.time, unit=‘s’)
datapoints_df[‘time’] = datapoints_df[‘time’].dt.strftime(’%Y-%m-%d %H:%M:%S’)
datapoints_df[‘Identifier’] = datapoints_df[‘Identifier’].str.upper()

application_list = datapoints_df.copy()

application_list = application_list[‘Identifier’].unique()

metric_df = pd.read_csv(“P:/Project/metric.csv”)
metrics_dict = metric_df.set_index(‘Metric_Description’).to_dict()
metrics_list = [key for (key, value) in metrics_dict[‘Metric_Value’].items()]
data_center_list = [‘dc1’, ‘dc2’, ‘Overall’]

app.layout = html.Div([
html.Div([
html.H1(children=‘CP Predictive Analysis’,
style={“font-weight”: “bold”, “font-family”: “Trebuchet MS, sans-serif”, “text-align”: “center”, “color”: “#09064D”,
‘text-shadow’: ‘1px 1px #000000
}),
html.Label(“Select Date Range”,
style={“font-weight”: “bold”, “font-family”: “URW Chancery L, cursive”, “color”: “#027079”}),
html.Div([
dcc.DatePickerRange(
id=‘my-date-picker-range’,
clearable = True,
reopen_calendar_on_clear=True,
min_date_allowed=dt(1900, 8, 5),
max_date_allowed=dt.today().strftime("%Y-%m-%d"),
initial_visible_month=dt.today().strftime("%Y-%m-%d"),
start_date=datapoints_df[‘time’][0],
end_date=dt.today().strftime("%Y-%m-%d"),
start_date_placeholder_text=“Start Date”,
end_date_placeholder_text=“End Date”,

        ),
        html.Hr()
        #html.Div(id='output-container-date-picker-range')

]),
html.Div([
html.Label(“Available Data Centers”,
style={“font-weight”: “bold”, “font-family”: “URW Chancery L, cursive”, “color”: “#027079”}),
dcc.Dropdown(
id=‘Data Centers’,
options=[{‘label’: i, ‘value’: i} for i in data_center_list],
value= ‘dc1’
),
],style={‘width’: ‘30%’, ‘float’: ‘left’, ‘display’: ‘inline-block’}),
html.Div([
html.Label(“Available Application”,
style={“font-weight”: “bold”, “font-family”: “URW Chancery L, cursive”, “color”: “#027079”}),
dcc.Dropdown(
id=‘application’,
options=[{‘label’: i, ‘value’: i} for i in application_list],
value= ‘’
),
],style={‘width’: ‘30%’, ‘margin-left’: ‘60px’, ‘display’: ‘inline-block’}),

        html.Div(id='All Drop downs')
        ]),
        html.Hr(),
        html.Div([
            html.Div([
                dcc.Graph(
                            id='graph1'
                         ),
            ],style={'width': '48%', 'float': 'left','display': 'inline-block'}),
            html.Div([

                        dcc.Graph(
                            id='graph2'
                        ),
                ],style={'width': '48%', 'float': 'right','display': 'inline-block'})]),

            html.Div([
                html.Div([
                dcc.Graph(
                            id='graph3'
                         ),
                ],style={'width': '35%', 'height':'35%', 'float': 'left', 'display': 'inline-block'})
             ]),

])

def SetColor(x):
if (x < 80):
return “#32064D
elif (80 <= x <= 90):
return “orange”
elif (x > 90):
return “red”

def server_level_view(df):
traces =
for i in df.servername.unique():
df_by_server = df[df[‘servername’] == i]
df_by_server_agg = df_by_server.groupby([‘Identifier’, ‘time’, ‘metrictID’]).agg({‘value’: ‘mean’}).reset_index()
traces.append(go.Scatter(
x=df_by_server_agg[‘time’],
y=df_by_server_agg[‘value’],
text=df_by_server[‘servername’],
mode=‘lines’,
name=str(i),
marker={‘line’: {‘width’: 0.5, ‘color’: list(map(SetColor, df_by_server[‘value’]))}},
visible=‘legendonly’
))
print(“length of df”,len(df))
return traces

def filter_df(date1,date2,Application_Name, Data_center):
start_date = pd.to_datetime(date1)
end_date = pd.to_datetime(date2)
id = dd[Application_Name][‘ce’]
print(“carid:”, carid

if (Data_center == "Overall"):
    id = carid
else:
    id = carid + "" + "_" + Data_center

tmp_df = datapoints_df[datapoints_df['Identifier'].str.contains(id)]

if (len(tmp_df) > 0):
    tmp_df = tmp_df.groupby(['Identifier', 'time', 'metrictID','servername']).agg({'value': 'mean'}).reset_index()
        # tmp_df['time'] = pd.to_numeric(tmp_df['time'], errors='ignore',downcast='float')
    print(len(tmp_df))
    tmp_df = tmp_df[
            tmp_df.time.between(dt.strftime(start_date, "%Y-%m-%d %H:%M:%S"),
                                dt.strftime(end_date, "%Y-%m-%d %H:%M:%S"))]

return tmp_df

@app.callback(
[Output(‘graph1’, ‘figure’),
Output(‘graph2’, ‘figure’),
Output(‘graph3’, ‘figure’),
],
[Input(‘my-date-picker-range’, ‘start_date’),
Input(‘my-date-picker-range’, ‘end_date’),
Input(‘application’, ‘value’),
Input(‘Data Centers’, ‘value’),
])
def update_output(date1, date2, Application_Name, Data_center):

output = []

tmp_df1 = filter_df(date1, date2, Application_Name, Data_center)

for (key, value) in metrics_dict['Metric_Value'].items():
    
    if (key in ['total',Response_Time_Avg','CPU_Idle_Avg']):
        metric_id = value
       
        df = tmp_df1[tmp_df1['metrictID'] == metric_id]
        df_by_server_trace1 = server_level_view(df)
        if (df.empty == False):
            trace1 = go.Scatter(x=df.time, y=df.value, mode='lines', name='CP_Prediction',
                                marker={'line': {'width': 0.5, 'color': list(map(SetColor, df['value']))}})
           
            df_by_server_trace1.append(trace1)

            output.append({'data': df_by_server_trace1,
                      'layout': go.Layout(xaxis=dict(
                          title=dict(text='Timestamp',
                                     font=dict(family='Courier New, monospace', color='#32064D')),
                          rangeselector=dict(
                              buttons=list([
                                  dict(count=1,
                                       label="1m",
                                       step="minute",
                                       stepmode="backward"),
                                  dict(count=10,
                                       label="10m",
                                       step="minute",
                                       stepmode="backward"),
                                  dict(count=1,
                                       label="1h",
                                       step="hour",
                                       stepmode="backward"),
                                  dict(count=24,
                                       label="1d",
                                       step="hour",
                                       stepmode="backward"),
                                  dict(count=1,
                                       label="30d",
                                       step="month",
                                       stepmode="backward"),
                                  dict(count=1,
                                       label="1y",
                                       step="year",
                                       stepmode="backward"),
                                  dict(step="all")
                              ])
                          ),
                          rangeslider=dict(
                              visible=False
                          ),
                          type="date"
                      ),
                          yaxis={'title': {'text': 'values in %',
                                           'font': {'family': 'Courier New, monospace', 'color': '#32064D'}}},
                          xaxis_showgrid=False,
                          yaxis_showgrid=True,
                          title='Dashboard',
                          height=450,
                          paper_bgcolor='rgba(0,0,0,0)',
                          plot_bgcolor='rgba(0,0,0,0)',
                          hovermode='closest',
                          shapes=[dict(
                              type='line',
                              xref='paper',
                              x0=0,
                              y0=86,
                              x1=1,
                              y1=86,
                              line=dict(color="rgb(255,0,0)", width=3)
                          )],
                          annotations=[
                              dict(
                                  x=0.5,
                                  y=86,
                                  xref='paper',
                                  text="Threshold line",
                              )
                          ]
                      )})

        
return output

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

Thanks,
Mahesh