☰Read-only archive⌕
Looking for help with Bokeh?

This is a read-only archive. Ask questions and join the conversation on GitHub.

Visit Community Support on GitHub →
Archived discussions · Captured October 28, 2026

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

Community Support
jr226.retail
jr226.retail

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 }}

``

···
⌁   Link to post
Mateusz_Paprocki2
Mateusz_Paprocki2

Hi,

···

On Fri, Jun 15, 2018 at 3:54 PM, jr226.retail@gmail.com 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 bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

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.

⌁   Link to post
Mateusz_Paprocki2
Mateusz_Paprocki2

Hi,

···

On Fri, Jun 15, 2018 at 4:55 PM, Mateusz Paprocki mpaprocki@anaconda.com wrote:

Hi,

scratch that. In your HTML there’s:

This should be

Mateusz

On Fri, Jun 15, 2018 at 3:54 PM, jr226.retail@gmail.com 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 bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

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.

⌁   Link to post
jr226.retail
jr226.retail

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 mpap...@anaconda.com wrote:

Hi,

On Fri, Jun 15, 2018 at 3:54 PM, jr226....@gmail.com 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 bokeh+un...@continuum.io.

To post to this group, send email to bo...@continuum.io.

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.

⌁   Link to post

End of archived discussion · Replies are disabled