a customJS for hovertool that plots circles on another figure than the one hovertool is used on

Community Support
1

Hello there!

I am trying to make a customJS so as to have a hover tool, which as it moves across a figure, it plots a circle on the same point but on another figure.

My attempt has been to modify the example entitled “Hover Over Points” from here : JavaScript callbacks — Bokeh 2.4.2 Documentation

and the modified code looks like this:

from bokeh.plotting import figure, output_file, show

from bokeh.models import ColumnDataSource, HoverTool, CustomJS

from bokeh.layouts import row

output_file(“hover_callback.html”)

define some points and a little graph between them

x = [2, 3, 5, 6, 8, 7]

y = [6, 4, 3, 8, 7, 5]

links = {

0: [1, 2],

1: [0, 3, 4],

2: [0, 5],

3: [1, 4],

4: [1, 3],

5: [2, 3, 4]

}

test_source = ColumnDataSource({‘x_test’: [1], ‘y_test’: [2]})

p = figure(plot_width=400, plot_height=400, tools="", toolbar_location=None, title=‘Hover over points’)

p1 = figure(plot_width=400, plot_height=400, tools="", toolbar_location=None, title=‘Change according to hovering’)

cr2 = p1.circle(‘x_test’, ‘y_test’, source = test_source)

source = ColumnDataSource({‘x0’: , ‘y0’: , ‘x1’: , ‘y1’: })

sr = p.segment(x0=‘x0’, y0=‘y0’, x1=‘x1’, y1=‘y1’, color=‘olive’, alpha=0.6, line_width=3, source=source, )

cr = p.circle(x, y, color=‘olive’, size=30, alpha=0.4, hover_color=‘olive’, hover_alpha=1.0)

Add a hover tool, that sets the link data for a hovered circle

code = “”"

var links = %s;

var data = {‘x0’: , ‘y0’: , ‘x1’: , ‘y1’: };

var test_data = {‘x_test’: , ‘y_test’: };

var cdata = circle.data;

var indices = cb_data.index[‘1d’].indices;

for (i=0; i < indices.length; i++) {

ind0 = indices[i]

for (j=0; j < links[ind0].length; j++) {

ind1 = links[ind0][j];

data[‘x0’].push(cdata.x[ind0]);

data[‘y0’].push(cdata.y[ind0]);

data[‘x1’].push(cdata.x[ind1]);

data[‘y1’].push(cdata.y[ind1]);

test_data[‘x_test’].push(data[‘x0’][0]);

test_data[‘y_test’].push(data[‘y0’][0]);

}

}

segment.data = data;

test_source.data = test_data;

“”" % links

callback = CustomJS(args={‘circle’: cr.data_source, ‘segment’: sr.data_source, ‘test_source’: test_source}, code=code)

p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))

show(row(p,p1))

But, expectedly this plots a circle on the figure on the right, only when the hover tool is positioned on a circle on the left. How can this be extended so as circles are plotted as the hover tool scans across every point on the figure on the left?

Thanks

2

Hi,

The hover tool callback only executes with the mouse is actually hitting a glyph, not for any mouse move. For what you want, you'd want to use a CustomJS callback on a MouseMove event as seen here:

  https://github.com/bokeh/bokeh/blob/master/examples/howto/js_events.py

Thanks,

Bryan

···

On Apr 20, 2018, at 06:38, SinniK Al <[email protected]> wrote:

Hello there!

I am trying to make a customJS so as to have a hover tool, which as it moves across a figure, it plots a circle on the same point but on another figure.

My attempt has been to modify the example entitled "Hover Over Points" from here : https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html

and the modified code looks like this:

from bokeh.plotting import figure, output_file, show
from bokeh.models import ColumnDataSource, HoverTool, CustomJS
from bokeh.layouts import row

output_file("hover_callback.html")

# define some points and a little graph between them
x = [2, 3, 5, 6, 8, 7]
y = [6, 4, 3, 8, 7, 5]
links = {
    0: [1, 2],
    1: [0, 3, 4],
    2: [0, 5],
    3: [1, 4],
    4: [1, 3],
    5: [2, 3, 4]
}

test_source = ColumnDataSource({'x_test': [1], 'y_test': [2]})
p = figure(plot_width=400, plot_height=400, tools="", toolbar_location=None, title='Hover over points')
p1 = figure(plot_width=400, plot_height=400, tools="", toolbar_location=None, title='Change according to hovering')
cr2 = p1.circle('x_test', 'y_test', source = test_source)

source = ColumnDataSource({'x0': , 'y0': , 'x1': , 'y1': })
sr = p.segment(x0='x0', y0='y0', x1='x1', y1='y1', color='olive', alpha=0.6, line_width=3, source=source, )
cr = p.circle(x, y, color='olive', size=30, alpha=0.4, hover_color='olive', hover_alpha=1.0)

