Plotly x Axis is not in order when graphing

[rami95132]

I am graphing a few df and I sorted them before graphing, but in the graph the x axis is not in order. Shown in the pic below

I sorted the df and converted the x axis to datetime.

Here is my code.
df_login_s[‘mininterval’] =pd.to_datetime(df_login_s[‘mininterval’])
df_login_f[‘mininterval’] =pd.to_datetime(df_login_f[‘mininterval’])
df_login_f_p[‘mininterval’]= pd.to_datetime(df_login_f_p[df_login_f_p[‘tenant’]==tenant][‘mininterval’],errors=‘coerce’)
df_login_s_p[‘mininterval’]= pd.to_datetime(df_login_s_p[df_login_s_p[‘tenant’]==tenant][‘mininterval’],errors=‘coerce’)

    fig = make_subplots(rows=2, cols=1,
                shared_xaxes=True,
                vertical_spacing=0.02)

    fig.add_trace(go.Scatter(x=df_login_s[df_login_s['tenant']==tenant]['mininterval'].dt.time.sort_values(),
                            y=df_login_s[df_login_s['tenant']==tenant]['success_ct'],
                        mode='lines',
                        name='current_outage_success'),
                        row=1, col=1)

    fig.add_trace(go.Scatter(x=df_login_s_p[df_login_s_p['tenant']==tenant]['mininterval']
                             , y=df_login_s_p[df_login_s_p['tenant']==tenant]['success_avg'],
                        mode='markers',
                        name='prior_weeks_success'),
                        row=1, col=1)
    
    fig.add_trace(go.Scatter(x=df_login_f[df_login_f['tenant']==tenant]['mininterval'].dt.time.sort_values(),
                            y=df_login_f[df_login_f['tenant']==tenant]['failure_ct'],
                        mode='markers',
                        name='current_outage_fail'),
                        row=2, col=1)

    fig.add_trace(go.Scatter(x=df_login_f_p[df_login_f_p['tenant']==tenant]['mininterval']
                             , y=df_login_f_p[df_login_f_p['tenant']==tenant]['fail_avg'],
                        mode='markers',
                        name='prior_weeks_fail'),
                         row=2, col=1)
    
    fig.update_xaxes(

    title_text = "Time (UTC)", row=2,col=1)

    fig.update_yaxes(
            title_text = "Success Login",
            title_standoff = 25,row=1, col=1)
    
    fig.update_yaxes(
            title_text = "Success Login",
            title_standoff = 25,row=1, col=1)
    fig.update_yaxes(
            title_text = "Fail Login",
            title_standoff = 25,row=2, col=1)
    fig.update_yaxes(
            title_text = "Fail Login",
            title_standoff = 25,row=2, col=1)
    
    
    
    fig.update_layout(height=800, width=1000,
    title="{},{}".format(tenant,single_date))

    fig.show()

[jlfsjunior]

Hi,

Welcome to the community!

There are two potential issues in your code. Firstly, you are ordering the hours when passing the pandas Series to go.Scatter, for example:

    fig.add_trace(go.Scatter(x=df_login_s[df_login_s['tenant']==tenant]['mininterval'].dt.time.sort_values(),
                            y=df_login_s[df_login_s['tenant']==tenant]['success_ct'],
                            #))

This will order the values in x independently of y, so your x and y coordinates won’t match the points anymore. You should instead order the entire dataframe before creating the plots based on the hours.

Now, to answer your question, I believe that Plotly does not handle time objects automatically, so the values are probably casted as strings. One way to handle it is to add the same fixed date to the time, so you’ll have a datetime type again. Since all timestamps are on the same day, the scale will be within the day and it will automatically order the values for you (see here for more info). Then you can just change the tickformat to remove the date information.

Hope this helps!