Black Lives Matter. Please consider donating to Black Girls Code today.

Plotly_relayout does not get last index when hit Home, 1m, 6m, reset axis

Hello all,

When starting I set date range [date1 to date2]. The last index is date2.

2162 index.html:446:37
2163 index.html:446:37
2164 index.html:446:37
2165 index.html:446:37
2166 index.html:446:37
2167 index.html:446:37
2168 index.html:446:37 <<<<< date2

But now when I hit Home (reset axis), 1m, 6m, et… the last index is not 2168. You can hover over point 2168 but as far has computation it does not account for 2168. Any ideas? Thanks.

2162 index.html:94:21
2163 index.html:94:21
2164 index.html:94:21
2165 index.html:94:21
2166 index.html:94:21
2167 index.html:94:21

Can you share a reproducible example to help us debug?

Hopefully this will help.

        var trace1 = {
            x: ['2013-01-01', '2013-01-03', '2013-01-05', '2013-01-07', '2013-01-09', '2013-01-11','2017-01-01', '2017-01-03', '2017-01-05', '2017-01-07', '2017-01-09', '2017-01-11'],
            y: [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6],
            name: "Measurement",
            type: "scatter",
            hoverinfo: 'x+y'
        };

        var data = [trace1];

        var date1 = 2;
        var date2 = trace1.x.length;
        for (var i = date1; i < date2; i++) {
            console.log(trace1.x[i]);
        }
        var layout = {
            xaxis: {
                rangeselector: {buttons: [
                        {
                            step: 'month',
                            stepmode: 'backward',
                            count: 1,
                            label: '1m'
                        }, {
                            step: 'month',
                            stepmode: 'backward',
                            count: 6,
                            label: '6m'
                        }, {
                            step: 'year',
                            stepmode: 'todate',
                            count: 1,
                            label: 'YTD'
                        }, {
                            step: 'year',
                            stepmode: 'backward',
                            count: 1,
                            label: '1y'
                        }, {
                            step: 'all'
                        }
                    ]},
                range: [(new Date(trace1.x[date1])).getTime(), (new Date(trace1.x[date2-1])).getTime()],
                type: 'date',
                title: 'Date', tickformat: '%Y/%m/%d'},
        };

        Plotly.newPlot('graph', data, layout);
        myPlot = document.getElementById('graph');

        myPlot.on('plotly_relayout', function () {
            var xRange = myPlot.layout.xaxis.range;
            var ptsInside = [];

            var N = trace1.x.length;
            var count = 0;
            for (var i = 0; i < N; i++) {
                var xi = trace1.x[i];
                if (xi > xRange[0] && xi <= xRange[1]) {
                    console.log(xi);
                    count++;
                    ptsInside.push(i);
                }
            }
        });

Ha I see, your data is getting line-simplified.

Something like

        var trace1 = {
            line: {simplify: false},
            x: ['2013-01-01', '2013-01-03', '2013-01-05', '2013-01-07', '2013-01-09', '2013-01-11','2017-01-01', '2017-01-03', '2017-01-05', '2017-01-07', '2017-01-09', '2017-01-11'],
            y: [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6],
            name: "Measurement",
            type: "scatter",
            hoverinfo: 'x+y'
        };

should do the trick.

That didn’t work. Thanks.

I found the issue now. The values being compared is string vs. dates. So I converted dates back to string for comparison. That did the trick. Thanks.

        myPlot.on('plotly_relayout', function () {
            var xRange = myPlot.layout.xaxis.range;
            var ptsInside = [];

            var N = trace1.x.length;
            var count = 0;
            for (var i = 0; i < N; i++) {
                var xi = trace1.x[i];
                d1 = (new Date(xRange[0]));
                d2 = (new Date(xRange[1]));
                var ds1 = d1.getUTCFullYear() + "-" + pad(d1.getUTCMonth() + 1) + "-" + pad(d1.getUTCDate());
                var ds2 = d2.getUTCFullYear() + "-" + pad(d2.getUTCMonth() + 1) + "-" + pad(d2.getUTCDate());
                if (xi >= ds1 && xi <= ds2) {
                    console.log('pushed: ' + xi);
                    count++;
                    ptsInside.push(i);
                }
            }
        });