# Add a hover tool, that sets the link data for a hovered circle
code = """
var links = %s;
var data = {'x0': , 'y0': , 'x1': , 'y1': };
var test_data = {'x_test': , 'y_test': };
var cdata = circle.data;
var indices = cb_data.index['1d'].indices;
for (i=0; i < indices.length; i++) {
    ind0 = indices[i]
    for (j=0; j < links[ind0].length; j++) {
        ind1 = links[ind0][j];
        data['x0'].push(cdata.x[ind0]);
        data['y0'].push(cdata.y[ind0]);
        data['x1'].push(cdata.x[ind1]);
        data['y1'].push(cdata.y[ind1]);
        test_data['x_test'].push(data['x0'][0]);
        test_data['y_test'].push(data['y0'][0]);
    }
}
segment.data = data;
test_source.data = test_data;
""" % links

callback = CustomJS(args={'circle': cr.data_source, 'segment': sr.data_source, 'test_source': test_source}, code=code)
p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))

show(row(p,p1))

But, expectedly this plots a circle on the figure on the right, only when the hover tool is positioned on a circle on the left. How can this be extended so as circles are plotted as the hover tool scans across every point on the figure on the left?

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/a9634fdb-f7f6-4fde-9be7-1ca3c91eb6ea%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

3

Thanks! I will try this instead.

···

2018-04-20 18:02 GMT+03:00 Bryan Van de ven [email protected]:

Hi,

The hover tool callback only executes with the mouse is actually hitting a glyph, not for any mouse move. For what you want, you’d want to use a CustomJS callback on a MouseMove event as seen here:

    [https://github.com/bokeh/bokeh/blob/master/examples/howto/js_events.py](https://github.com/bokeh/bokeh/blob/master/examples/howto/js_events.py)

Thanks,

Bryan

On Apr 20, 2018, at 06:38, SinniK Al [email protected] wrote:

Hello there!

I am trying to make a customJS so as to have a hover tool, which as it moves across a figure, it plots a circle on the same point but on another figure.

My attempt has been to modify the example entitled “Hover Over Points” from here : https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html

and the modified code looks like this:

from bokeh.plotting import figure, output_file, show

from bokeh.models import ColumnDataSource, HoverTool, CustomJS

from bokeh.layouts import row

output_file(“hover_callback.html”)

define some points and a little graph between them

x = [2, 3, 5, 6, 8, 7]

y = [6, 4, 3, 8, 7, 5]

links = {

0: [1, 2],

1: [0, 3, 4],

2: [0, 5],

3: [1, 4],

4: [1, 3],

5: [2, 3, 4]

}

test_source = ColumnDataSource({‘x_test’: [1], ‘y_test’: [2]})

p = figure(plot_width=400, plot_height=400, tools=“”, toolbar_location=None, title=‘Hover over points’)

p1 = figure(plot_width=400, plot_height=400, tools=“”, toolbar_location=None, title=‘Change according to hovering’)

cr2 = p1.circle(‘x_test’, ‘y_test’, source = test_source)

source = ColumnDataSource({‘x0’: , ‘y0’: , ‘x1’: , ‘y1’: })

sr = p.segment(x0=‘x0’, y0=‘y0’, x1=‘x1’, y1=‘y1’, color=‘olive’, alpha=0.6, line_width=3, source=source, )

cr = p.circle(x, y, color=‘olive’, size=30, alpha=0.4, hover_color=‘olive’, hover_alpha=1.0)

Add a hover tool, that sets the link data for a hovered circle

code = “”"

var links = %s;

var data = {‘x0’: , ‘y0’: , ‘x1’: , ‘y1’: };

var test_data = {‘x_test’: , ‘y_test’: };

var cdata = circle.data;

var indices = cb_data.index[‘1d’].indices;

for (i=0; i < indices.length; i++) {

ind0 = indices[i]

for (j=0; j < links[ind0].length; j++) {

    ind1 = links[ind0][j];

    data['x0'].push(cdata.x[ind0]);

    data['y0'].push(cdata.y[ind0]);

    data['x1'].push(cdata.x[ind1]);

    data['y1'].push(cdata.y[ind1]);

    test_data['x_test'].push(data['x0'][0]);

    test_data['y_test'].push(data['y0'][0]);

}

}

segment.data = data;

test_source.data = test_data;

“”" % links

callback = CustomJS(args={‘circle’: cr.data_source, ‘segment’: sr.data_source, ‘test_source’: test_source}, code=code)

p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))

show(row(p,p1))

But, expectedly this plots a circle on the figure on the right, only when the hover tool is positioned on a circle on the left. How can this be extended so as circles are plotted as the hover tool scans across every point on the figure on the left?

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/a9634fdb-f7f6-4fde-9be7-1ca3c91eb6ea%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/E8517B89-9879-4388-9391-4F51C9DF1106%40anaconda.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

4

Hi Bryan,

