Plotly python offline - visit url on click?

Question

Is it possible to configure a plotly plot so that the user is taken to a specific url when they click on a certain data point?

My intended usage is for bar charts: I'd like to be able to click on a bar and then be taken to a url, each bar being configured with a different url.

I'm using plotly python offline to create a <div> which I'm embedding in a website.

Is this possible with the postMessage API on plotly python offline mode?

In Python... no. But you can write Javascript to add listen events OR hover events that correspond to exact pixels on your barchart with a link inside in the postMessage API. github.com/plotly/postMessage-API note you are going to have the easiest conversion if you DON'T go offline when tweaking your code (i.e. if you have sensitive data, just put in random data with numpy.random.randn(100) or something). Once you have your barchart online, then add a .JSON to the link to get the info you need to use the postMessage API. plot.ly/javascript/plotlyjs-function-reference — Matt
– Matt, Commented Apr 14, 2016 at 0:10
Sorry ran out of space... codepen.io/plotly/pen/meaKwE you can change the JavaScript part to type: 'bar' then play around with the hover plot.ly/javascript/hover-events and put in the JavaScript the link you want to display. If I get an example made I'll post it here for your bounty :) You CAN then insert the JavaScript code via Python by doing something like I did here: stackoverflow.com/questions/36554705/… — Matt
– Matt, Commented Apr 14, 2016 at 2:01
@Matt - amazing, thanks! Yes, please post an example and collect that bounty :) — Charon
– Charon, Commented Apr 14, 2016 at 7:35
@Matt - why would it be easier to start in online mode first? — Charon
– Charon, Commented Apr 14, 2016 at 7:35

Matt · Accepted Answer · 2016-04-14 16:09:06Z

3

+100

Here I have created an example for you to edit here - right now it has the bars defined Bar1 Bar2 Bar3 Bar4 which indexes a URL for each in the JavaScript code (edit to your liking). In order to use the PostMessage API the barchart you made has to be embedded in an iframe (see how to do it in the codepen link HTML section) and the JavaScript has to be included (on the right pane in the codepen link).

Full running example: http://codepen.io/mslezak/pen/ZWxMBP

Plotly chart embedded: https://plot.ly/~mslezak/11/y-vs-x/

answered Apr 14, 2016 at 16:09

Matt

2,87219 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Charon Over a year ago

Can I create/deploy iframes in offline mode?

Charon Over a year ago

Thanks a lot for helping and for producing an example. That's really handy and kind.

Matt Over a year ago

You can save the HTML out from codepen and add <!DOCTYPE html><html lang="en"> to the start of the code, then add </html> to the end of it. Save out the codepen javascript as main.js and edit the link to it in the HTML file. Note you may have to do some more things to get it working this way. You can likewise change the embedded iframe to point to your offline chart instead of a URL. Probably better ways of doing this but this should get you there.

asofyan Over a year ago

Hi @Matt, If I generate Plotly chart in offline mode, it doesn't seem to work. Is that only works for Plotly embedded chart (e.g. embedded within plot.ly/xxx address?)

jjrr Over a year ago

Hi @Matt: is there a way to generate it also (offline) in python? – Thanks

Collectives™ on Stack Overflow

Plotly python offline - visit url on click?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related