python - Plotly: How to plot histogram with x=hour?

Question

I have a series of data with only rows below

Time,Component
9:32,System
9:32,Class
9:32,System
9:32,System
9:32,System
9:32,Class
9:32,System
9:32,Class
9:32,System
9:32,System
9:32,Class
9:32,Class
9:32,System
9:32,System
9:32,System
9:32,Class
9:32,Class
9:32,System
9:32,Class

How do I plot a histogram with X-axis is the time series by hourly and Y-axis will be the count of the Components happen in that hour.

I tried below but it does not show any data.

import plotly.express as px
series['datetime']=pd.to_datetime(series['Time'])
df = series
fig2 = px.histogram(df, x=df.datetime, y=df.Component, histfunc='sum', title='Histogram Chart')
fig2.show(renderer="iframe_connected")

question from:https://stackoverflow.com/questions/65856933/plotly-how-to-plot-histogram-with-x-hour

Answer 1

import matplotlib.pyplot as plt

df.set_index('Time', inplace=True)
Component_count = df['Component'].resample('H').count()
Time_Component_count = pd.DataFrame({'Time': Component_count.index, 'Component Count': Complonent_count.values})

plt.hist(x = Time_Component_count['Time'], y = Time_Component_count['Component Count'])
plt.show()