It looks to me that CustomJS callback executes enormous number of times when mouse is above plot (regardless of specific Glyph). I put “console.log” instruction in callback and it continues to be called when I move the mouse.

Actually there is no difference if you add “, renderers=[cr])” argument or not.

In previous versions of Bokeh it was possible to add custom HTMLs to Hover Tool which included tags executed when Hover window opens. It looks like there is no such option in the current implementation (those scripts are not get executed anymore).

Please advise.

···

On Friday, April 20, 2018 at 6:02:31 PM UTC+3, Bryan Van de ven wrote:

Hi,

The hover tool callback only executes with the mouse is actually hitting a glyph, not for any mouse move. For what you want, you’d want to use a CustomJS callback on a MouseMove event as seen here:

    [https://github.com/bokeh/bokeh/blob/master/examples/howto/js_events.py](https://github.com/bokeh/bokeh/blob/master/examples/howto/js_events.py)

Thanks,

Bryan

On Apr 20, 2018, at 06:38, SinniK Al [email protected] wrote:

Hello there!

I am trying to make a customJS so as to have a hover tool, which as it moves across a figure, it plots a circle on the same point but on another figure.

My attempt has been to modify the example entitled “Hover Over Points” from here : https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html

and the modified code looks like this:

from bokeh.plotting import figure, output_file, show

from bokeh.models import ColumnDataSource, HoverTool, CustomJS

from bokeh.layouts import row

output_file(“hover_callback.html”)

define some points and a little graph between them

x = [2, 3, 5, 6, 8, 7]

y = [6, 4, 3, 8, 7, 5]

links = {

0: [1, 2],

1: [0, 3, 4],

2: [0, 5],

3: [1, 4],

4: [1, 3],

5: [2, 3, 4]

}

test_source = ColumnDataSource({‘x_test’: [1], ‘y_test’: [2]})

p = figure(plot_width=400, plot_height=400, tools=“”, toolbar_location=None, title=‘Hover over points’)

p1 = figure(plot_width=400, plot_height=400, tools=“”, toolbar_location=None, title=‘Change according to hovering’)

cr2 = p1.circle(‘x_test’, ‘y_test’, source = test_source)

source = ColumnDataSource({‘x0’: , ‘y0’: , ‘x1’: , ‘y1’: })

sr = p.segment(x0=‘x0’, y0=‘y0’, x1=‘x1’, y1=‘y1’, color=‘olive’, alpha=0.6, line_width=3, source=source, )

cr = p.circle(x, y, color=‘olive’, size=30, alpha=0.4, hover_color=‘olive’, hover_alpha=1.0)

Add a hover tool, that sets the link data for a hovered circle

code = “”"

var links = %s;

var data = {‘x0’: , ‘y0’: , ‘x1’: , ‘y1’: };

var test_data = {‘x_test’: , ‘y_test’: };

var cdata = circle.data;

var indices = cb_data.index[‘1d’].indices;

for (i=0; i < indices.length; i++) {

ind0 = indices[i]

for (j=0; j < links[ind0].length; j++) {

    ind1 = links[ind0][j];

    data['x0'].push(cdata.x[ind0]);

    data['y0'].push(cdata.y[ind0]);

    data['x1'].push(cdata.x[ind1]);

    data['y1'].push(cdata.y[ind1]);

    test_data['x_test'].push(data['x0'][0]);

    test_data['y_test'].push(data['y0'][0]);

}

}

segment.data = data;

test_source.data = test_data;

“”" % links

callback = CustomJS(args={‘circle’: cr.data_source, ‘segment’: sr.data_source, ‘test_source’: test_source}, code=code)

p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))

show(row(p,p1))

But, expectedly this plots a circle on the figure on the right, only when the hover tool is positioned on a circle on the left. How can this be extended so as circles are plotted as the hover tool scans across every point on the figure on the left?

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/a9634fdb-f7f6-4fde-9be7-1ca3c91eb6ea%40continuum.io.

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

5

Hi,

Yes, the mousemove event executes on every single mouse move move. From your description I thought that was what you wanted? (Having a glyph on another plot track the mouse) Did I misunderstand?

Bryan

···

On Apr 24, 2018, at 05:17, Meir Tseitlin [email protected] wrote:

Hi Bryan,

It looks to me that CustomJS callback executes enormous number of times when mouse is above plot (regardless of specific Glyph). I put “console.log” instruction in callback and it continues to be called when I move the mouse.

Actually there is no difference if you add “, renderers=[cr])” argument or not.

In previous versions of Bokeh it was possible to add custom HTMLs to Hover Tool which included tags executed when Hover window opens. It looks like there is no such option in the current implementation (those scripts are not get executed anymore).

Please advise.

On Friday, April 20, 2018 at 6:02:31 PM UTC+3, Bryan Van de ven wrote:

Hi,

