Plot tick labels as URLs

Hi,

I’ve got a bokeh 0.12.1 HTML output “page” that has come a long way since I first started learning how to work with Bokeh! I’m working on some final nice things to have, and one of those is the ability to make the labels on a graph URLs that the user can click. These would be categorical labels, of course.

I’ve tried using the FuncTickFormatter to create a custom object that has my labels in it and maps the tick number to the label string. However, if I put a string like “MyLabel” as the string for the label, it is literally rendered and not treated as an HTML element.

I saw an example where the TickFormatter class was extended for customer functionality, but this appeared to work only for the bokeh_server.

Is there a way to make the tick labels render as HTML anchor tags?

Thanks!

I should have posted an example of the code I’ve tried. Here is where I’ve used the FuncTickFormatter()

label_formatter = formatters.FuncTickFormatter(code="""
    function (tick) {
        var name_dict = { "0": "",
                          "1": "<a href='www.nytimes.com'>Emphysema</a>",
                          "2":"Airway_Disease",
                          "3":"Gas_Trap",
                          "4":"Obesity_and_Noise",
                          "5":"Hyperinflation" };
        return name_dict[tick]}; """)
···

On Sunday, August 7, 2016 at 5:07:56 PM UTC-7, Ron Cordell wrote:

Hi,

I’ve got a bokeh 0.12.1 HTML output “page” that has come a long way since I first started learning how to work with Bokeh! I’m working on some final nice things to have, and one of those is the ability to make the labels on a graph URLs that the user can click. These would be categorical labels, of course.

I’ve tried using the FuncTickFormatter to create a custom object that has my labels in it and maps the tick number to the label string. However, if I put a string like “MyLabel” as the string for the label, it is literally rendered and not treated as an HTML element.

I saw an example where the TickFormatter class was extended for customer functionality, but this appeared to work only for the bokeh_server.

Is there a way to make the tick labels render as HTML anchor tags?

Thanks!

Hi,

···

On Mon, Aug 8, 2016 at 2:07 AM, Ron Cordell [email protected] wrote:

Hi,

I’ve got a bokeh 0.12.1 HTML output “page” that has come a long way since I first started learning how to work with Bokeh! I’m working on some final nice things to have, and one of those is the ability to make the labels on a graph URLs that the user can click. These would be categorical labels, of course.

I’ve tried using the FuncTickFormatter to create a custom object that has my labels in it and maps the tick number to the label string. However, if I put a string like “MyLabel” as the string for the label, it is literally rendered and not treated as an HTML element.

I saw an example where the TickFormatter class was extended for customer functionality, but this appeared to work only for the bokeh_server.

Is there a way to make the tick labels render as HTML anchor tags?

currently it’s impossible to achieve this, because tick labels are rendered directly to HTML canvas element, so only plain text is allowed. Unfortunately I don’t have any advice right now how to get around this. For a while now we where supposed to implement clickable tick labels, in which case you could configure a callback which would redirect to an external page. This didn’t happen yet. Maybe others will have more helpful insight.

Mateusz

Thanks!

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/10ce7e76-5057-4d77-9907-bbbdda7b245f%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

There is now a proper Label class, and it might not be such a hard thing to make a clickable custom extension subclass. But axes don't currently use Label internally, so that would not really help if the requirement is really for axis tick labels. I think the only avenue would be to make a custom axis subclass, that also plugs into the event system, and does its own hit testing against the internal label locations. But axis is currently one of the largest and most complicated models on the BokehJS side, so I don't think this is a trivial task.

If you have JS experience and want an interesting project to dive into, we can certainly help answer questions and provide guidance. Otherwise, I can only suggest opening a feature request issue on GitHub. However the main priority for the next several months is to get to a 1.0 release so I could not make any comments about when it might possibly get looked at.

Thanks,

Bryan

···

On Aug 8, 2016, at 9:43 AM, Mateusz Paprocki <[email protected]> wrote:

Hi,

On Mon, Aug 8, 2016 at 2:07 AM, Ron Cordell <[email protected]> wrote:
Hi,

I've got a bokeh 0.12.1 HTML output "page" that has come a long way since I first started learning how to work with Bokeh! I'm working on some final nice things to have, and one of those is the ability to make the labels on a graph URLs that the user can click. These would be categorical labels, of course.

I've tried using the FuncTickFormatter to create a custom object that has my labels in it and maps the tick number to the label string. However, if I put a string like "<a href='www.nytimes.com'>MyLabel</a>" as the string for the label, it is literally rendered and not treated as an HTML element.

I saw an example where the TickFormatter class was extended for customer functionality, but this appeared to work only for the bokeh_server.

Is there a way to make the tick labels render as HTML anchor tags?

