Hi @hoatran , thanks again, in fact there is a change of plan, I will go with the dropdown as it takes less space, however I have another issue with it, but I am not sure if I should start a new topic or we can continue here, anyways, I will post the situation here, but please let me know if you want me to open a new case:
The following code suppose to calculate two graphs (data included), then based on the selection of the drop down, it shows whatever graph select, it works ok, until…
The issue is when I enable the multi select, the initial graph upon loading is ok, but once i select another graph, everything dissappears and even if I cancel all and return to the first graph only, it does not show anymore, any idea why?
Also, when I select more than one graph, can I show 2 per row? because (I think) what will happen is that it will show one per row.
here is the code, and thanks
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
import dash
import dash_bootstrap_components as dbc
from dash import Input, Output, dcc, html
import time, os, glob, sys
import multiprocessing as mp
app = dash.Dash(__name__, title='Network Monitoring Dashboard', external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([
dcc.Interval(
id='interval-component',
interval=5*3000, # in milliseconds
n_intervals=0
),
dbc.Col([
html.Div([
html.Label(['Choose a graph:'],style={'font-weight': 'bold'}),
dcc.Dropdown(
id='dropdown',
options=[
{'label': 'Top 10 incoming traffic IP addresses', 'value': 'fig1'},
{'label': 'Top 10 outgoing traffic IP addresses', 'value': 'fig2'},
{'label': 'Top Active Ports', 'value': 'fig3'},
{'label': 'Top Active IP-Ports', 'value': 'fig4'},
],
multi=True,
value='fig1',
style={"width": "60%"}, clearable=False),
]),
html.Div(id='graph-container'),
])
])
@app.callback(Output('graph-container', 'children'),
[Input('dropdown', 'value'),
Input('interval-component','n_intervals')])
def update_graph(value, n):
data = [['192.168.0.105','192.168.0.103','TCP'],
['192.168.0.103','192.168.0.105','TCP'],
['192.168.0.105','192.168.0.103','UDP'],
['52.98.151.66','192.168.0.105','TCP'],
['192.168.0.105','52.98.151.66','ICMP'],
['52.98.228.226','192.168.0.105','ICMP'],
['52.98.228.226','192.168.0.105','UDP'],
['192.168.0.103','224.0.0.251','1UDP'],
['192.168.0.105','52.98.228.226','TCP']]
column_names = ['Source', 'Destination','Protocol']
for i in range(6):
df = pd.DataFrame (data)
df.columns = column_names
inbound_ip_count = df.groupby('Source').size().nlargest(n=10)
outbound_ip_count = df.groupby('Destination').size().nlargest(n=10)
port_count = df.groupby('Protocol').size().nlargest(n=10)
sources_grp = df.groupby(['Source', 'Protocol'], as_index=False)['Destination']\
.count().sort_values('Destination', ascending=False)
# Get the top 5 occurrences of Source
top_sources = df['Source'].value_counts()[:5].index.tolist()
# Filter the dataframe to only include the top 5 occurrences of Source
top_sources_df = sources_grp[sources_grp['Source'].isin(top_sources)]\
.reset_index(drop=True)
# Rename the count column to 'Protocol Count'
top_sources_df = top_sources_df.rename(columns={'Destination': 'Protocol Count'})
if value == 'fig1':
fig1 = go.Figure(data = px.bar(df['Source'],
x=inbound_ip_count.index, y= inbound_ip_count.values,
labels={
'x': 'IP Addresses',
'y': 'Packets',
},
title='Top 10 incoming traffic IP addresses')
)
return dcc.Graph(id='live-graph2', figure = fig1)
# Ploting top 10 Outbound traffic IP addresses
elif value == 'fig2':
fig2 = go.Figure(data = px.bar(df['Destination'],
x=outbound_ip_count.index, y=outbound_ip_count.values,
labels={
'x': 'IP Addresses',
'y': 'Packets',
},
title='Top 10 Outbound traffic IP addresses')
)
return dcc.Graph(id='live-graph2', figure = fig2)
def server_run():
app.run_server(debug=False, use_reloader=False)
if __name__ == "__main__":
if not os.path.exists(r'c:/DataCapture'):
os.mkdir(r'c:\DataCapture')
# p1 = mp.Process(target=capturing_loop)
p2 = mp.Process(target=server_run)
# p1.start()
p2.start()
