Plot DataFrame with TimedeltaIndex (x-axis)

Hello,

Plotly.py doesn’t display x axis well when using a TimedeltaIndex

import pandas as pd
from pandas.compat import StringIO
import plotly
from plotly.graph_objs import Scatter, Layout

dat = """millis;ax;ay;az
544;-5.65;-0.39;7.45
550;-4.79;-0.59;7.26
556;-4.79;-1.33;6.79
562;-0.63;-1.33;9.53
579;-4.63;0.16;7.96
599;-5.45;0.35;7.34
618;-5.18;1.88;3.77
637;-6.12;-2.00;9.92
658;-3.80;0.51;9.02
677;-4.35;0.04;9.53
697;-3.88;0.71;8.79
717;-4.86;-0.43;8.83
741;-4.16;-1.06;8.79
756;-3.57;0.31;7.92
777;-2.71;2.79;8.32
796;-2.43;5.53;10.55
816;-2.75;3.30;8.67
835;-2.12;2.47;7.85
856;-2.04;2.63;7.85
875;-2.31;2.31;8.04
894;-2.00;3.37;8.12
922;0.86;7.69;9.65
942;-1.45;5.26;8.75
961;-1.96;4.35;8.04
985;-1.80;3.77;8.36
1001;-1.61;3.10;8.55"""

df = pd.read_csv(StringIO(dat), sep=';')
df['millis'] = pd.to_timedelta(df['millis'], unit='ms')
df = df.set_index('millis')

df.index = df.index + pd.Timestamp("1970/01/01")

print(df)
print(df.dtypes)
print(df.index)

plotly.offline.plot({
"data": [
    Scatter(x=df.index, y=df['ax'])
],
"layout": Layout(
    title="DataFrame with %s" % str(type(df.index))
)
})

When using TimedeltaIndex I get

x-axis have odd values starting with P0D 0H0M0.

but when using a DatetimeIndex I get

It will be great if Plotly.py could handle TimedeltaIndex without hassle.

Kind regards

[jwminton]

I’ve tried to fix this in different ways within my scratch plotly.py space but it always comes down to how Timedelta wants to be treated in plotly.js as a numeric entity and not as a weird date or string value.

What’s happening now when using a Timedelta series or index, the underlying data representations are getting written out as raw numerical values and the time unit information is lost. The values just show up in plotly.js as numbers. With extra work, you can cause the timedeltas to be printed out as strings, but then you lose the niceness of a numerical graph (interpolation, scaling, etc).

What would be really nice would be to let timedeltas write themselves out numerically much like they already are, let that numeric value get passed around like it already is but on the plotly.js side, it would be nice if we could have provided a Timedelta specific print format specifier. That way axis labels and hovers print in a timedelta iso format while still being expressed numerically underneath the covers.

I’m suggesting all that’s needed is a Timedelta specific print format specifier. Maybe something that uses %t and %T where the underlying units can be either assumed or tacked on as a modifier, “%t!s” as an idea. More format expression would be nice if possible, the more like date formatting the better if possible, but these are just quick ideas for syntax examples.

There’s just no way to use Timedelta as an axis cleanly without something like this. It either gets turned into weird datetimes or you have to turn them all into strings.

If you only want the time and no days, you can still hack timedelta somewhat by turning them all into actual datetimes:

df.index = df.index + pd.Timestamp("1970/01/01")

and then using a tick format specifier to print only the time portion:

"layout": Layout(
    title="DataFrame with %s" % str(type(df.index))
    xaxis_tickformat = '%X.%LS',
)

Having said all of this, and already wished for more than just iso format, something even more flexible like embedded js or some client side callback might find even more uses: %@func_name

But that’s pie in the sky dreaming.

[ethanopp]

+1