currently it's impossible to achieve this, because tick labels are rendered directly to HTML canvas element, so only plain text is allowed. Unfortunately I don't have any advice right now how to get around this. For a while now we where supposed to implement clickable tick labels, in which case you could configure a callback which would redirect to an external page. This didn't happen yet. Maybe others will have more helpful insight.

Mateusz

Thanks!

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/10ce7e76-5057-4d77-9907-bbbdda7b245f%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CANFzp8i4FNtAJuikTc6%2B9KB6TLVN9SKCsfa3UMZBC%3DnVSMg4Xw%40mail.gmail.com\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Just a small
follow-up

" There is now a proper Label
class, and it might not be such a hard thing to make a clickable
custom extension subclass."

  I'm not sure you'd need to make an extension. If you set the

render-mode of the Label to css then you may get clickable html
out - I haven’t tried - just a thought.

···

On 8/8/16 9:42 AM, Bryan Van de Ven
wrote:


There is now a proper Label class, and it might not be such a hard thing to make a clickable custom extension subclass. But axes don't currently use Label internally, so that would not really help if the requirement is really for axis tick labels. I think the only avenue would be to make a custom axis subclass, that also plugs into the event system, and does its own hit testing against the internal label locations. But axis is currently one of the largest and most complicated models on the BokehJS side, so I don't think this is a trivial task.
If you have JS experience and want an interesting project to dive into, we can certainly help answer questions and provide guidance. Otherwise, I can only suggest opening a feature request issue on GitHub. However the main priority for the next several months is to get to a 1.0 release so I could not make any comments about when it might possibly get looked at. Thanks,
Bryan

On Aug 8, 2016, at 9:43 AM, Mateusz Paprocki wrote:
Hi,
On Mon, Aug 8, 2016 at 2:07 AM, Ron Cordell wrote:
Hi,
I've got a bokeh 0.12.1 HTML output "page" that has come a long way since I first started learning how to work with Bokeh! I'm working on some final nice things to have, and one of those is the ability to make the labels on a graph URLs that the user can click. These would be categorical labels, of course.
I've tried using the FuncTickFormatter to create a custom object that has my labels in it and maps the tick number to the label string. However, if I put a string like "<a href=''>MyLabel</a>" as the string for the label, it is literally rendered and not treated as an HTML element.
I saw an example where the TickFormatter class was extended for customer functionality, but this appeared to work only for the bokeh_server.
Is there a way to make the tick labels render as HTML anchor tags?
currently it's impossible to achieve this, because tick labels are rendered directly to HTML canvas element, so only plain text is allowed. Unfortunately I don't have any advice right now how to get around this. For a while now we where supposed to implement clickable tick labels, in which case you could configure a callback which would redirect to an external page. This didn't happen yet. Maybe others will have more helpful insight.
Mateusz
Thanks!
-- You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to .
To post to this group, send email to .
To view this discussion on the web visit .
For more options, visit .
-- You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to .
To post to this group, send email to .
To view this discussion on the web visit .
For more options, visit .


Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)

[email protected][email protected]www.nytimes.com[email protected]@continuum.iohttps://groups.google.com/a/continuum.io/d/msgid/bokeh/10ce7e76-5057-4d77-9907-bbbdda7b245f%40continuum.iohttps://groups.google.com/a/continuum.io/d/optout[email protected]@continuum.iohttps://groups.google.com/a/continuum.io/d/msgid/bokeh/CANFzp8i4FNtAJuikTc6%2B9KB6TLVN9SKCsfa3UMZBC%3DnVSMg4Xw%40mail.gmail.comhttps://groups.google.com/a/continuum.io/d/optout

Some great ideas - thanks so much! I’ll definitely take a look and report back. If I do find a way to do it that makes sense I’ll find out how to submit back to the project.

Cheers!!

···

On Mon, Aug 8, 2016 at 10:00 AM, Sarah Bird - Continuum [email protected] wrote:

      Just a small

follow-up

" There is now a proper Label
class, and it might not be such a hard thing to make a clickable
custom extension subclass."

  I'm not sure you'd need to make an extension. If you set the

render-mode of the Label to css then you may get clickable html
out - I haven’t tried - just a thought.

  On 8/8/16 9:42 AM, Bryan Van de Ven

wrote:


There is now a proper Label class, and it might not be such a hard thing to make a clickable custom extension subclass. But axes don't currently use Label internally, so that would not really help if the requirement is really for axis tick labels. I think the only avenue would be to make a custom axis subclass, that also plugs into the event system, and does its own hit testing against the internal label locations. But axis is currently one of the largest and most complicated models on the BokehJS side, so I don't think this is a trivial task.
If you have JS experience and want an interesting project to dive into, we can certainly help answer questions and provide guidance. Otherwise, I can only suggest opening a feature request issue on GitHub. However the main priority for the next several months is to get to a 1.0 release so I could not make any comments about when it might possibly get looked at. Thanks,
Bryan
On Aug 8, 2016, at 9:43 AM, Mateusz Paprocki <[email protected]> wrote:
Hi,
On Mon, Aug 8, 2016 at 2:07 AM, Ron Cordell <[email protected]> wrote:
Hi,
I've got a bokeh 0.12.1 HTML output "page" that has come a long way since I first started learning how to work with Bokeh! I'm working on some final nice things to have, and one of those is the ability to make the labels on a graph URLs that the user can click. These would be categorical labels, of course.
I've tried using the FuncTickFormatter to create a custom object that has my labels in it and maps the tick number to the label string. However, if I put a string like "<a href='[www.nytimes.com](http://www.nytimes.com)'>
MyLabel</a>" as the string for the label, it is literally rendered and not treated as an HTML element.
I saw an example where the TickFormatter class was extended for customer functionality, but this appeared to work only for the bokeh_server.
Is there a way to make the tick labels render as HTML anchor tags?
currently it's impossible to achieve this, because tick labels are rendered directly to HTML canvas element, so only plain text is allowed. Unfortunately I don't have any advice right now how to get around this. For a while now we where supposed to implement clickable tick labels, in which case you could configure a callback which would redirect to an external page. This didn't happen yet. Maybe others will have more helpful insight.
Mateusz
Thanks!
-- You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/10ce7e76-5057-4d77-9907-bbbdda7b245f%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/10ce7e76-5057-4d77-9907-bbbdda7b245f%40continuum.io).
For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout)

.
-- You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/CANFzp8i4FNtAJuikTc6%2B9KB6TLVN9SKCsfa3UMZBC%3DnVSMg4Xw%40mail.gmail.com](https://groups.google.com/a/continuum.io/d/msgid/bokeh/CANFzp8i4FNtAJuikTc6%2B9KB6TLVN9SKCsfa3UMZBC%3DnVSMg4Xw%40mail.gmail.com).
For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).



Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/18c29fc3-d36f-8972-d3cb-0a779c1583ef%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

I tried as Sarah suggested, something like this:

_label = Label(x=70, y=70, x_units='screen', y_units='screen', text='<a href="www.nytimes.com">This is a test</a>',
               render_mode='css', border_line_color='black', border_line_alpha=1.0, level='tool')

fig.add_layout(_label)

And it does render “This is a test” as a label with and underline as opposed to the This is a test that using the FuncTickFormatter yields.

This is what we get, which should work!

This is a test

``

Except that the link isn’t actually clickable - the cursor remains as a + and attempts to click the link don’t do anything.

Thanks again for the ideas!

What happens if you
set level=‘overlay’?

···

On 8/8/16 9:43 PM, Ron Cordell wrote:

I tried as Sarah suggested, something like this:

_label = Label(x=70, y=70, x_units='screen', y_units='screen', text='<a href="">This is a test</a>',
               render_mode='css', border_line_color='black', border_line_alpha=1.0, level='tool'
)
fig.add_layout(_label)
      And it does render "This is a test" as a label with and

underline as opposed to the This is a test that using
the FuncTickFormatter yields.

This is what we get, which should work!

``

      Except that the link isn't actually clickable - the cursor

remains as a + and attempts to click the link don’t do
anything.

Thanks again for the ideas!

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected].

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/29ab027c-0f72-4368-a5ef-171e41bd5c20%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/29ab027c-0f72-4368-a5ef-171e41bd5c20%40continuum.io?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).


Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)

www.nytimes.comwww.nytimes.comwww.nytimes.com

No difference; I tried every level. I’m experimenting to see if I can put a tap tool on the label and use the callback to fire the URL, but no luck wiring that in so far…

···

On Tuesday, August 9, 2016 at 10:50:27 AM UTC-7, Sarah Bird wrote:

      What happens if you

set level=‘overlay’?

On 8/8/16 9:43 PM, Ron Cordell wrote:

I tried as Sarah suggested, something like this:

_label = Label(x=70, y=70, x_units='screen', y_units='screen', text='<a href="[www.nytimes.com](http://www.nytimes.com)">This is a test</a>',
               render_mode='css', border_line_color='black', border_line_alpha=1.0, level='tool'
)
fig.add_layout(_label)
      And it does render "This is a test" as a label with and

underline as opposed to the This is a test that using
the FuncTickFormatter yields.

This is what we get, which should work!

``

      Except that the link isn't actually clickable - the cursor

remains as a + and attempts to click the link don’t do
anything.

Thanks again for the ideas!

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected].

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/29ab027c-0f72-4368-a5ef-171e41bd5c20%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/29ab027c-0f72-4368-a5ef-171e41bd5c20%40continuum.io?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).


Sarah Bird
Developer, Bokeh

    [
      <img alt="Continuum Analytics" src="https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000" style="width:150px;min-height:30px" height="30px" width="150px">
    ](http://continuum.io)