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

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

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

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

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

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 <[email protected]> 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: 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

--
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/1c9724dd-a60c-4dd3-b804-6eb84b45744e%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.