How to change the range of x axis through drowpdown menu - javascript plotly

Question

I am trying to create a chart with plolty.js that displays a time series with different values. I have already added rangeselectors to change the time period of the displayed values. I also want to add a dropdown menu to change the range of xaxis (actually the beginDate). I tried to change xaxis.range with the relayout method. But somehow it always shows the year 2000 when I click on a It would be great if you could help me!

buttonsDates=[];
first = beginDate.getFullYear();
end = endDate.getFullYear();
for(i = first; i <= end; i++) buttonsDates.push({
label: i, method: 'relayout',args: [
{
'xaxis.range':          '[new Date(i,1),new Date(i,12)]',
'xaxis.rangeslider':    '[type:date, range:[new Date(i,1),new Date(i,12)]]'
}]
});


var myPlot = node.children[0],
    trace1 = {
        x: values.map(a => a.xvalue), y: values.map(a => a.yvalue),
        type: 'scatter',
        name: 'Messwert des Patienten',
        locale: 'de_DE',
        hovertemplate: '<b>Wert: </b> %{y}' +
            '<br><b>Datum: </b> %{x}<br>'
    },
    data = [
        trace1
    ],
    layout = {
        title: 'Verlaufswert: ' + vitSigTitle,
        hovermode: "closest",
        showlegend: true,
        xaxis: {
            autorange: true,
            range: [beginDate, endDate],
            rangeselector: {
                buttons: [
                    {
                        count: 1,
                        label: 'Tag',
                        step: 'day',
                        stepmode: 'backward'
                    },
                    {
                        count: 1,
                        label: 'Woche',
                        step: 'week',
                        stepmode: 'backward'
                    },
                    {
                        count: 1,
                        label: 'Monat',
                        step: 'month',
                        stepmode: 'backward'
                    },
                    {
                        count: 6,
                        label: '6 Monate',
                        step: 'month',
                        stepmode: 'backward'
                    },
                    {
                        count: 1,
                        label: 'Jahr',
                        step: 'year',
                        stepmode: 'backward'
                    },
                    {
                        count: 1,
                        label: 'Dieses Jahr',
                        step: 'year',
                        stepmode: 'todate'
                    },
                    {
                        label: 'Gesamt',
                        step: 'all'
                    }
                ]
            },
            rangeslider: { range: [beginDate, endDate] },
            type: 'date'
        },
        yaxis: {
            title: vitSigUnit,
            autorange: false,
            range: [minValue - 10, maxValue + 10],
            type: 'linear',
            locale: 'de_DE'
        }, updatemenus: [{
            buttons:
                buttonsDates

        }]
    };




Plotly.newPlot(node.children[0], data, layout, { locale: 'de-DE' });
console.log(Plotly.BUILD);

Answer 1

I managed it like that:

var beginDate = new Date (Math.min.apply(Math, values.map(function (o) { return o.xvalue; })));
    var endDate = new Date (Math.max.apply(Math, values.map(function (o) { return o.xvalue; })));
    var minValue = Math.min.apply(Math, values.map(function (o) { return o.yvalue; }));
    var maxValue = Math.max.apply(Math, values.map(function (o) { return o.yvalue; }));

    const sortedValues = values.sort((a, b) => a.xvalue - b.xvalue);
    buttonsDates=[];
    first = beginDate.getFullYear();
    end = endDate.getFullYear();

   buttonsDates.push({
    label: 'Alle Jahre', method: 'relayout',args: [
    {
    'xaxis.range':  [beginDate,endDate]
    }
    ]
    });

    for(i = first; i <= end; i++) buttonsDates.push({
    label: i, method: 'relayout',args: [
    {
    'xaxis.range':  [new Date(i,0),new Date(i,12)]
    }]
    });