Bokeh from NPM not working for javascript interactivity, from CDN working

I
installed Bokeh from NPM (npm install -g bokehjs) on a new machine, and
all my interactivity didn’t work. I then tried using the javascript from the CDN with the same code, and it worked. Is there an issue with the NPM build? Relevant ‘includes’ from both CDN and NPM below. Any ideas on why CDN works and NPM doesn’t?

CDN (working):


<script src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.js"></script>

``

NPM (no interactivity, same build code as used with CDN):

<link src='./node_modules/bokehjs/build/css/bokeh.min.css' rel="stylesheet" type="text/css">
<link src='./node_modules/bokehjs/build/css/bokeh-widgets.min.css' rel="stylesheet" type="text/css">
<link src='./node_modules/bokehjs/build/css/bokeh-tables.min.css' rel="stylesheet" type="text/css">
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src='./node_modules/bokehjs/build/js/bokeh.min.js'></script>
<script src='./node_modules/bokehjs/build/js/bokeh-widgets.js'></script>
<script src='./node_modules/bokehjs/build/js/bokeh-tables.js'></script>

``

Python Code:

import pandas as pd

from bokeh.palettes import Spectral4
from bokeh.plotting import figure, output_file, show
from bokeh.sampledata.stocks import AAPL, IBM, MSFT, GOOG

import bokeh.embed as bk_embed

p = figure(plot_width=800, plot_height=250, x_axis_type=“datetime”)
p.title.text = ‘Click on legend entries to mute the corresponding lines’

for data, name, color in zip([AAPL, IBM, MSFT, GOOG], [“AAPL”, “IBM”, “MSFT”, “GOOG”], Spectral4):
df = pd.DataFrame(data)
df[‘date’] = pd.to_datetime(df[‘date’])
renderer = p.line(df[‘date’], df[‘close’], line_width=2, color=color, alpha=0.8,
muted_color=color, muted_alpha=0.2, legend=name)
renderer.muted = True

p.legend.location = “top_left”
p.legend.click_policy=“mute”

script, div = bk_embed.components(p)

Write File to HTML

from jinja2 import Environment, FileSystemLoader, select_autoescape
env = Environment(loader=FileSystemLoader(’/home/dunlop/Desktop/bokehjs’))

template = env.get_template(‘bokeh_test.html’)

html_str = template.render(script=script, div=div)

with open(‘test.html’, ‘w+’) as f:
f.write(html_str)

output_file(“interactive_legend.html”, title=“interactive_legend.py example”)

show(p)

``

jinja2 template

<link
    href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.css"
    rel="stylesheet" type="text/css">
<link
    href="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.css"
    rel="stylesheet" type="text/css">
<link
    href="https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.css"
    rel="stylesheet" type="text/css">

<script src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.js"></script>
{{ div }}

{{ script }}

``

···

Hi,

···

On Fri, Jun 15, 2018 at 3:54 PM, [email protected] wrote:

I
installed Bokeh from NPM (npm install -g bokehjs) on a new machine, and
all my interactivity didn’t work. I then tried using the javascript from the CDN with the same code, and it worked. Is there an issue with the NPM build? Relevant ‘includes’ from both CDN and NPM below. Any ideas on why CDN works and NPM doesn’t?

CDN (working):


<script src="[https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.js)"></script>
<script src="[https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.js)"></script>
<script src="[https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.js)"></script>

``

NPM (no interactivity, same build code as used with CDN):

<link src='./node_modules/bokehjs/build/css/bokeh.min.css' rel="stylesheet" type="text/css">
<link src='./node_modules/bokehjs/build/css/bokeh-widgets.min.css' rel="stylesheet" type="text/css">
<link src='./node_modules/bokehjs/build/css/bokeh-tables.min.css' rel="stylesheet" type="text/css">
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src='./node_modules/bokehjs/build/js/bokeh.min.js'></script>
<script src='./node_modules/bokehjs/build/js/bokeh-widgets.js'></script>
<script src='./node_modules/bokehjs/build/js/bokeh-tables.js'></script>

``

Python Code:

import pandas as pd

from bokeh.palettes import Spectral4
from bokeh.plotting import figure, output_file, show
from bokeh.sampledata.stocks import AAPL, IBM, MSFT, GOOG

import bokeh.embed as bk_embed

p = figure(plot_width=800, plot_height=250, x_axis_type=“datetime”)
p.title.text = ‘Click on legend entries to mute the corresponding lines’

