Plot Pandas DataFrame using Dash

[niks250891]

I have created Pandas DataFrame like this

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import plotly     import pandas as pd     import cufflinks as cf     plotly.offline.init_notebook_mode(connected=True)       all_data = [('2018-04-08', '10:10:11', ['s1',10],['s2',15],['s3',5]),                 ('2018-04-08', '10:20:11', ['s4',8], ['s2',20],['s1',10]),                 ('2018-04-10', '10:30:11', ['s4',10],['s5',6], ['s6',3]),                 ('2018-04-15', '10:18:11', ['s1',10],['s2',15],['s3',5]),                 ]       df = pd.DataFrame(all_data, columns = list("ABCDE"))     df["day/time"] = pd.to_datetime(df["A"] + " "+ df["B"])     df = df.melt(id_vars = ["day/time"], value_vars = ["C", "D", "E"])     df[["category", "val"]] = pd.DataFrame(df.value.values.tolist(), index = df.index)     df = df.pivot(index = "day/time", columns = "category", values = "val")     fig = df.iplot(kind='bar', barmode='stack', asFigure=True)     df['sum'] = df[list(df.columns)].sum(axis=1)     df.to_csv('out1.csv')     print (df)

The dataframe is printed as :

1 2 3 4 5 6

category               s1    s2   s3    s4   s5   s6   sum day/time                                                  2018-04-08 10:10:11  10.0  15.0  5.0   NaN  NaN  NaN  30.0 2018-04-08 10:20:11  10.0  20.0  NaN   8.0  NaN  NaN  38.0 2018-04-10 10:30:11   NaN   NaN  NaN  10.0  6.0  3.0  19.0 2018-04-15 10:18:11  10.0  15.0  5.0   NaN  NaN  NaN  30.0

But I want to plot it in the following way.

X-axis will have time .Y axis Initially will only show sum but will have a drop down and on click will show the values in the data frame(With a different color code ).I find out that instead of using HTML and JS,it can be done using Dash Framework (https://dash.plot.ly/).I read the tutorials but it was of vary different kind and I find difficult to take off.

Any Suggestions on how Can I start?