Friday, March 27, 2020

Published March 27, 2020 by with 1 comment

How to Link Plotly Events Between Plots

Wouldn't it be cool if you could hover over one plot, and have it automatically trigger the hover on another plot?
As an example of what I'm talking about, here's a quick demo I put together showing the hover of one plot triggering the hover 50 points over in another plot:

See the Pen plotly link hover by Robert Hamner (@rhamner) on CodePen.


The implemention is remarkably simple though. I have two plots in divs with ids of 'sin' and 'cos'. For each plot I:
  • trigger a method on hover
  • in that method, get the hover location, offset by 50, and trigger the hover in the other plot at that offset location
Here is the code that triggers the 'cos' hover whenever you hover over 'sin':

document.getElementById('sin').on('plotly_hover', function(data) {
  Plotly.Fx.hover('cos',[
    { curveNumber: 0, pointNumber: (data.points[0].x + 50)%100 }
  ]);
});

Unfortunately, Plotly.Fx is not documented so it's hard to find what else you can do. Another obvious set of commands to link though are zoom and pan (just update layout of the linked plot). Here is an example of that also:

See the Pen Plotly link zoom by Robert Hamner (@rhamner) on CodePen.



, ,

      edit

1 comment:

  1. เกมสล็อตAugust 12, 2021 at 4:36 PM

    ⭐️เชิญทางนี้เลย เว็บเดียวจบครบวงจร งบน้อย แตกหนัก

    🎰สล็อต♥️คาสิโน♠️บาคาร่า⚽️กีฬา💥ไฮโล🎲หวย🔢

    💸 เริ่มต้น 1บาท เล่นง่าย จ่ายจริง
    ✅ เว็บตรง มั่นคง ปลอดภัย จ่ายเป็นล้านก็ไม่หวั่น

    🔊 IPRO356 ใจดีให้ทุนฟรี นำไปต่อยอดได้
    📌 ด้วยโปรโมชั่น แนะนำเพื่อน สร้างรายได้ฟรี
    💸 สูงถึง100,000บาทต่อเดือน

    ReplyDelete

Subscribe to: Post Comments (Atom)