Html working only on Edge with Bokeh 2.1.1

I am trying to execute the following simple script with python 3.6.1:

from bokeh.plotting import figure
from bokeh.io import output_file, save
from bokeh.models import ColumnDataSource

df = {'x': [1.,2.,3.,4.,5.], 'y': [1.,2.,3.,4.,5.]}
source = ColumnDataSource(df)
p = figure()

p.line('x', 'y', source=source)
p.circle('x', 'y', source=source)
output_file('test.html')
save(p)

However, the resulting file can be visualised only with MS Edge. IE 11 and Chrome do not work. Actually they display a blank page.

The version of bokeh I am using is 2.1.1. If I downgrade bokeh to 1.4.0 everything works fine.

Can anyone help me with that?
Thanks in advance
Gio

Are there any errors in JS console in the browsers where it doesn’t work?

Not really sure what you mean. When I open the file with IE 11 or Chrome I get a blank page. How to I access the JS console to check the errors?

@giovanni

In Chrome, right-mouse-click on the page and select Inspect, then choose the Console tab from the pane that appears in the righthand side of the browser. This gives the JavaScript console.

OK, I think I manged to access the console. here are the errors in Chrome

Access to script at 'https://cdn.bokeh.org/bokeh/release/bokeh-2.1.1.min.js' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
bokeh-2.1.1.min.js:1 Failed to load resource: net::ERR_FAILED
test.html:21 Uncaught ReferenceError: Bokeh is not defined at test.html:21
test.html:49 Uncaught ReferenceError: Bokeh is not defined at HTMLDocument.fn (test.html:49)

In IE 11 I do not get any error:

image927×721 16.9 KB

In Edge (where the page works) I get the following

HTML1300: Navigation occurred.    [test.html (1,1)]
[bokeh] setting log level to: 'info'
[bokeh] document idle at 45 ms

Thanks. I have accessed it by pressing F12

@giovanni

Your code works for me as expected using Chrome 84.0.4147.125 and bokeh 2.1.1 on Mac OS X. My python version with this environment is 3.8.3 as part of the current Anaconda distribution.

Unfortunately, I cannot reproduce the problem in my environment, but hopefully this data point helps narrow down other aspects that might cause the difference due to operating system and/or package differences.

Try clearing the cache. It’s a common issue: [BUG] Potential Chrome CORS problem with local output · Issue #9773 · bokeh/bokeh · GitHub

@giovanni

See this bug on github for the underlying cause. https://github.com/bokeh/bokeh/issues/9773

Try clearing the browser cache in Chrome to fix.

Thanks everyone. I solved the problem with Chrome by cleaning the cache as suggested. However, I cannot open it with IE 11 (still having blank page with it). I tried to clean the history also in IE 11, but I could not solve the issue.

Considering that I have to share the file with my colleagues and that IE11 is still used in our company PCs I will downgrade to bokeh 1.4.0 that was working OK with IE 11 too.

Thanks everyone

IE11 requires a legacy build of Bokeh. If you open the JS console there, you will probably see other errors, maybe something about const. Here’s some context: Drop support for legacy web browsers · Issue #9731 · bokeh/bokeh · GitHub

As reported above I do not get any error in the IE11 console. Actually I do not get anything.
By the way, from what I could understand with my limited knowledge and the link provided, is that IE11 does not support ES6, i.e. a new javascript platform (?). It also appears that IE11 will not be supported anymore after August 2021. So this should be just a problem for this year only.
However, I found this post:

https://stackoverflow.com/questions/39902809/support-for-es6-in-internet-explorer-11

where someone suggests to use a transpiler such as Babel. Actually I did not get it. I have the impression that Babel offers a platform to simply write and test scripts. Is there any possibility to use Babel to make a bokeh generated page work on IE11?

Thanks again for your help

If you need to support viewers using IE you will have to use “legacy” resource Bundles, which are currently busted as it happens, but should be fixed in 2.2 due to be released on Monday. You can use bokeh.resources.INLINE_LEGACY or pass legacy=True to a Resources object yourself. (Presumably setting CDN.legacy = True might also work tho I have not tried)

It also appears that IE11 will not be supported anymore after August 2021. So this should be just a problem for this year only.

Well, there will undoubtedly be IE users even after that date, but more relevant for our actual work, even today IE usage is down to only ~3% worldwide. Looking only at Bokeh CDN logs, IE usage is even lower. The economic realities of finite project resources means sometimes we have to pick and choose and prioritize, which is why we have already largely jettisoned IE support, modulo legacy resource bundles.

Thanks for the tip. I modified my script as follows:

from bokeh.plotting import figure
from bokeh.io import output_file
from bokeh.models import ColumnDataSource
from bokeh.embed import file_html
from bokeh.resources import INLINE_LEGACY

df = {'x': [1.,2.,3.,4.,5.], 'y': [1.,2.,3.,4.,5.]}
source = ColumnDataSource(df)
p = figure()

p.line('x', 'y', source=source)
p.circle('x', 'y', source=source)

resources = INLINE_LEGACY
outputfilename = 'test.html'
output_file(outputfilename)

with open(outputfilename, 'w') as f:
    f.write(file_html(p, resources, 'Test Page'))

However, I am still incapable to visualise the page with IE11. I noticed a difference though. The inline option made the page available off line (the js script is entirely written on the html page).

I have the impression that the legacy option is not really working. In this regard, I found this post that could be related:

https://github.com/bokeh/bokeh/issues/10233

where it is stated that:

I did notice that Resources(mode="inline",legacy=True).render() and Resources(mode="inline",legacy=False).render() give exactly the same output

I did not understand if the issue was resolved or not.

As I mentioned above it should be fixed in the next release.

Many apologies for that. I did not read very carefully the first part of your previous post. Thanks again. Looking forward to test the new version of the module.

Tried the new release today and I got the same behaviour: IE 11 still not working with my latest script

You’ll have to use something like CDN.legacy = True which I did verify worked on IE 11 before the release. Otherwise you need to be more specific about exactly what you tried.

Thanks for that ! So in the end the script that allowed me to use IE 11 was the following

from bokeh.plotting import figure
from bokeh.io import output_file
from bokeh.models import ColumnDataSource
from bokeh.embed import file_html
from bokeh.resources import CDN

df = {'x': [1.,2.,3.,4.,5.], 'y': [1.,2.,3.,4.,5.]}
source = ColumnDataSource(df)
p = figure()

p.line('x', 'y', source=source)
p.circle('x', 'y', source=source)

outputfilename = 'test.html'
output_file(outputfilename)
CDN.legacy = True
resources = CDN
with open(outputfilename, 'w') as f:
    f.write(file_html(p, resources, 'Test Page'))

Sorry to bother again but I came across with this:

https://github.com/bokeh/bokeh/issues/10426

I had the same problem. I solved with the suggested command as pointed out in the previous post. However, I lost the “inline” option that granted me the possibility to open the html page offline.

In any case thanks for all the support.

@giovanni There is already a PR

The fix will be in the next release (2.2.1 if we have one, else 2.3)