Plot Pandas DataFrame using Dash

[niks250891]

I have created Pandas DataFrame like this

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 :

    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?