Bokeh Embed - sidecar javascript?

The Embed docs say “The data for the plot can be contained in the document, or on a Bokeh server, or in a sidecar JavaScript file.”

Are there any examples of using this?

Thanks…

Jeff

I usually save the HTML generated with output_file() and then serve it as an iframe inside a post for example. In this case the data would be contained in the document itself. As it has JS module, you ca use the BokehJS in the page to load the data.
Gabi

···

On Sat, Jan 16, 2016 at 3:28 PM Jeff Harris [email protected] wrote:

The Embed docs say “The data for the plot can be contained in the document, or on a Bokeh server, or in a sidecar JavaScript file.”

Are there any examples of using this?

Thanks…

Jeff

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/1488c8bd-4e01-4d6d-8cd9-64cd9d359e8c%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Yes this is the autoload_file option documented there. All the gallery examples are loaded this way, for instance.

···

On Jan 16, 2016, at 08:28, Jeff Harris [email protected] wrote:

The Embed docs say “The data for the plot can be contained in the document, or on a Bokeh server, or in a sidecar JavaScript file.”

Are there any examples of using this?

Thanks…

Jeff

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/1488c8bd-4e01-4d6d-8cd9-64cd9d359e8c%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Thanks Bryan. I think I misunderstood the “sidecar” language. I thought the data for the plot could be referenced in a separate standalone file (e.g., a ColumnDataSource defined in a referenced js file). The autoloading option returns a tag with both the plot and data embedded.

Thinking about that more, I understand the design is motivated by being able to send around self-contained HTML files with plots & data (or HTML files that reference static *js files on the server that contain the plot & data).

The use-case I’m working on is a BokehJS plot embedded in an HTML framework inside a client application. The client handles the communication with the server data sources, and then marshals to/from BokehJS. I’m trying to get just the plot and the definition for the ColumnDataSource (column headers, etc.) to embed; then separately update the plot with some hooks with marshalled data in *.js.

BTW: is there updated documentation on BokehJS 0.11? The following javascript code-snippet worked in 0.10 to grab a datasource,

var marshalled_source_name = ‘marshalledData’;

var sources = Bokeh.ColumnDataSource.Collection.models;

var source_keys = Bokeh._.keys(sources)

for (i = 0; i < source_keys.length; i++) {

var k = source_keys[i];

var source_name = sources[k].attributes.name

if (source_name == marshalled_source_name) {

var marshalled_data = sources[k].attributes.data

console.log(“Marshalled ColumnDataSource found”});

}

}

if ( marshalled_data !== undefined ) {

// update data…

}

···

On Saturday, January 16, 2016 at 3:12:00 PM UTC, Bryan Van de ven wrote:

Yes this is the autoload_file option documented there. All the gallery examples are loaded this way, for instance.

On Jan 16, 2016, at 08:28, Jeff Harris [email protected] wrote:

The Embed docs say “The data for the plot can be contained in the document, or on a Bokeh server, or in a sidecar JavaScript file.”

Are there any examples of using this?

Thanks…

Jeff

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/1488c8bd-4e01-4d6d-8cd9-64cd9d359e8c%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hi,

          var marshalled_source_name = 'marshalledData';
          var sources = Bokeh.ColumnDataSource.Collection.models;

We are trying to get rid of Collection - it's a giant global variable
causing trouble.

What I'd probably do for what you're up to here, in broad outline, would be
one of two things:

* encode the arrays (or dict of arrays) as JSON using regular Python JSON
libraries, no Bokeh ... you might want to refer to or even use


though I'm not sure it should be or is considered a public API. It might be
enough to use plain python json.dumps, but you might need the equivalent of
these to prebake the arrays:

or

* make a Document that just has ColumnDataSource as a root, and convert it
to JSON:
  doc = Document()
  doc.add_root(my_data_source)
  doc.to_json_string()

Then once you're in the code that has your plot, there's a JavaScript
Document class that has from_json_string:

So you'd do:
  data_doc = Document.from_json_string(data_json)

Get the data JSON into your JS however you want - you could stuff it in a
<script> tag and get the tag by ID, or you could generate JS that sets it
as a global var, or have an AJAX method that returns it, whatever.

So now in JS you have either a plain JSON array, or you have a data_doc
created from JSON that has the data in it.

If you have the data_doc, you can get the data dict from the data source...
if you know there's a single root, something like:
   data_doc.roots()[0].get('data')
Or you could have set the `name` attribute on your data source, and then
you can do:
   data_doc.get_model_by_name('mydata').get('data')

If you just made the plain data JSON without a Document, you would
JSON.parse it in JS.

Anyway so now you'd have the data in JS, and you could set it on your plot.

One thing to be careful about is that you can't put the same model instance
in two Document, so if you ship a data source to the client in a Document,
if you were going to set that data source on another document, you'd have
to remove it from the original document first. But this only applies to
models, not to the arrays within the model.

Does this solve the problem you have ?

Havoc

···

On Sun, Jan 17, 2016 at 5:32 AM, Jeff Harris < [email protected]> wrote:

Hi Havoc,

Thanks for the advice and insight on Collection.

The following JS ended up working before seeing your response. Will investigate attaching the ColumnDataSource at root to avoid walking the plot:

    var source_name = 'marshalledData';
    var plot_ids = Bokeh._.keys(Bokeh.index)
    for (i = 0; i < plot_ids.length; i++) {
        var plot = Bokeh.index[plot_ids[i]]
        d  = plot.model.document._all_models_by_name._existing(source_name)
        if( d != null ) {
            my_data = d[0].attributes.data
        }
    }

``

In Python:

cds_df = ColumnDataSource(df, name=‘marshalledData’)
p = figure(…)
output_file(“chart1_embed.html”, mode=‘CDN’)
show§ # when iterating the chart format

``

One thing that’s puzzling is that the number of models keeps increasing in the generated plot. I.e., a new data source with embedded data keeps getting added. Or, if I have two open Python files (Spyder 2.3.8; Python 3.5) and am working on separate plots, the data from each gets embedded in the other. So a 40K file will grow to 80K, then 120K, etc. on each show§.

I’ll try to investigate and see if I can determine the cause.

Thanks,

Jeff

···

On Saturday, January 16, 2016 at 2:28:05 PM UTC, Jeff Harris wrote:

The Embed docs say “The data for the plot can be contained in the document, or on a Bokeh server, or in a sidecar JavaScript file.”

Are there any examples of using this?

Thanks…

Jeff

Hi,

···
        d  = plot.model.document._all_models_by_name._existing(source_name)

You can also use document.get_model_by_name(source_name), rather than directly accessing the private _all_models_by_name, and it may be more future-proof.

Havoc