Python Plotly: Create a plotly HISTOGRAM graph with a dropdown menu and put it in a html

Question

Objective: Create a plotly HISTOGRAM with a dropdown menu and put it in a html. The html will have multiple different types of graphs (not mentioned in this question).

I actually have a large dataframe/csv with many columns; but for this question I'm considering a very SIMPLE csv/dataframe. The csv/dataframe has three columns - HOST,REQUEST,INCIDENT. Below is the sample csv.

HOST,REQUEST,INCIDENT
host1,GET,error
host1,GET,warning
host1,GET,warning
host1,POST,warning
host1,POST,error
host1,POST,warning
host2,GET,warning
host2,GET,error
host2,GET,warning
host2,POST,error
host2,POST,warning
host2,POST,error
host3,GET,error
host3,GET,error
host3,GET,error
host3,POST,error
host3,POST,error
host3,POST,warning
host4,GET,warning
host4,GET,error
host4,GET,error
host4,POST,error
host4,POST,warning
host4,POST,warning

Currently I'm plottting separate HISTOGRAM graphs for 'REQUEST Vs INCIDENT' for each HOST and then creating a html out of it. Means if there're four different hosts, then I'm plotting four different HISTOGRAM graphs in my html. Below is my code.

import pandas as pd
import plotly.express as px

print(f"START")
df = pd.read_csv("dropdown.csv")
hosts = list(df['HOST'].unique())
print(hosts)
for host in hosts:
    title = "Dropdown grap for host = " + host
    df1 = df.loc[(df['HOST'] == host)]
    graph = px.histogram(df1, x='REQUEST', color='INCIDENT', title=title)
    with open("dropdown.html", 'a') as f:
        f.write(graph.to_html(full_html=False, include_plotlyjs=True))
print(f"END")

Below is my output html having four graphs

But My Objective is to plot a single HISTOGRAM graph in my output html, with HOST being the dropdown . I should be able to select different HOSTs from the dropdown to get graph for each respective HOST. Using plotly express I'm NOT getting any option to achieve my required output. Need help with this. Especially if I can achieve this using plotly.express itself that'll be great! Other options are also welcome.

Answer 1

You can loop through all possible hosts, and create a corresponding fig using fig = px.histogram(df_subset_by_host, x='REQUEST', color='INCIDENT') , then extract the x array data stored in the fig._data object, and assign this data to the "x" arg of each host selection button.

For example:

from io import StringIO
import pandas as pd
import plotly.express as px

data_str = StringIO("""HOST,REQUEST,INCIDENT
host1,GET,error
host1,GET,warning
host1,GET,warning
host1,POST,warning
host1,POST,error
host1,POST,warning
host2,GET,warning
host2,GET,error
host2,GET,warning
host2,POST,error
host2,POST,warning
host2,POST,error
host3,GET,error
host3,GET,error
host3,GET,error
host3,POST,error
host3,POST,error
host3,POST,warning
host4,GET,warning
host4,GET,error
host4,GET,error
host4,POST,error
host4,POST,warning
host4,POST,warning""")

df = pd.read_csv(data_str)

hosts = list(df['HOST'].unique())
host_default = "host1"
title = f"Dropdown grap for host = {host_default}"

fig = px.histogram(df.loc[df['HOST'] == host_default], x='REQUEST', color='INCIDENT', title=title)

buttons = []
for host in hosts:
    df_host = df.loc[(df['HOST'] == host)]
    fig_host = px.histogram(df_host, x='REQUEST', color='INCIDENT')
    buttons.append(
        dict(
            label=host,
            method="update",
            args=[
                {
                    "x": [trace['x'] for trace in fig_host._data],
                    "title": f"Dropdown group for host {host}"
                }
            ]
        )
    )

fig.update_layout(
    updatemenus=[
        dict(
            type="dropdown",
            direction="down",
            showactive=True,
            buttons=buttons
        )
    ]
)

fig.show()