The hover tool callback only executes with the mouse is actually hitting a glyph, not for any mouse move. For what you want, you’d want to use a CustomJS callback on a MouseMove event as seen here:

    [https://github.com/bokeh/bokeh/blob/master/examples/howto/js_events.py](https://github.com/bokeh/bokeh/blob/master/examples/howto/js_events.py)

Thanks,

Bryan

On Apr 20, 2018, at 06:38, SinniK Al [email protected] wrote:

Hello there!

I am trying to make a customJS so as to have a hover tool, which as it moves across a figure, it plots a circle on the same point but on another figure.

My attempt has been to modify the example entitled “Hover Over Points” from here : https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html

and the modified code looks like this:

from bokeh.plotting import figure, output_file, show

from bokeh.models import ColumnDataSource, HoverTool, CustomJS

from bokeh.layouts import row

output_file(“hover_callback.html”)

define some points and a little graph between them

x = [2, 3, 5, 6, 8, 7]

y = [6, 4, 3, 8, 7, 5]

links = {

0: [1, 2],

1: [0, 3, 4],

2: [0, 5],

3: [1, 4],

4: [1, 3],

5: [2, 3, 4]

}

test_source = ColumnDataSource({‘x_test’: [1], ‘y_test’: [2]})

p = figure(plot_width=400, plot_height=400, tools=“”, toolbar_location=None, title=‘Hover over points’)

p1 = figure(plot_width=400, plot_height=400, tools=“”, toolbar_location=None, title=‘Change according to hovering’)

cr2 = p1.circle(‘x_test’, ‘y_test’, source = test_source)

source = ColumnDataSource({‘x0’: , ‘y0’: , ‘x1’: , ‘y1’: })

sr = p.segment(x0=‘x0’, y0=‘y0’, x1=‘x1’, y1=‘y1’, color=‘olive’, alpha=0.6, line_width=3, source=source, )

cr = p.circle(x, y, color=‘olive’, size=30, alpha=0.4, hover_color=‘olive’, hover_alpha=1.0)

Add a hover tool, that sets the link data for a hovered circle

code = “”"

var links = %s;

var data = {‘x0’: , ‘y0’: , ‘x1’: , ‘y1’: };

var test_data = {‘x_test’: , ‘y_test’: };

var cdata = circle.data;

var indices = cb_data.index[‘1d’].indices;

for (i=0; i < indices.length; i++) {

ind0 = indices[i]

for (j=0; j < links[ind0].length; j++) {

    ind1 = links[ind0][j];

    data['x0'].push(cdata.x[ind0]);

    data['y0'].push(cdata.y[ind0]);

    data['x1'].push(cdata.x[ind1]);

    data['y1'].push(cdata.y[ind1]);

    test_data['x_test'].push(data['x0'][0]);

    test_data['y_test'].push(data['y0'][0]);

}

}

segment.data = data;

test_source.data = test_data;

“”" % links

callback = CustomJS(args={‘circle’: cr.data_source, ‘segment’: sr.data_source, ‘test_source’: test_source}, code=code)

p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))

show(row(p,p1))

But, expectedly this plots a circle on the figure on the right, only when the hover tool is positioned on a circle on the left. How can this be extended so as circles are plotted as the hover tool scans across every point on the figure on the left?

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/a9634fdb-f7f6-4fde-9be7-1ca3c91eb6ea%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/a76c90b8-ddfe-4c00-8b61-dab3eef21779%40continuum.io.

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

6

I think your answer is toward original @Sinnik (original author).

In my case I am looking for a way to “inject” JS code which will be executed when Hover tooltip opens. From your words (“The hover tool callback only executes with the mouse is actually hitting a glyph, not for any mouse move.”) I understood this is the case, but the way the callback behaves - I am not sure how is it related to Hover tool at all…

Thanks

···

On Tuesday, April 24, 2018 at 4:58:40 PM UTC+3, Bryan Van de ven wrote:

Hi,

Yes, the mousemove event executes on every single mouse move move. From your description I thought that was what you wanted? (Having a glyph on another plot track the mouse) Did I misunderstand?

Bryan

On Apr 24, 2018, at 05:17, Meir Tseitlin [email protected] wrote:

Hi Bryan,

It looks to me that CustomJS callback executes enormous number of times when mouse is above plot (regardless of specific Glyph). I put “console.log” instruction in callback and it continues to be called when I move the mouse.

Actually there is no difference if you add “, renderers=[cr])” argument or not.

In previous versions of Bokeh it was possible to add custom HTMLs to Hover Tool which included tags executed when Hover window opens. It looks like there is no such option in the current implementation (those scripts are not get executed anymore).

Please advise.

On Friday, April 20, 2018 at 6:02:31 PM UTC+3, Bryan Van de ven wrote:

Hi,

