Plotly.restyle - acces & modify trace data

plotly.js
1

I’ve got a dataset that needs to be represented as boxplots over a certain time period (e.g. day, month,…).
Is there a way of doing this using Plotly.restyle() rather than newPlot()

(test) code for creating the plot:

function groupByTest2(graphDiv){
    var data = [
        generateData(200),
        generateData(200)
    ];
    var graph_data = [];
    data.forEach(function(trace){
        graph_data.push({
            y:trace.values,
            x:trace.dates.map(function(x){
                return x.toISOString().slice(0, 7); 
            }),
            customdata: trace.dates,
            type:'box',
            name: trace.name,
        })
    });
    Plotly.newPlot(graphDiv, graph_data, {boxmode: 'group'});_
} //initial grouping by "yyyy-mm"_

I’d like to add some buttons with following functionality:

var restyle = function(graphDiv){
    var update = {
        x: **customdata** //set trace.x to corresponding customdata array
     }
     Plotly.restyle(graphDiv, update)
}

Question is: how can i access the existing traces/data

2

You’re close. This:

var restyle = function(graphDiv){
    var update = {
        x: [customdata] // N.B. notice the extra []
     }
     Plotly.restyle(graphDiv, update)
}

should do the trick.

You can read through https://plot.ly/javascript/plotlyjs-function-reference/#plotlyrestyle for more info on the restyle call signatures.

3

Already tried this though.
“customdata is not defined”

If I use
’ x:[“customdata”] ’
something happens that causes the x-axis to display the tracenames instead of dates though (+ with different datapoints)