How (1) to access plot properties from js and (2) register mouse events on the axis?

Hey team,

Appreciate if you can help me achieve the following user story.

“As a user of a web page with an embedded bokeh plot I want to be able to click on the y axis that would pop up a window to allow me manually enter the desired min and max limits for the y axis to enable me use the plot in a similar fashion to Excel charts.”

My line of thought:

  1. I need to register the mouse event on the y axis;

  2. That would pop up a Bootstrap modal window;

  3. The modal will read current values for y_axis limits;

  4. Set the y limits once the user has entered them and clicked OK.

My questions are:

  1. I assume I need to access the plot, views and models objects. How can I do so? Is this really the way?

var plot = Bokeh.index[Bokeh._.keys(Bokeh.index)[0]]

``

  1. How do I register the onmouseup callback to pop up the modal window?

Many thanks.

Hi Paul,

As a matter of fact there was a recent PR merged to Bokeh that added "typed properties" to Bokeh models on the JavaScript side, to match (for the *most* part) the typed properties on the python Bokeh models. For instance, the Axis base class in BokehJS has this:

  props: ->
    return _.extend {}, super(), {
      visible: [ p.Bool, true ]
      location: [ p.String, 'auto' ] # TODO (bev) enum
      bounds: [ p.Any, 'auto' ] # TODO (bev)
      ticker: [ p.Instance, null ]
      formatter: [ p.Instance, null ]
      x_range_name: [ p.String, 'default' ]
      y_range_name: [ p.String, 'default' ]
      axis_label: [ p.String, '' ]
      major_tick_in: [ p.Number, 2 ]
      major_tick_out: [ p.Number, 6 ]
      minor_tick_in: [ p.Number, 0 ]
      minor_tick_out: [ p.Number, 4 ]
    }

One idea that has been suggested and that we would like to pursue is that, using these typed properties (which are inspectable), it should be possible to *automatically* generate an editor dialog, for *any* BokehJS model.

Would you be interested in working on this, with some help? It would be a pretty tremendous feature to get added. If so, I would suggest an approach that starts without worrying about the mouse and hit-testing. As a first cut, there could be a single toolbar button tool that pops up a simple dialog listing a table (or tree) of all current plot models, and selecting a model from the dialog brings up the auto-editor for that model. Then as a second follow on piece of work, another PR could look at adding hit testing to various components, and paths to open up editor dialogs based on this hit-testing.

Please let me know if this sounds like an interesting thing you'd like to work on, we could schedule a ghangout or something to discuss things in more detail.

Thanks,

Bryan

···

On Feb 25, 2016, at 11:56 AM, Paul <[email protected]> wrote:

Hey team,

Appreciate if you can help me achieve the following user story.

"As a user of a web page with an embedded bokeh plot I want to be able to click on the y axis that would pop up a window to allow me manually enter the desired min and max limits for the y axis to enable me use the plot in a similar fashion to Excel charts."

My line of thought:

1. I need to register the mouse event on the y axis;
2. That would pop up a Bootstrap modal window;
3. The modal will read current values for y_axis limits;
4. Set the y limits once the user has entered them and clicked OK.

My questions are:

1. I assume I need to access the plot, views and models objects. How can I do so? Is this really the way?

var plot = Bokeh.index[Bokeh._.keys(Bokeh.index)[0]]

2. How do I register the onmouseup callback to pop up the modal window?

Many 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/92f5c4e1-e3d1-4c03-8ddf-af105cc97192%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.