Chart doesn't update when Mixing AjaxDataSource with BokehJS

Good morning,

I’m experimenting with BokehJS because the static document I built with Bokeh might be easier to maintain if I skipped python altogether. I created a hybrid of ajax_source.py with the ‘Minimal Complete Example’ at the bottom of Developing with JavaScript to test. Here’s my complete rewrite of lines 8-20 and 27 of ajax_source.py in JavaScript. I’m either doing something wrong or the Bokeh.Plotting API doesn’t behave like bokeh.plotting in this case. The BokehJS version only prints the first circle and doesn’t append subsequent ones.

Thanks for taking a look,

Jan

<**html ****lang=****"en"**>

<head>
<meta charset="UTF-8">
<title>Ajax Source</title>
<**link rel="stylesheet" href="css/bokeh.min.css" type="text/css" **/>
<script src="js/bokeh.js"></script>
<script src="js/bokeh-api.js"></script>
</head>
<body>
<script>
**const *****source ***= **new **Bokeh.AjaxDataSource({data_url: http://localhost:5050/data”, polling_interval: 100, mode: “append”});

**const *****p ***= Bokeh.Plotting.figure({height: 300, width: 800,
background_fill_color: “lightgrey”, title: “Streaming Noisy sin(x) via Ajax”});
p.circle({field: ‘x’}, {field: ‘y’}, {source: source});
p.x_range.**follow **= “end”;
p.x_range.**follow_interval **= 10;
Bokeh.Plotting.show(p, document.currentScript.parentElement)
</script>
</body>
</html>

One difference I observe by setting Bokeh log_level to ‘debug’ is that the python version hits glyph_renderer.js:180 three times at each cycle whereas the JavaScript hits it only once. This presumably indicates that the APIs generated different model graphs but I haven’t found the key difference between bokeh/plotting/helpers.py and bokehjs/src/lib/api/plotting.ts yet.

···

On Saturday, May 19, 2018 at 8:40:17 AM UTC-4, Jan Burgy wrote:

Good morning,

I’m experimenting with BokehJS because the static document I built with Bokeh might be easier to maintain if I skipped python altogether. I created a hybrid of ajax_source.py with the ‘Minimal Complete Example’ at the bottom of Developing with JavaScript to test. Here’s my complete rewrite of lines 8-20 and 27 of ajax_source.py in JavaScript. I’m either doing something wrong or the Bokeh.Plotting API doesn’t behave like bokeh.plotting in this case. The BokehJS version only prints the first circle and doesn’t append subsequent ones.

Thanks for taking a look,

Jan

<**html ****lang=****"en"**>

<head>
<meta charset="UTF-8">
<title>Ajax Source</title>
<**link rel="stylesheet" href="css/bokeh.min.css" type="text/css" **/>
<script src="js/bokeh.js"></script>
<script src="js/bokeh-api.js"></script>
</head>
<body>
<script>
**const *****source ***= **new **Bokeh.AjaxDataSource({data_url: http://localhost:5050/data”, polling_interval: 100, mode: “append”});

**const *****p ***= Bokeh.Plotting.figure({height: 300, width: 800,
background_fill_color: “lightgrey”, title: “Streaming Noisy sin(x) via Ajax”});
p.circle({field: ‘x’}, {field: ‘y’}, {source: source});
p.x_range.**follow **= “end”;
p.x_range.**follow_interval **= 10;
Bokeh.Plotting.show(p, document.currentScript.parentElement)
</script>
</body>
</html>

Aha, I got the js version working through painstaking side-by-side debugging! Adding the following two lines "fixes":

const [glyph_renderer] = p.renderers.filter(r => 'GlyphRenderer' === r.type);
glyph_renderer.view.finalize();

This is obviously a broke-around. Where does the proper fix belong?

Issue was that the CDSView.protoype.finalize is called with null source first time around (default instantiation in GlyphRenderer.initClass). The python version calls it again in Document._instantiate_references_on_json.

Hi,

···

On Tue, May 22, 2018 at 3:02 PM, Jan Burgy [email protected] wrote:

Aha, I got the js version working through painstaking side-by-side debugging! Adding the following two lines “fixes”:

const [glyph_renderer] = p.renderers.filter(r => ‘GlyphRenderer’ === r.type);

glyph_renderer.view.finalize();

This is obviously a broke-around. Where does the proper fix belong?

Issue was that the CDSView.protoype.finalize is called with null source first time around (default instantiation in GlyphRenderer.initClass). The python version calls it again in Document._instantiate_references_on_json.

please report a bug at https://github.com/bokeh/bokeh/issues with your findings. bokehjs is supposed to work the same whether this is by using the JSON protocol or the JS API directly.

Mateusz

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/0b6f019f-0253-4d14-83b1-67166bfa5723%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hi Mateusz,

···

On Tuesday, May 22, 2018 at 10:46:11 AM UTC-4, mateusz.paprocki wrote:

Hi,

On Tue, May 22, 2018 at 3:02 PM, Jan Burgy [email protected] wrote:

Aha, I got the js version working through painstaking side-by-side debugging! Adding the following two lines “fixes”:

const [glyph_renderer] = p.renderers.filter(r => ‘GlyphRenderer’ === r.type);

glyph_renderer.view.finalize();

This is obviously a broke-around. Where does the proper fix belong?

Issue was that the CDSView.protoype.finalize is called with null source first time around (default instantiation in GlyphRenderer.initClass). The python version calls it again in Document._instantiate_references_on_json.

please report a bug at https://github.com/bokeh/bokeh/issues with your findings. bokehjs is supposed to work the same whether this is by using the JSON protocol or the JS API directly.

Mateusz

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/0b6f019f-0253-4d14-83b1-67166bfa5723%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Here you go. As I’m using AjaxDataSource more and more, I’m noticing other issues, for instance neither DataTable or DataTableView invoke source.setup() the way GlyphRendererView does. I’d like to submit a PR for something simple like this but need guidance. Where does the call to source.setup belong in the DataTable class hierarchy?