☰Read-only archive⌕
Looking for help with Bokeh?

This is a read-only archive. Ask questions and join the conversation on GitHub.

Visit Community Support on GitHub →
Archived discussions · Captured October 28, 2026

javascript code to locate a figure (plot) object, also change y_range dynamically

Community Support
Jonathan_Shore
Jonathan_Shore

Hi,

I am using rbokeh for a given project (though have used python-based bokeh previously). I am plotting a time series and want to pan horizontally across time, however updating the y_range so that it reflects the range of data in the viewport (see the following question as an example: http://stackoverflow.com/questions/43620837/how-to-get-bokeh-to-dynamically-adjust-y-range-when-panning).

In trying to solve the above query myself, am trying to determine how to identify the plot object within a callback from javascript. Once I have reference to the plot object, believe I can do the following (based on what have seen elsewhere in this newsgroup).

plotobj.y_range.set(“start”)= …
plotobj.y_range.set(“end”)= …

``

I would plan to attach the above to a callback on x_range change. So my questions are:

  • how does one find one or more plot (figure) objects from a javascript callback?

  • is the above pseudocode the appropriate method of changing the start/end of the y_range?

Ideally there would be (or is) an option to cause y_range to be recalculated whenever the data is panned. Short of that looking to write as a JS callback.

Thanks for any pointers.

Jonathan

⌁   Link to post
chupach1
chupach1

Hi,

I am using rbokeh for a given project (though have used python-based bokeh previously). I am plotting a time series and want to pan horizontally across time, however updating the y_range so that it reflects the range of data in the viewport (see the following question as an example: http://stackoverflow.com/questions/43620837/how-to-get-bokeh-to-dynamically-adjust-y-range-when-panning).

In trying to solve the above query myself, am trying to determine how to identify the plot object within a callback from javascript. Once I have reference to the plot object, believe I can do the following (based on what have seen elsewhere in this newsgroup).

plotobj.y_range.set(“start”)= …
plotobj.y_range.set(“end”)= …

``

I would plan to attach the above to a callback on x_range change. So my questions are:

  • how does one find one or more plot (figure) objects from a javascript callback?
  • is the above pseudocode the appropriate method of changing the start/end of the y_range?

Ideally there would be (or is) an option to cause y_range to be recalculated whenever the data is panned. Short of that looking to write as a JS callback.

That would be nice but not i know of.

In python bokeh, for a single plot with a single line ‘y’ described in the source, I use this for y_range.callback (passing source and this code in customs):

var start = Math.floor(cb_obj.plots[0].x_range.start);

var end = Math.floor(cb_obj.plots[0].x_range.end);

var y = source.data['y'].slice(start, end+1);

var yv = [Math.min(...y),Math.max(...y)];

var dy = yv[1] - yv[0];

cb_obj.start = yv[0]-0.2*dy;

cb_obj.end = yv[1]+0.2*dy;

You can expand this for multiple x-linked plots / multiple lines per plots (in this case better use precalculated min/max arrays).

The 0.2 factor give a bit of space up and down.

···

On Thursday, April 27, 2017 at 9:27:38 PM UTC+2, Jonathan Shore wrote:

Thanks for any pointers.

Jonathan

⌁   Link to post
Jonathan_Shore
Jonathan_Shore

Hi, Thanks for the pointer. I was able to partially progress. I don’t know where you get the “source” reference from. When looking at in the javascript inspector, the full function signature with your code looks like this:

unction anonymous(range, cb_obj, cb_data, require) {

var plot = cb_obj.plots[0];

var start = Math.floor(plot.x_range.start);

var end = Math.floor(plot.x_range.end);



var y = source.data['y'].slice(start, end+1);

var yv = [Math.min(...y),Math.max(...y)];

var dy = yv[1] - yv[0];



cb_obj.start = 5;  /* my temporary mockup */

cb_obj.end = 10;

}

``

The code fails on the source.data[‘y’].slice(start, end+1); line indicating that there is no such variable “source”. I assumed that the JS side is standard for both python and rbokeh, Or perhaps python decorates the signature to include some extra information? Any clues? There is probably some linkage to the data in cb_obj, but have yet to find it.

Thanks again for any help.

Jonathan

···

On Thursday, April 27, 2017 at 4:29:31 PM UTC-4, chupach wrote:

On Thursday, April 27, 2017 at 9:27:38 PM UTC+2, Jonathan Shore wrote:

Hi,

I am using rbokeh for a given project (though have used python-based bokeh previously). I am plotting a time series and want to pan horizontally across time, however updating the y_range so that it reflects the range of data in the viewport (see the following question as an example: http://stackoverflow.com/questions/43620837/how-to-get-bokeh-to-dynamically-adjust-y-range-when-panning).

In trying to solve the above query myself, am trying to determine how to identify the plot object within a callback from javascript. Once I have reference to the plot object, believe I can do the following (based on what have seen elsewhere in this newsgroup).

plotobj.y_range.set(“start”)= …
plotobj.y_range.set(“end”)= …

``

I would plan to attach the above to a callback on x_range change. So my questions are:

  • how does one find one or more plot (figure) objects from a javascript callback?
  • is the above pseudocode the appropriate method of changing the start/end of the y_range?

Ideally there would be (or is) an option to cause y_range to be recalculated whenever the data is panned. Short of that looking to write as a JS callback.

That would be nice but not i know of.

In python bokeh, for a single plot with a single line ‘y’ described in the source, I use this for y_range.callback (passing source and this code in customs):

var start = Math.floor(cb_obj.plots[0].x_range.start);
var end = Math.floor(cb_obj.plots[0].x_range.end);
var y = source.data['y'].slice(start, end+1);
var yv = [Math.min(...y),Math.max(...y)];
var dy = yv[1] - yv[0];
cb_obj.start = yv[0]-0.2*dy;
cb_obj.end = yv[1]+0.2*dy;

You can expand this for multiple x-linked plots / multiple lines per plots (in this case better use precalculated min/max arrays).

The 0.2 factor give a bit of space up and down.

Thanks for any pointers.

Jonathan

⌁   Link to post
Jonathan_Shore
Jonathan_Shore

Thanks for your help, I figured it out. rbokeh is a bit different in how it identifies data.

···

On Thursday, April 27, 2017 at 7:37:59 PM UTC-4, Jonathan Shore wrote:

Hi, Thanks for the pointer. I was able to partially progress. I don’t know where you get the “source” reference from. When looking at in the javascript inspector, the full function signature with your code looks like this:

unction anonymous(range, cb_obj, cb_data, require) {

var plot = cb_obj.plots[0];
var start = Math.floor(plot.x_range.start);
var end = Math.floor(plot.x_range.end);
var y = source.data['y'].slice(start, end+1);
var yv = [Math.min(...y),Math.max(...y)];
var dy = yv[1] - yv[0];
cb_obj.start = 5;  /* my temporary mockup */
cb_obj.end = 10;

}

``

The code fails on the source.data[‘y’].slice(start, end+1); line indicating that there is no such variable “source”. I assumed that the JS side is standard for both python and rbokeh, Or perhaps python decorates the signature to include some extra information? Any clues? There is probably some linkage to the data in cb_obj, but have yet to find it.

Thanks again for any help.

Jonathan

On Thursday, April 27, 2017 at 4:29:31 PM UTC-4, chupach wrote:

On Thursday, April 27, 2017 at 9:27:38 PM UTC+2, Jonathan Shore wrote:

Hi,

I am using rbokeh for a given project (though have used python-based bokeh previously). I am plotting a time series and want to pan horizontally across time, however updating the y_range so that it reflects the range of data in the viewport (see the following question as an example: http://stackoverflow.com/questions/43620837/how-to-get-bokeh-to-dynamically-adjust-y-range-when-panning).

In trying to solve the above query myself, am trying to determine how to identify the plot object within a callback from javascript. Once I have reference to the plot object, believe I can do the following (based on what have seen elsewhere in this newsgroup).

plotobj.y_range.set(“start”)= …
plotobj.y_range.set(“end”)= …

``

I would plan to attach the above to a callback on x_range change. So my questions are:

  • how does one find one or more plot (figure) objects from a javascript callback?
  • is the above pseudocode the appropriate method of changing the start/end of the y_range?

Ideally there would be (or is) an option to cause y_range to be recalculated whenever the data is panned. Short of that looking to write as a JS callback.

That would be nice but not i know of.

In python bokeh, for a single plot with a single line ‘y’ described in the source, I use this for y_range.callback (passing source and this code in customs):

var start = Math.floor(cb_obj.plots[0].x_range.start);
var end = Math.floor(cb_obj.plots[0].x_range.end);
var y = source.data['y'].slice(start, end+1);
var yv = [Math.min(...y),Math.max(...y)];
var dy = yv[1] - yv[0];
cb_obj.start = yv[0]-0.2*dy;
cb_obj.end = yv[1]+0.2*dy;

You can expand this for multiple x-linked plots / multiple lines per plots (in this case better use precalculated min/max arrays).

The 0.2 factor give a bit of space up and down.

Thanks for any pointers.

Jonathan

⌁   Link to post
Bryan
Bryan

FYI There is a supported effort to make RBokeh more robust and maintainable, so expect more work on that front in the next few months.

Bryan

···

On Apr 28, 2017, at 06:37, Jonathan Shore <jonathan.shore@gmail.com> wrote:

Thanks for your help, I figured it out. rbokeh is a bit different in how it identifies data.

On Thursday, April 27, 2017 at 7:37:59 PM UTC-4, Jonathan Shore wrote:
Hi, Thanks for the pointer. I was able to partially progress. I don't know where you get the "source" reference from. When looking at in the javascript inspector, the full function signature with your code looks like this:

unction anonymous(range, cb_obj, cb_data, require) {

    var plot = cb_obj.plots[0];
   var start = Math.floor(plot.x_range.start);
   var end = Math.floor(plot.x_range.end);

    var y = source.data['y'].slice(start, end+1);
   var yv = [Math.min(...y),Math.max(...y)];
   var dy = yv[1] - yv[0];
   
    cb_obj.start = 5; /* my temporary mockup */
   cb_obj.end = 10;

}

The code fails on the source.data['y'].slice(start, end+1); line indicating that there is no such variable "source". I assumed that the JS side is standard for both python and rbokeh, Or perhaps python decorates the signature to include some extra information? Any clues? There is probably some linkage to the data in cb_obj, but have yet to find it.

Thanks again for any help.
Jonathan

On Thursday, April 27, 2017 at 4:29:31 PM UTC-4, chupach wrote:

On Thursday, April 27, 2017 at 9:27:38 PM UTC+2, Jonathan Shore wrote:
Hi,

I am using rbokeh for a given project (though have used python-based bokeh previously). I am plotting a time series and want to pan horizontally across time, however updating the y_range so that it reflects the range of data in the viewport (see the following question as an example: python - How to get bokeh to dynamically adjust y_range when panning - Stack Overflow).

In trying to solve the above query myself, am trying to determine how to identify the plot object within a callback from javascript. Once I have reference to the plot object, believe I can do the following (based on what have seen elsewhere in this newsgroup).

plotobj.y_range.set("start")= ...
plotobj.y_range.set("end")= ...

I would plan to attach the above to a callback on x_range change. So my questions are:

- how does one find one or more plot (figure) objects from a javascript callback?
- is the above pseudocode the appropriate method of changing the start/end of the y_range?

Ideally there would be (or is) an option to cause y_range to be recalculated whenever the data is panned. Short of that looking to write as a JS callback.

That would be nice but not i know of.
In python bokeh, for a single plot with a single line 'y' described in the source, I use this for y_range.callback (passing source and this code in customs):

    var start = Math.floor(cb_obj.plots[0].x_range.start);

    var end = Math.floor(cb_obj.plots[0].x_range.end);

    var y = source.data['y'].slice(start, end+1);

    var yv = [Math.min(...y),Math.max(...y)];

    var dy = yv[1] - yv[0];

    cb_obj.start = yv[0]-0.2*dy;

    cb_obj.end = yv[1]+0.2*dy;

You can expand this for multiple x-linked plots / multiple lines per plots (in this case better use precalculated min/max arrays).
The 0.2 factor give a bit of space up and down.

Thanks for any pointers.
Jonathan

--
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 bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/1c9724dd-a60c-4dd3-b804-6eb84b45744e%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

⌁   Link to post

End of archived discussion · Replies are disabled