Multiple X Axes in Time Series Plot

plotly.js
1

I am trying to create a time series plot with two Y axis: one with actual date and time and one with specified points labeled.
I am having no trouble producing a plot with either one or the other, but with both, not only is there only one axis the plot comes up blank. There are no python exceptions or javascript errors in the console.

Here is the code to reproduce, running with either axis on its own works fine.

import plotly
import plotly.graph_objs as go

from datetime import datetime
import pandas_datareader.data as web

df = web.DataReader("aapl", 'yahoo', datetime(2015, 1, 1), datetime(2016, 7, 1))

data = [go.Scatter(x=df.index, y=df.High)]

custom_tickvals = [
    datetime(2015, 4, 1),
    datetime(2015, 7, 4),
    datetime(2015, 12, 25),
]

custom_ticktext = [
    'April Fool\'s Day',
    'Independence Day (US)',
    'Christmas',
]

layout = go.Layout(
    xaxis=dict(ticks=''),
    xaxis2=dict(tickvals=custom_tickvals, ticktext=custom_ticktext),
)

plotly.offline.plot({'data': data, 'layout': layout}, filename='timeseries')

Blank plot
image

Version info
Python 2.7.13
plotly.js v1.31.0

Browsers
Google Chrome Version 62.0.3202.75 (Official Build) (64-bit)
Firefox Nightly 59.0a1 (2017-11-30) (64-bit)

pip freeze
certifi==2017.11.5
chardet==3.0.4
decorator==4.1.2
enum34==1.1.6
functools32==3.2.3.post2
idna==2.6
ipython-genutils==0.2.0
jsonschema==2.6.0
jupyter-core==4.4.0
nbformat==4.4.0
numpy==1.13.3
pandas==0.21.0
pandas-datareader==0.5.0
plotly==2.2.2
python-dateutil==2.6.1
pytz==2017.3
requests==2.18.4
requests-file==1.4.2
requests-ftp==0.3.1
six==1.11.0
traitlets==4.3.2
urllib3==1.22

Right now, I plan to just add the text to the plot itself as a workaround. Anyone have a better idea?

2

Update: was able to reproduce this issue with javascript only:

As you can see, axes are showing up properly, but data is missing.

3

Here’s a working version: https://codepen.io/etpinard/pen/xPmRNW?editors=0010

You had overlaying: 'y' under layout.xaxis which makes no sense for x-axes, so it was ignored which made plotly plot xaxis2 axis over xaxis with no transparency effectively hidden your scatter trace. Setting xaxis2.overlaying: 'x' solves the problem.

1 Like
4

Awesome! Thanks. (PEBCAK shame)

I’m still wondering how to set custom tickvals for xaxis2. For xaxis, just using a list of python datetime.datetime() objects works fine. How can I convert to the float scale being used for the secondary axis? (In your example -1 to 6).

5

Building off your example, this demonstrates my question without the python abstraction:

6

Here’s how: https://codepen.io/etpinard/pen/RjEeLJ?editors=0010

Since your xaxis2 has no trace attached to it, you have to manually set its type ('date') and range.

1 Like