for data, name, color in zip([AAPL, IBM, MSFT, GOOG], [“AAPL”, “IBM”, “MSFT”, “GOOG”], Spectral4):
df = pd.DataFrame(data)
df[‘date’] = pd.to_datetime(df[‘date’])
renderer = p.line(df[‘date’], df[‘close’], line_width=2, color=color, alpha=0.8,
muted_color=color, muted_alpha=0.2, legend=name)
renderer.muted = True

p.legend.location = “top_left”
p.legend.click_policy=“mute”

script, div = bk_embed.components(p)

Write File to HTML

from jinja2 import Environment, FileSystemLoader, select_autoescape
env = Environment(loader=FileSystemLoader(‘/home/dunlop/Desktop/bokehjs’))

template = env.get_template(‘bokeh_test.html’)

html_str = template.render(script=script, div=div)

with open(‘test.html’, ‘w+’) as f:
f.write(html_str)

output_file(“interactive_legend.html”, title=“interactive_legend.py example”)

show(p)

``

jinja2 template

<link
    href="[https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.css](https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.css)"
    rel="stylesheet" type="text/css">
<link
    href="[https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.css](https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.css)"
    rel="stylesheet" type="text/css">
<link
    href="[https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.css](https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.css)"
    rel="stylesheet" type="text/css">

<script src="[https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.js)"></script>
<script src="[https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.js)"></script>
<script src="[https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.js)"></script>
{{ div }}

{{ script }}

``