The hover tool callback only executes with the mouse is actually hitting a glyph, not for any mouse move. For what you want, you’d want to use a CustomJS callback on a MouseMove event as seen here:

    [https://github.com/bokeh/bokeh/blob/master/examples/howto/js_events.py](https://github.com/bokeh/bokeh/blob/master/examples/howto/js_events.py)

Thanks,

Bryan

On Apr 20, 2018, at 06:38, SinniK Al [email protected] wrote:

Hello there!

I am trying to make a customJS so as to have a hover tool, which as it moves across a figure, it plots a circle on the same point but on another figure.

My attempt has been to modify the example entitled “Hover Over Points” from here : https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html

and the modified code looks like this:

from bokeh.plotting import figure, output_file, show

from bokeh.models import ColumnDataSource, HoverTool, CustomJS

from bokeh.layouts import row

output_file(“hover_callback.html”)

define some points and a little graph between them

x = [2, 3, 5, 6, 8, 7]

y = [6, 4, 3, 8, 7, 5]

links = {

0: [1, 2],

1: [0, 3, 4],

2: [0, 5],

3: [1, 4],

4: [1, 3],

5: [2, 3, 4]

}

test_source = ColumnDataSource({‘x_test’: [1], ‘y_test’: [2]})

p = figure(plot_width=400, plot_height=400, tools=“”, toolbar_location=None, title=‘Hover over points’)

p1 = figure(plot_width=400, plot_height=400, tools=“”, toolbar_location=None, title=‘Change according to hovering’)

cr2 = p1.circle(‘x_test’, ‘y_test’, source = test_source)

source = ColumnDataSource({‘x0’: , ‘y0’: , ‘x1’: , ‘y1’: })

sr = p.segment(x0=‘x0’, y0=‘y0’, x1=‘x1’, y1=‘y1’, color=‘olive’, alpha=0.6, line_width=3, source=source, )

cr = p.circle(x, y, color=‘olive’, size=30, alpha=0.4, hover_color=‘olive’, hover_alpha=1.0)

Add a hover tool, that sets the link data for a hovered circle

code = “”"

var links = %s;

var data = {‘x0’: , ‘y0’: , ‘x1’: , ‘y1’: };

var test_data = {‘x_test’: , ‘y_test’: };

var cdata = circle.data;

var indices = cb_data.index[‘1d’].indices;

for (i=0; i < indices.length; i++) {

ind0 = indices[i]

for (j=0; j < links[ind0].length; j++) {

    ind1 = links[ind0][j];

    data['x0'].push(cdata.x[ind0]);

    data['y0'].push(cdata.y[ind0]);

    data['x1'].push(cdata.x[ind1]);

    data['y1'].push(cdata.y[ind1]);

    test_data['x_test'].push(data['x0'][0]);

    test_data['y_test'].push(data['y0'][0]);

}

}

segment.data = data;

test_source.data = test_data;

“”" % links

callback = CustomJS(args={‘circle’: cr.data_source, ‘segment’: sr.data_source, ‘test_source’: test_source}, code=code)

p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))

show(row(p,p1))

But, expectedly this plots a circle on the figure on the right, only when the hover tool is positioned on a circle on the left. How can this be extended so as circles are plotted as the hover tool scans across every point on the figure on the left?

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/a9634fdb-f7f6-4fde-9be7-1ca3c91eb6ea%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/a76c90b8-ddfe-4c00-8b61-dab3eef21779%40continuum.io.

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

7

Actually I was thinking of the tap tool, which only executes on taps that hit a glyph. The hover tool executes on every mouse move, that’s what people asked for a long time ago. But a better way to do that today is to use the named event.

Bryan

···

On Apr 24, 2018, at 07:06, Meir Tseitlin [email protected] wrote:

I think your answer is toward original @Sinnik (original author).

In my case I am looking for a way to “inject” JS code which will be executed when Hover tooltip opens. From your words (“The hover tool callback only executes with the mouse is actually hitting a glyph, not for any mouse move.”) I understood this is the case, but the way the callback behaves - I am not sure how is it related to Hover tool at all…

Thanks

On Tuesday, April 24, 2018 at 4:58:40 PM UTC+3, Bryan Van de ven wrote:

Hi,

Yes, the mousemove event executes on every single mouse move move. From your description I thought that was what you wanted? (Having a glyph on another plot track the mouse) Did I misunderstand?

Bryan

On Apr 24, 2018, at 05:17, Meir Tseitlin [email protected] wrote:

Hi Bryan,

It looks to me that CustomJS callback executes enormous number of times when mouse is above plot (regardless of specific Glyph). I put “console.log” instruction in callback and it continues to be called when I move the mouse.

Actually there is no difference if you add “, renderers=[cr])” argument or not.

In previous versions of Bokeh it was possible to add custom HTMLs to Hover Tool which included tags executed when Hover window opens. It looks like there is no such option in the current implementation (those scripts are not get executed anymore).

Please advise.

On Friday, April 20, 2018 at 6:02:31 PM UTC+3, Bryan Van de ven wrote:

