How to disable some chart series in HTML using HTTP params?

plotly.js
1

Hi! First of all I want to say thanks! I’ve found solution for all my question except one in the official documentation.

I want. to share HTML version of the plot and hide some series to focus reader attention on exact series. Is is possible to do that with HTTP params or any other way?

Example
Default behaviour, I see all available series https://datascrape.tech/plots/proxy/2024/autumn/unique_ip_addrs_per_second_30min_100rps_us.html

What I want
https://datascrape.tech/plots/proxy/2024/autumn/unique_ip_addrs_per_second_30min_100rps_us.html?showSeries=[Oxylabs] and only series with that name will be visible others will be disabled.

2

One possibility is to check the parameters from the page, and if they are there, you set the visibility for the different traces:

// Getting parameter from address
let url = new URL(window.location)
let params = new URLSearchParams(url.search);
let series = params.get('showSeries').slice(1, -1).split(',') 
// console.log(series) // To debug

// If the parameter is defined from the address, set visibility
if(series.length>0) {
  data.forEach((trace) => {
    trace.visible = series.includes(trace.name)
  })
} 

Plotly.newPlot('graph', data);

I created a codepen here:

That you can also try with:

https://codepen.io/filipesmg/pen/VYZewmG?showSeries=[Oxylabs]
https://codepen.io/filipesmg/pen/VYZewmG?showSeries=[IPRoyal]
https://codepen.io/filipesmg/pen/VYZewmG?showSeries=[IPRoyal,Oxylabs]
1 Like