How can i determine how many traces exists in my Graph and what are those?

plotly.js
1

Untitled
Untitled.png747×498 18.3 KB

2 
var graphDiv = document.getElementById(/* id of your graph */)

graphDiv.data.length // => returns the number of traces

should do the trick, unless I’m not understanding your question correctly.

1 Like
3

Thank you for you response.
What i’m trying to do is when someone hoverover to a line only that line should have opacity of 1 and rest should fade away with opacity of 0.3. I’m half way down, currently when i hover over to a line it fades away all the markers, but it doesn’t fade away rest of the line as shown in picture.

Untitled
Untitled1167×612 44.7 KB

4

You can listening to plotly_hover event. The point’s curveNumber event data field will give you what’s needed.

See https://plot.ly/javascript/plotlyjs-events/#event-data for more info.

1 Like
5

Is there any way to get curveNumber without triggering any events?

6

I have a hard time understand what you’re trying to do here.

Would you mind sharing a code snippet to help me help you?

7

This is what i have done so far:

var fade_traces = [];
for(var i=0; i<=TESTER.data.length;i++){
fade_traces.push(i);
}
TESTER.on(‘plotly_hover’, function(data){
dragLayer.style.cursor = ‘pointer’

									var marker_y = data.points[0].y;
									var marker_x = data.points[0].x; 
									
									var last_trace = TESTER.data.length;
									
									if(buildonallids.indexOf(realdatanoteid[marker_y])!==-1){
										var marker_color = data.points["0"].data.marker.color;
										var marker_size = data.points["0"].data.marker.size;
										
											var update = {
											    opacity: 0.3
											};
										Plotly.restyle(TESTER,update,fade_traces);
										
									}
							})

This is Normal graph, without any hover effect.

1
1.png830×620 28.4 KB

This is shown when i hover over to a marker which is connected to another marker via a line(it fades away everything apart from lines. But i also want to fade away all the lines except the line which is currently being pointed). What i want is it should only show only one line where the pointer is pointing

2
2.png848×623 32 KB

8 
// this will give you the number of traces on the graph
TESTER.data.length

// inside your plotly_hover handler
data.points[0].curveNumber 
// will give the trace index of the trace that currently hovered on

// calling restyle with
var traceIndices = [];
for(var i = 0; i < TESTER.data.length; i++) {
   if(i !== curveNumber) {
    traceIndices.push(i);
  }
}

// as
Plotly.restyle(TESTER, 'opacity', 0.3, traceIndices);

// should do the trick
1 Like
9

Thank you @etienne for your time, I appreciate it. I have one last question. Can we use hover event only on lines(with no markers on it)?