Hi,

The hover tool callback only executes with the mouse is actually hitting a glyph, not for any mouse move. For what you want, you’d want to use a CustomJS callback on a MouseMove event as seen here:

    [https://github.com/bokeh/bokeh/blob/master/examples/howto/js_events.py](https://github.com/bokeh/bokeh/blob/master/examples/howto/js_events.py)

Thanks,

Bryan

On Apr 20, 2018, at 06:38, SinniK Al [email protected] wrote:

Hello there!

I am trying to make a customJS so as to have a hover tool, which as it moves across a figure, it plots a circle on the same point but on another figure.

My attempt has been to modify the example entitled “Hover Over Points” from here : https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html

and the modified code looks like this:

from bokeh.plotting import figure, output_file, show

from bokeh.models import ColumnDataSource, HoverTool, CustomJS

from bokeh.layouts import row

output_file(“hover_callback.html”)

define some points and a little graph between them

x = [2, 3, 5, 6, 8, 7]

y = [6, 4, 3, 8, 7, 5]

links = {

0: [1, 2],

1: [0, 3, 4],

2: [0, 5],

3: [1, 4],

4: [1, 3],

5: [2, 3, 4]

}

test_source = ColumnDataSource({‘x_test’: [1], ‘y_test’: [2]})

p = figure(plot_width=400, plot_height=400, tools=“”, toolbar_location=None, title=‘Hover over points’)

p1 = figure(plot_width=400, plot_height=400, tools=“”, toolbar_location=None, title=‘Change according to hovering’)

cr2 = p1.circle(‘x_test’, ‘y_test’, source = test_source)

source = ColumnDataSource({‘x0’: , ‘y0’: , ‘x1’: , ‘y1’: })

sr = p.segment(x0=‘x0’, y0=‘y0’, x1=‘x1’, y1=‘y1’, color=‘olive’, alpha=0.6, line_width=3, source=source, )

cr = p.circle(x, y, color=‘olive’, size=30, alpha=0.4, hover_color=‘olive’, hover_alpha=1.0)

Add a hover tool, that sets the link data for a hovered circle

code = “”"

var links = %s;

var data = {‘x0’: , ‘y0’: , ‘x1’: , ‘y1’: };

var test_data = {‘x_test’: , ‘y_test’: };

var cdata = circle.data;

var indices = cb_data.index[‘1d’].indices;

for (i=0; i < indices.length; i++) {

ind0 = indices[i]

for (j=0; j < links[ind0].length; j++) {

    ind1 = links[ind0][j];

    data['x0'].push(cdata.x[ind0]);

    data['y0'].push(cdata.y[ind0]);

    data['x1'].push(cdata.x[ind1]);

    data['y1'].push(cdata.y[ind1]);

    test_data['x_test'].push(data['x0'][0]);

    test_data['y_test'].push(data['y0'][0]);

}

}

segment.data = data;

test_source.data = test_data;

“”" % links

callback = CustomJS(args={‘circle’: cr.data_source, ‘segment’: sr.data_source, ‘test_source’: test_source}, code=code)

p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))

show(row(p,p1))

But, expectedly this plots a circle on the figure on the right, only when the hover tool is positioned on a circle on the left. How can this be extended so as circles are plotted as the hover tool scans across every point on the figure on the left?

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/a9634fdb-f7f6-4fde-9be7-1ca3c91eb6ea%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/a76c90b8-ddfe-4c00-8b61-dab3eef21779%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/81bcc8ad-b0c7-451c-a94c-9d2feae15662%40continuum.io.

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

8

So there is no way to execute JS code in Hover tooltip?

Tnx

···

On Tuesday, April 24, 2018 at 5:15:56 PM UTC+3, Bryan Van de ven wrote:

Actually I was thinking of the tap tool, which only executes on taps that hit a glyph. The hover tool executes on every mouse move, that’s what people asked for a long time ago. But a better way to do that today is to use the named event.

Bryan

On Apr 24, 2018, at 07:06, Meir Tseitlin [email protected] wrote:

I think your answer is toward original @Sinnik (original author).

In my case I am looking for a way to “inject” JS code which will be executed when Hover tooltip opens. From your words (“The hover tool callback only executes with the mouse is actually hitting a glyph, not for any mouse move.”) I understood this is the case, but the way the callback behaves - I am not sure how is it related to Hover tool at all…

Thanks

On Tuesday, April 24, 2018 at 4:58:40 PM UTC+3, Bryan Van de ven wrote:

Hi,

Yes, the mousemove event executes on every single mouse move move. From your description I thought that was what you wanted? (Having a glyph on another plot track the mouse) Did I misunderstand?

Bryan

On Apr 24, 2018, at 05:17, Meir Tseitlin [email protected] wrote:

Hi Bryan,

