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 update method. Unfortunately nothing happens.
It would be great if you could help me!
enter image description here
buttonsDates = [];
first = beginDate.getFullYear();
end = endDate.getFullYear();
for (i = first; i <= end; i++) buttonsDates.push({ label: i, method: 'update', args: ['xaxis.range', '[new Date(i, 0, 1, 0, 0, 0, 0), endDate]]'] });
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);