Why does showRoller on dygraphs fail with rollPeriod > 1

This question was asked here but never answered. When I add showRoller:true to my code and then set it for anything greater than 1, the graph disappears and only the very first point at the left edge is drawn.

Here is my code:

        g[gnum] = new Dygraph(document.getElementById(gdiv), mylines, {
            rollPeriod: 1,
            showRoller: true,
            labels: mylabels,
            drawXAxis: true,
            drawYAxis: true,
            drawXGrid: true,
            drawYGrid: true,
            valueRange: myrange,
            ylabel: ylabel[gnum],
            fillGraph: false,
            labelsShowZeroValues: true,
            highlightCircleSize: 0,
            strokeWidth: 0.4,
            gridLineColor: '#dedede',
            axisLabelColor: '#999999',
            colors: colors,
            rightGap: 15,
            highlightSeriesBackgroundAlpha: .6,
            highlightSeriesOpts: {
                strokeWidth: 0.5,
                strokeBorderWidth: 1,
                strokeBorderColor: "#6699ff",
                highlightCircleSize: 4
            },
            labelsDivWidth: 300,
            labelsDivStyles: {
                'text-align': 'right'
            },
            xAxisLabelWidth: 70,
            axisLabelFontSize: 13,
            axes: {
                x: {
                    pixelsPerLabel:80,
                    valueFormatter: function(ms) {
                        return ' ' + new Date(ms).strftime('%m/%d/%Y %T') + ' ';
                    },
                    axisLabelFormatter: function(d, gran) {
                        return Dygraph.zeropad(d.strftime('%m/%d/%Y'));
                    }
                },
                y: {
                    valueFormatter: function(y) {
                        //if (!y) return ' null ';
                        return ' ' + y + ' ' + yfmt[gnum] + ' ';
                    }
                }
            },
            drawCallback: function(me, initial) {
                var xrange = me.xAxisRange();
                if ((xrange[0] == oldxrange[0] && xrange[1] == oldxrange[1]) || blockRedraw || initial) return;
                else {
                    blockRedraw = true;
                    for (var j = 1; j <= maxGraphs; j++)
                    {
                        if (gnum == j) continue;    // don't draw if this graph or if graph doesn't exist
                        else {
                            g[j].updateOptions({
                                dateWindow: xrange
                            });
                        }
                    }
                    blockRedraw = false;
                    oldxrange = xrange;
                }
            },
            underlayCallback: function(canvas, area, g) {
                // critical threshold lines
                var bottom_left = g.toDomCoords(new Date(first[gnum]), critical[gnum][0]);
                var top_right = g.toDomCoords(new Date(last[gnum]), critical[gnum][0]);
                var left = bottom_left[0];
                var bottom = bottom_left[1];
                var right = top_right[0];
                var top = top_right[1]+5;
                canvas.fillStyle = "rgba(250, 0, 0, 1)";
                canvas.fillRect(left, bottom, right-left, 1);

                bottom_left = g.toDomCoords(new Date(first[gnum]), critical[gnum][1]);
                top_right = g.toDomCoords(new Date(last[gnum]), critical[gnum][1]);
                left = bottom_left[0];
                bottom = bottom_left[1];
                right = top_right[0];
                top = top_right[1]+5;
                canvas.fillStyle = "rgba(250, 0, 0, 1)";
                canvas.fillRect(left, bottom, right-left, 1);

                // maintenance threshold lines
                bottom_left = g.toDomCoords(new Date(first[gnum]), maintenance[gnum][0]);
                top_right = g.toDomCoords(new Date(last[gnum]), maintenance[gnum][0]);
                left = bottom_left[0];
                bottom = bottom_left[1];
                right = top_right[0];
                top = top_right[1]+5;
                canvas.fillStyle = "rgba(255, 220, 0, 1)";
                canvas.fillRect(left, bottom, right-left, 1);

                bottom_left = g.toDomCoords(new Date(first[gnum]), maintenance[gnum][1]);
                top_right = g.toDomCoords(new Date(last[gnum]), maintenance[gnum][1]);
                left = bottom_left[0];
                bottom = bottom_left[1];
                right = top_right[0];
                top = top_right[1]+5;
                canvas.fillStyle = "rgba(255, 220, 0, 1)";
                canvas.fillRect(left, bottom, right-left, 1);
            }
        });

I am thinking it has some conflict with one of my other parameters? When I put dygraphs sample code in my system it works fine. My data looks like this...

Tue Oct 04 2016 11:00:01 GMT-0700 (PDT),136.00,135.78,136.60,137.16,
Tue Oct 04 2016 17:00:01 GMT-0700 (PDT),135.89,135.89,136.56,137.19,
Tue Oct 04 2016 23:00:01 GMT-0700 (PDT),135.93,136.04,136.45,137.23,
Wed Oct 05 2016 05:00:01 GMT-0700 (PDT),135.96,136.00,136.45,137.08,
Wed Oct 05 2016 11:00:01 GMT-0700 (PDT),136.00,135.96,136.49,137.16,
Wed Oct 05 2016 17:00:01 GMT-0700 (PDT),135.96,135.96,136.52,137.12,
Wed Oct 05 2016 23:00:01 GMT-0700 (PDT),135.96,135.89,136.56,137.08,
Thu Oct 06 2016 05:00:01 GMT-0700 (PDT),136.00,135.93,136.56,137.08,
Thu Oct 06 2016 11:00:01 GMT-0700 (PDT),136.00,135.93,136.56,137.08,
Thu Oct 06 2016 11:00:07 GMT-0700 (PDT),135.81,135.78,136.45,136.90,
Thu Oct 06 2016 17:00:01 GMT-0700 (PDT),136.00,135.89,136.60,137.12,
Thu Oct 06 2016 23:00:01 GMT-0700 (PDT),136.07,135.89,136.60,137.05,
Fri Oct 07 2016 05:00:01 GMT-0700 (PDT),136.04,135.89,136.60,137.01,
Fri Oct 07 2016 11:00:01 GMT-0700 (PDT),135.96,135.89,136.52,137.19,

One note: there is a large gap (about 10 days) in my data? Does that matter? I would think dygraphs just calculates a lagging rolling average no matter what the dates were.

Here is the graph with roll period = 1

And here it is with roll period = 2

Note that the points are still active on the graph with roll period = 2. I can mouse over and see the data in the top right. But the lines are not drawn. What can cause this?

Solution

For any others who have this problem, I had asked what kinds of things might cause this so I would know what to look for. I found it. I was converting my precision to 2 decimals with .toFixed(2). That converts the data back into a string. So if you have this problem check your data format. The reason it is confusing is that the graph can draw with the numbers presented as strings. But it cannot do the math necessary to calculate rolling averages when the data is strings.

Hope this helps others!