It looks to me that CustomJS callback executes enormous number of times when mouse is above plot (regardless of specific Glyph). I put “console.log” instruction in callback and it continues to be called when I move the mouse.

Actually there is no difference if you add “, renderers=[cr])” argument or not.

In previous versions of Bokeh it was possible to add custom HTMLs to Hover Tool which included tags executed when Hover window opens. It looks like there is no such option in the current implementation (those scripts are not get executed anymore).

Please advise.

On Friday, April 20, 2018 at 6:02:31 PM UTC+3, Bryan Van de ven wrote:

Hi,

The hover tool callback only executes with the mouse is actually hitting a glyph, not for any mouse move. For what you want, you’d want to use a CustomJS callback on a MouseMove event as seen here:

    [https://github.com/bokeh/bokeh/blob/master/examples/howto/js_events.py](https://github.com/bokeh/bokeh/blob/master/examples/howto/js_events.py)

Thanks,

Bryan

On Apr 20, 2018, at 06:38, SinniK Al [email protected] wrote:

Hello there!

I am trying to make a customJS so as to have a hover tool, which as it moves across a figure, it plots a circle on the same point but on another figure.

My attempt has been to modify the example entitled “Hover Over Points” from here : https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html

and the modified code looks like this:

from bokeh.plotting import figure, output_file, show

from bokeh.models import ColumnDataSource, HoverTool, CustomJS

from bokeh.layouts import row

output_file(“hover_callback.html”)

define some points and a little graph between them

x = [2, 3, 5, 6, 8, 7]

y = [6, 4, 3, 8, 7, 5]

links = {

0: [1, 2],

1: [0, 3, 4],

2: [0, 5],

3: [1, 4],

4: [1, 3],

5: [2, 3, 4]

}

test_source = ColumnDataSource({‘x_test’: [1], ‘y_test’: [2]})

p = figure(plot_width=400, plot_height=400, tools=“”, toolbar_location=None, title=‘Hover over points’)

p1 = figure(plot_width=400, plot_height=400, tools=“”, toolbar_location=None, title=‘Change according to hovering’)

cr2 = p1.circle(‘x_test’, ‘y_test’, source = test_source)

source = ColumnDataSource({‘x0’: , ‘y0’: , ‘x1’: , ‘y1’: })

sr = p.segment(x0=‘x0’, y0=‘y0’, x1=‘x1’, y1=‘y1’, color=‘olive’, alpha=0.6, line_width=3, source=source, )

cr = p.circle(x, y, color=‘olive’, size=30, alpha=0.4, hover_color=‘olive’, hover_alpha=1.0)

Add a hover tool, that sets the link data for a hovered circle

code = “”"

var links = %s;

var data = {‘x0’: , ‘y0’: , ‘x1’: , ‘y1’: };

var test_data = {‘x_test’: , ‘y_test’: };

var cdata = circle.data;

var indices = cb_data.index[‘1d’].indices;

for (i=0; i < indices.length; i++) {

ind0 = indices[i]

for (j=0; j < links[ind0].length; j++) {

    ind1 = links[ind0][j];

    data['x0'].push(cdata.x[ind0]);

    data['y0'].push(cdata.y[ind0]);

    data['x1'].push(cdata.x[ind1]);

    data['y1'].push(cdata.y[ind1]);

    test_data['x_test'].push(data['x0'][0]);

    test_data['y_test'].push(data['y0'][0]);

}

}

segment.data = data;

test_source.data = test_data;

“”" % links

callback = CustomJS(args={‘circle’: cr.data_source, ‘segment’: sr.data_source, ‘test_source’: test_source}, code=code)

p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))

show(row(p,p1))

But, expectedly this plots a circle on the figure on the right, only when the hover tool is positioned on a circle on the left. How can this be extended so as circles are plotted as the hover tool scans across every point on the figure on the left?

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/a9634fdb-f7f6-4fde-9be7-1ca3c91eb6ea%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/a76c90b8-ddfe-4c00-8b61-dab3eef21779%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/81bcc8ad-b0c7-451c-a94c-9d2feae15662%40continuum.io.

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

9

Hi,

You could make a custom extension that subclasses the hover tool. There were external concerns raised about the execution boundary not being well defined enough. So now code execution is constrained to defined APIs thst clearly document code execution as the intended purpose.

Bryan

···

On Apr 24, 2018, at 07:34, Meir Tseitlin [email protected] wrote:

So there is no way to execute JS code in Hover tooltip?

Tnx

On Tuesday, April 24, 2018 at 5:15:56 PM UTC+3, Bryan Van de ven wrote:

Actually I was thinking of the tap tool, which only executes on taps that hit a glyph. The hover tool executes on every mouse move, that’s what people asked for a long time ago. But a better way to do that today is to use the named event.

Bryan

On Apr 24, 2018, at 07:06, Meir Tseitlin [email protected] wrote:

I think your answer is toward original @Sinnik (original author).