everything looks good, except {{ script }} being outside (fixing this doesn’t help). At this point I’m not sure what’s going on, but the problem is not limited to interactivity, making bokehjs essentially unusable. Please report this (with fixed HTML) as a new issue (https://github.com/bokeh/bokeh/issues).

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/7484d36b-b51a-49fb-bfbc-9ec98bb4ba00%40continuum.io.

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

Hi,

···

On Fri, Jun 15, 2018 at 4:55 PM, Mateusz Paprocki [email protected] wrote:

Hi,

scratch that. In your HTML there’s:

This should be

Mateusz

On Fri, Jun 15, 2018 at 3:54 PM, [email protected] wrote:

I
installed Bokeh from NPM (npm install -g bokehjs) on a new machine, and
all my interactivity didn’t work. I then tried using the javascript from the CDN with the same code, and it worked. Is there an issue with the NPM build? Relevant ‘includes’ from both CDN and NPM below. Any ideas on why CDN works and NPM doesn’t?

CDN (working):


<script src="[https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.js)"></script>
<script src="[https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.js)"></script>
<script src="[https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.js)"></script>

``

NPM (no interactivity, same build code as used with CDN):

<link src='./node_modules/bokehjs/build/css/bokeh.min.css' rel="stylesheet" type="text/css">
<link src='./node_modules/bokehjs/build/css/bokeh-widgets.min.css' rel="stylesheet" type="text/css">
<link src='./node_modules/bokehjs/build/css/bokeh-tables.min.css' rel="stylesheet" type="text/css">
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src='./node_modules/bokehjs/build/js/bokeh.min.js'></script>
<script src='./node_modules/bokehjs/build/js/bokeh-widgets.js'></script>
<script src='./node_modules/bokehjs/build/js/bokeh-tables.js'></script>

``

Python Code:

import pandas as pd

from bokeh.palettes import Spectral4
from bokeh.plotting import figure, output_file, show
from bokeh.sampledata.stocks import AAPL, IBM, MSFT, GOOG

import bokeh.embed as bk_embed

p = figure(plot_width=800, plot_height=250, x_axis_type=“datetime”)
p.title.text = ‘Click on legend entries to mute the corresponding lines’

for data, name, color in zip([AAPL, IBM, MSFT, GOOG], [“AAPL”, “IBM”, “MSFT”, “GOOG”], Spectral4):
df = pd.DataFrame(data)
df[‘date’] = pd.to_datetime(df[‘date’])
renderer = p.line(df[‘date’], df[‘close’], line_width=2, color=color, alpha=0.8,
muted_color=color, muted_alpha=0.2, legend=name)
renderer.muted = True

p.legend.location = “top_left”
p.legend.click_policy=“mute”

script, div = bk_embed.components(p)

Write File to HTML

from jinja2 import Environment, FileSystemLoader, select_autoescape
env = Environment(loader=FileSystemLoader(‘/home/dunlop/Desktop/bokehjs’))

template = env.get_template(‘bokeh_test.html’)

html_str = template.render(script=script, div=div)

with open(‘test.html’, ‘w+’) as f:
f.write(html_str)

output_file(“interactive_legend.html”, title=“interactive_legend.py example”)

show(p)

``

jinja2 template

<link
    href="[https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.css](https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.css)"
    rel="stylesheet" type="text/css">
<link
    href="[https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.css](https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.css)"
    rel="stylesheet" type="text/css">
<link
    href="[https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.css](https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.css)"
    rel="stylesheet" type="text/css">

<script src="[https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.js)"></script>
<script src="[https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.js)"></script>
<script src="[https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.js)"></script>
{{ div }}

{{ script }}

``

everything looks good, except {{ script }} being outside (fixing this doesn’t help). At this point I’m not sure what’s going on, but the problem is not limited to interactivity, making bokehjs essentially unusable. Please report this (with fixed HTML) as a new issue (https://github.com/bokeh/bokeh/issues).

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/7484d36b-b51a-49fb-bfbc-9ec98bb4ba00%40continuum.io.

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

Doof! Must be that end of long day Thursday syndrome!

Thanks, I can’t believe I missed that,

JR

···

Am Freitag, 15. Juni 2018 11:29:45 UTC-4 schrieb mateusz.paprocki:

Hi,

On Fri, Jun 15, 2018 at 4:55 PM, Mateusz Paprocki [email protected] wrote:

Hi,

On Fri, Jun 15, 2018 at 3:54 PM, [email protected] wrote:

I
installed Bokeh from NPM (npm install -g bokehjs) on a new machine, and
all my interactivity didn’t work. I then tried using the javascript from the CDN with the same code, and it worked. Is there an issue with the NPM build? Relevant ‘includes’ from both CDN and NPM below. Any ideas on why CDN works and NPM doesn’t?

CDN (working):


<script src="[https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.js)"></script>
<script src="[https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.js)"></script>
<script src="[https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.js)"></script>

``

NPM (no interactivity, same build code as used with CDN):

<link src='./node_modules/bokehjs/build/css/bokeh.min.css' rel="stylesheet" type="text/css">
<link src='./node_modules/bokehjs/build/css/bokeh-widgets.min.css' rel="stylesheet" type="text/css">
<link src='./node_modules/bokehjs/build/css/bokeh-tables.min.css' rel="stylesheet" type="text/css">
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src='./node_modules/bokehjs/build/js/bokeh.min.js'></script>
<script src='./node_modules/bokehjs/build/js/bokeh-widgets.js'></script>
<script src='./node_modules/bokehjs/build/js/bokeh-tables.js'></script>

``

Python Code:

import pandas as pd

from bokeh.palettes import Spectral4
from bokeh.plotting import figure, output_file, show
from bokeh.sampledata.stocks import AAPL, IBM, MSFT, GOOG

import bokeh.embed as bk_embed

p = figure(plot_width=800, plot_height=250, x_axis_type=“datetime”)
p.title.text = ‘Click on legend entries to mute the corresponding lines’

for data, name, color in zip([AAPL, IBM, MSFT, GOOG], [“AAPL”, “IBM”, “MSFT”, “GOOG”], Spectral4):
df = pd.DataFrame(data)
df[‘date’] = pd.to_datetime(df[‘date’])
renderer = p.line(df[‘date’], df[‘close’], line_width=2, color=color, alpha=0.8,
muted_color=color, muted_alpha=0.2, legend=name)
renderer.muted = True

p.legend.location = “top_left”
p.legend.click_policy=“mute”

script, div = bk_embed.components(p)

Write File to HTML

from jinja2 import Environment, FileSystemLoader, select_autoescape
env = Environment(loader=FileSystemLoader(‘/home/dunlop/Desktop/bokehjs’))

template = env.get_template(‘bokeh_test.html’)

html_str = template.render(script=script, div=div)

with open(‘test.html’, ‘w+’) as f:
f.write(html_str)

output_file(“interactive_legend.html”, title=“interactive_legend.py example”)

show(p)

``

jinja2 template

<link
    href="[https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.css](https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.css)"
    rel="stylesheet" type="text/css">
<link
    href="[https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.css](https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.css)"
    rel="stylesheet" type="text/css">
<link
    href="[https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.css](https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.css)"
    rel="stylesheet" type="text/css">

<script src="[https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-0.12.16.min.js)"></script>
<script src="[https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.16.min.js)"></script>
<script src="[https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.js](https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.16.min.js)"></script>
{{ div }}

{{ script }}

``

everything looks good, except {{ script }} being outside (fixing this doesn’t help). At this point I’m not sure what’s going on, but the problem is not limited to interactivity, making bokehjs essentially unusable. Please report this (with fixed HTML) as a new issue (https://github.com/bokeh/bokeh/issues).

scratch that. In your HTML there’s:

This should be

Mateusz

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/7484d36b-b51a-49fb-bfbc-9ec98bb4ba00%40continuum.io.

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