Trouble with ScatterGL lines with lots of points

I’m trying to plot data recorded every 2 seconds for a 7 day period. This equals 43200 points per trace per day. The regular ā€˜scatter’ produced plots that were too slow to interact with so I tried ā€˜Scattergl’. It works great for no more than two days of data (86400 points per trace) however if I try to plot three days of data (129600 points per trace) the plots won’t display at all in Chrome and it gives this error:

ASC-L_weekly_2018-11-07.html:7 Uncaught TypeError: Cannot read property 'sizeAvg' of undefined
    at Object.calc (ASC-L_weekly_2018-11-07.html:7)
    at _ (ASC-L_weekly_2018-11-07.html:7)
    at Object.v.doCalcdata (ASC-L_weekly_2018-11-07.html:7)
    at Object.r.plot (ASC-L_weekly_2018-11-07.html:7)
    at Object.r.newPlot (ASC-L_weekly_2018-11-07.html:7)
    at ASC-L_weekly_2018-11-07.html:7
ASC-L_weekly_2018-11-07.html:7 Uncaught TypeError: Cannot read property '0' of undefined
    at Object.v.supplyDefaultsUpdateCalc (ASC-L_weekly_2018-11-07.html:7)
    at Object.v.supplyDefaults (ASC-L_weekly_2018-11-07.html:7)
    at r.plot (ASC-L_weekly_2018-11-07.html:7)
    at Object.r.call (ASC-L_weekly_2018-11-07.html:7)
    at r.layoutReplot (ASC-L_weekly_2018-11-07.html:7)
    at Object.l.syncOrAsync (ASC-L_weekly_2018-11-07.html:7)
    at t (ASC-L_weekly_2018-11-07.html:7)
    at Object.r.call (ASC-L_weekly_2018-11-07.html:7)
    at ASC-L_weekly_2018-11-07.html:7

Same thing happens in firefox with this error:

TypeError: k.marker is undefined[Learn More]
ASC0-3_weekly_2018-11-07.html:7:2766472
    calc_
    [809]</v.doCalcdata
    [732]</r.plot
    [732]</r.newPlot
    <anonymous>
TypeError: t[r] is undefined[Learn More]
ASC0-3_weekly_2018-11-07.html:7:2289251
    [809]</v.supplyDefaultsUpdateCalc
    [809]</v.supplyDefaults
    [732]</r.plot
    [828]</r.call
    [736]</r.layoutReplot
    [696]</l.syncOrAsync
    t
    [828]</r.call
    [809]</v.resize/</t._redrawTimer<

I have done some experimentation and I have found some additional things:

  • There is no problem if I change the mode from ā€œlinesā€ to ā€œmarkersā€.
  • My data is plotted against a datetime and it doesn’t make any difference if it is changed to a numerical index.
  • The problem appears to be with the number of points per trace, not the total number of points. I can add additional traces and nothing changes.

I did some searching I couldn’t find anything about this. Is this a known issue? Is there a workaround for this that I can use to make my plots work?

Actually, it appears the problem occurs where there are 100,000 or more points in the trace. The below program reproduces the problem. If I change N = 99999 it works fine.

import plotly
import plotly.graph_objs as go
import numpy as np

N = 100000
trace = go.Scattergl(
    y = np.random.randn(N),
    mode = 'lines'
)
data = [trace]

fig = go.Figure(data=data)
plotly.offline.plot(fig, filename='testing.html')

Hi @batdan,

Thanks for digging in and reducing the problem down to the 100k points threshold. I was able to reproduce this in plotly.js (the JavaScript library) directly and I opened an issue on it at https://github.com/plotly/plotly.js/issues/3226.

It looks like this is a regression in Plotly.js 1.42 and that it wasn’t a problem in 1.41, so here are two workarounds you can use in the meantime.

  1. Plotly.js 1.42 included in plotly.py 3.4 and Plotly.js 1.41 was included in plotly.py 3.3 so you could downgrade plotly.py to version 3.3
  2. If you want to stay on plotly.py 3.4.0 and you’re only needing to use plotly.offline.plot (not iplot or FigureWidget), you can override the plotly.js version using the include_plotlyjs argument to plotly.offline.plot. For example
plotly.offline.plot(fig,
                    filename='testing.html',
                    include_plotlyjs='https://cdn.plot.ly/plotly-1.41.3.min.js')

Note: the ability to pass a CDN path as the include_plotlyjs argument was added in plotly.py 3.4.0

Hope that helps, and thanks again for letting us know!
-Jon