In my case I am looking for a way to “inject” JS code which will be executed when Hover tooltip opens. From your words (“The hover tool callback only executes with the mouse is actually hitting a glyph, not for any mouse move.”) I understood this is the case, but the way the callback behaves - I am not sure how is it related to Hover tool at all…

Thanks

On Tuesday, April 24, 2018 at 4:58:40 PM UTC+3, Bryan Van de ven wrote:

Hi,

Yes, the mousemove event executes on every single mouse move move. From your description I thought that was what you wanted? (Having a glyph on another plot track the mouse) Did I misunderstand?

Bryan

On Apr 24, 2018, at 05:17, Meir Tseitlin [email protected] wrote:

Hi Bryan,

It looks to me that CustomJS callback executes enormous number of times when mouse is above plot (regardless of specific Glyph). I put “console.log” instruction in callback and it continues to be called when I move the mouse.

Actually there is no difference if you add “, renderers=[cr])” argument or not.

In previous versions of Bokeh it was possible to add custom HTMLs to Hover Tool which included tags executed when Hover window opens. It looks like there is no such option in the current implementation (those scripts are not get executed anymore).

Please advise.

On Friday, April 20, 2018 at 6:02:31 PM UTC+3, Bryan Van de ven wrote:

Hi,

The hover tool callback only executes with the mouse is actually hitting a glyph, not for any mouse move. For what you want, you’d want to use a CustomJS callback on a MouseMove event as seen here:

    [https://github.com/bokeh/bokeh/blob/master/examples/howto/js_events.py](https://github.com/bokeh/bokeh/blob/master/examples/howto/js_events.py)

Thanks,

Bryan

On Apr 20, 2018, at 06:38, SinniK Al [email protected] wrote:

Hello there!

I am trying to make a customJS so as to have a hover tool, which as it moves across a figure, it plots a circle on the same point but on another figure.

My attempt has been to modify the example entitled “Hover Over Points” from here : https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html

and the modified code looks like this:

from bokeh.plotting import figure, output_file, show

from bokeh.models import ColumnDataSource, HoverTool, CustomJS

from bokeh.layouts import row

output_file(“hover_callback.html”)

define some points and a little graph between them

x = [2, 3, 5, 6, 8, 7]

y = [6, 4, 3, 8, 7, 5]

links = {

0: [1, 2],

1: [0, 3, 4],

2: [0, 5],

3: [1, 4],

4: [1, 3],

5: [2, 3, 4]

}

test_source = ColumnDataSource({‘x_test’: [1], ‘y_test’: [2]})

p = figure(plot_width=400, plot_height=400, tools=“”, toolbar_location=None, title=‘Hover over points’)

p1 = figure(plot_width=400, plot_height=400, tools=“”, toolbar_location=None, title=‘Change according to hovering’)

cr2 = p1.circle(‘x_test’, ‘y_test’, source = test_source)

source = ColumnDataSource({‘x0’: , ‘y0’: , ‘x1’: , ‘y1’: })

sr = p.segment(x0=‘x0’, y0=‘y0’, x1=‘x1’, y1=‘y1’, color=‘olive’, alpha=0.6, line_width=3, source=source, )

cr = p.circle(x, y, color=‘olive’, size=30, alpha=0.4, hover_color=‘olive’, hover_alpha=1.0)

Add a hover tool, that sets the link data for a hovered circle

code = “”"

var links = %s;

var data = {‘x0’: , ‘y0’: , ‘x1’: , ‘y1’: };

var test_data = {‘x_test’: , ‘y_test’: };

var cdata = circle.data;

var indices = cb_data.index[‘1d’].indices;

for (i=0; i < indices.length; i++) {

ind0 = indices[i]

for (j=0; j < links[ind0].length; j++) {

    ind1 = links[ind0][j];

    data['x0'].push(cdata.x[ind0]);

    data['y0'].push(cdata.y[ind0]);

    data['x1'].push(cdata.x[ind1]);

    data['y1'].push(cdata.y[ind1]);

    test_data['x_test'].push(data['x0'][0]);

    test_data['y_test'].push(data['y0'][0]);

}

}

segment.data = data;

test_source.data = test_data;

“”" % links

callback = CustomJS(args={‘circle’: cr.data_source, ‘segment’: sr.data_source, ‘test_source’: test_source}, code=code)

p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))

show(row(p,p1))

But, expectedly this plots a circle on the figure on the right, only when the hover tool is positioned on a circle on the left. How can this be extended so as circles are plotted as the hover tool scans across every point on the figure on the left?

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/a9634fdb-f7f6-4fde-9be7-1ca3c91eb6ea%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/a76c90b8-ddfe-4c00-8b61-dab3eef21779%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/81bcc8ad-b0c7-451c-a94c-9d2feae15662%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/a99ed208-dc0a-469e-9de8-b7dc1adf1b93%40continuum.io.

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