Dash crossfilter chart with callback - Not update graph on hover

Dash Python
1

@nedned @chriddyp @jack @Gatopianista Using the following example, I am trying to create a correlation heatmap on the left with a step slider. When hovering on a heatmap cell, the chart on the right will update to plot the time series of that cell.

Update Graphs on Hover
https://dash.plotly.com/interactive-graphing

I ran into two problems and be able to solve the first one

  1. “error loading layout” - if I commented the slider layout part, the error vanishes but I did not know where the problem is and it seems to me the slider definition is okay and not missing any ) or ] or}. Let me know if this is not the case. - found it is related to the data array type of the slilder, and GOT this issue fixed.
  2. I defined the “customdata” to match the dimension of correlation data however it does not update the graph on the right while Hovering. The hover text is right as it shows the coordinate pair correctly.

Here is how it looks right now, the slider works perfectly except the graph on the right does not update with hovering.

image
image3709×1131 135 KB

2

To fix the customdata issue, it is actually how the coordiantes are passed to through hoverData.

If printing hoverData[‘points’][0], it looks like {‘curveNumber’: 0, ‘x’: 3, ‘y’: 1, ‘z’: 0.6294099197798286}

this is how the hoverData should be defined for the initial value and also how to pass the hoverData through for callback. it is not really related to definition of customdata (partially if it is related in hoverData[‘points’][0] format).

Got both issues fixed and this looks pretty cool.

While waiting for answers, I found a post got its first reply after 8 months of posting it…this scares me off and I have to think hard how to debug through this…and got them fixed. DEBUGGING levels up and you never know where your limit is… cruise on…

1 Like