My goal is to create an interactive graph using plotly.js. I have an array named data that contains all the information needed for the graph. However, I want users to be able to select specific elements to display on the graph. To achieve this functionality, I need to maintain two separate arrays: one for displayed elements and one for deleted elements.
The project utilizes vuejs and plotly.js.
Below is a snippet of my code :
//clusterCheckboxes represent checkboxes that are initially selected
const clusterCheckboxes = document.querySelectorAll("input[type='checkbox'].cluster")
//The newData array stores the displayed data
this.newData = []
//The deletedLines array stores the data that is not displayed
this.deletedLines = []
for (let i = 0; i < clusterCheckboxes.length; i++) {
for(let j = 0; j < toRaw(this.data).length; j++){
//If the checkbox is checked, add the corresponding lines to newData
if(clusterCheckboxes[i].checked){
this.newData.push(toRaw(this.data)[j])
}else{
this.deletedLines.push(toRaw(this.data)[j])
}
}
}
//Create a new plotly graph with the newData array
Plotly.newPlot('myDiv', this.newData);