1

Firstly, I assume its more efficient to reuse an existing plot rather than creating new ones. Here is my usecase, based on user inputs, a couple of traces are added to a plot. When the user inputs change, I need to change the points on the same traces.

Currently, I am deleting the traces and creating a new plot, but ideally, I would like to reuse the existing trace just clear out the data. Is this possible?

Darth Ninja
  • 1,049
  • 2
  • 11
  • 34

2 Answers2

0

You can use deleteTraces, then addTraces. Or you can edit the data directly on existing traces then redraw.

Have a look at the methods definitions: https://plot.ly/javascript/plotlyjs-function-reference/#plotly-addtraces

Hugo Silva
  • 6,748
  • 3
  • 25
  • 42
0

"Cleaning" and "updating" are different things managed in different ways.

If you actually don't want to delete traces but just update them, there are already some questions:

Plotly update data

High performance way to update graph with new data in Plotly?

If instead you actually want to delete traces , you must both delete/update the data and the chart.

This is how I plot my scatter chart:

function tracciaGrafico() {
    data = [];
    trace = [];
    indexTrace = 0;

    // Cleanup only if not first start (else it is already clean, and this would raise an error):
    if (FirstStart) {
        FirstStart = false;
    } else { // Clear chart before plotting if it has already peing plotted.
        Plotly.deleteTraces('myDiv', clearData);
        clearData = [];
    }


    Squadre.forEach(function(squadra) {
        trace[indexTrace] = puntiSquadraCumulativi[squadra]; // Copy trace data from my source array
        data.push(
            {
                x: xArray, 
                y: puntiSquadraCumulativi[squadra], 
                type: "scatter", 
                name: squadra, // from "forEach"
                line: {width: 5}
            }
        ); // Add trace to data array
        clearData.push(indexTrace); // Add trace index to array I will use to clean the old chart
        indexTrace++;
    });
    Plotly.newPlot('myDiv', data); // Plot data
}

While building the chart I build an array (clearData) which then I can use to clear the chart: it just contains all the indexes of all the traces, and it is the argument of Plotly.deleteTraces('myDiv', clearData);

It is worth to note that you can also access single traces using Javascript findIndex() function:

data = [
    {
        line: {width: 5}
        name: "myName1"
        type: "scatter"
        visible: "legendonly" // Plot trace but hide it to the user
        x:  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        y:  [10, 11, 2, 23, 14, 5, 16, 7, 18, 29, 10]
    },
    {
        line: {width: 5}
        name: "myName2"
        type: "scatter"
        visible: "legendonly" // Plot trace but hide it to the user
        x:  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        y:  [10, 1, 12, 13, 4, 25, 16, 17, 8, 19, 20]
    }
];

allTraces=document.getElementById("myDiv").data; // Get data from chart AFTER plotting it.

// Find index of trace-object with "name" property  = "text to find":
result = allTraces.findIndex(obj => { 
    return obj.name === "text to find";
}

// Make specified trace visible to user:
Plotly.restyle(document.getElementById("myDiv"), {"visible": true}, [result]);
jumpjack
  • 841
  • 1
  • 11
  • 17