Read precise plot line values for given X.


I’m building an app with Bokeh which produces an HTML file for the end-user which is to be used off-line. Therefore I have no access to Bokeh Server, or Python at all, the heavy lifting is done in Javascript via custom HTML template.

The file is interactive, allows user to show/hide grouped lines, it shows a video next to the plot and a progress bar on the plot itself via ColumnDataSource that I update from the video.currentTime making the bar move.

I see that this is non-standard and the BokehJS API is not directly adapted to my use case but through trial and error I was able to achieve most of what I need. I am a backend Python programmer and suck completely at JavaScript but I’m tirelessly persistent so I was able to understand the JS architecture up to reasonable point. I read Backbone and Underscore docs and even some part of BokehJS Coffee code, not to mention the whole Bokeh docs. I have perused the resulting user-side Javascript Bokeh object for hours. You can explain things in detail to me or point me to source code and I will probably understand you.

Now the problem. I need to get the drawn CDS-derived line values. The code:

# ipython notebook side
from bokeh.plotting import figure, output_file, show
from bokeh.models import ColumnDataSource
cds = ColumnDataSource(data=dict(x=[1, 5], y=[1, 3]), name='my_cds')
p = figure(tools='', title=cds._id)
p.line('x', 'y', source=cds, legend=cds._id)
# Javascript side, for simplicity I do this in chrome dev console but normally this is part of the template
my_cds = Bokeh.Collections("ColumnDataSource").find(function(model) {
return model.get('name') == 'my_cds'; });

So I know how to get the original data. Now, I need to know the precise Y value of the line drawn from this cds for a given precise X. So for x = 2.2, y is about 2.8.
I assume that if the line is drawn on the canvas this can be read from somewhere. I know that I can get this using HoverTool, this is not an option for me. I read the JS code of HoverTool and could not make it work. Where in the Bokeh JS object can I find the information I’m looking for?

Problem two, toggling visibility of the line.
Now, I create a copy of every CDS data (I have tens of them) at the beginning of the app and on checkbox tick I toggle it more or less like this pseudo-code:

    var orig_data = {
// cds_id: cds_orig_data
'bc2e2457-eef4-4518-b26b-b9bb6d8cdc9a' : Bokeh.Collections("ColumnDataSource").get("bc2e2457-eef4-4518-b26b-b9bb6d8cdc9a").get("data")
line_toggle: function (input) {
// inputs have CDS id in data-id var id = Bokeh.$(input).data('id');
var cds = Collections("ColumnDataSource").get(id);
var this_orig_data = orig_data[id];
var line = evt.lines[id];
if (input.checked)
cds.set('data', this_orig_data);
cds.set('data', {}); }

This seems silly to me. The line representing the CDS has visibility and alpha that I could change, but this does nothing. Even if I trigger(‘change’) on CDS later on. How to do it in an elegant way?

I cannot share the code I have publicly, but if you really need this, I can send it to your e-mail for inspection. I’d rather not bore you with that though, it’s long and takes time to understand.

When I solve all the problems I encountered, I plan to write a blog post about my use case to give back to the community, I believe doing plot manipulations on the JavaScript side hasn’t got many examples on the Internet.