Access to bokehJS source code is forbidden when trying to run minimal example from user guide

Question

I am trying to run the minimal example from the BokehJS user guide.

I created an html file with the following code (pasted from the above link):

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Complete Example</title>


<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.4.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-1.4.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-1.4.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-1.4.0.min.js"></script>

<script>
//The order of CSS and JS imports above is important.
</script>
<script>
// create a data source to hold data
var source = new Bokeh.ColumnDataSource({
    data: { x: [], y: [] }
});

// make a plot with some tools
var plot = Bokeh.Plotting.figure({
    title:'Example of Random data',
    tools: "pan,wheel_zoom,box_zoom,reset,save",
    height: 300,
    width: 300
});

// add a line with data from the source
plot.line({ field: "x" }, { field: "y" }, {
    source: source,
    line_width: 2
});

// show the plot, appending it to the end of the current section
Bokeh.Plotting.show(plot);

function addPoint() {
    // add data --- all fields must be the same length.
    source.data.x.push(Math.random())
    source.data.y.push(Math.random())

    // notify the DataSource of "in-place" changes
    source.change.emit()
}

var addDataButton = document.createElement("Button");
addDataButton.appendChild(document.createTextNode("Add Some Data!!!"));
document.currentScript.parentElement.appendChild(addDataButton);
addDataButton.addEventListener("click", addPoint);

addPoint();
addPoint();
</script>
</head>

<body>
</body>

</html>

That should create a page with a plot. Instead, I get an empty page after opening the file in the browser.

This is the console output:

What's going on here? Why is access to the bokehJS source code forbidden?

bigreddot · Accepted Answer · 2020-01-04T18:34:36.927

1

The JS code that actually adds BokehJS content needs to run in the <body> not in the <head>. Additionally, you don't need to include the JS files for the widgets, tables, or webgl, if you are not using those features. Here is a complete version, updated:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Complete Example</title>

  <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.js"></script>
  <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-1.4.0.min.js"></script>
</head>

<body>
<script>
  // create a data source to hold data
  var source = new Bokeh.ColumnDataSource({
    data: { x: [], y: [] }
  });

  // make a plot with some tools
  var plot = Bokeh.Plotting.figure({
    title:'Example of Random data',
    tools: "pan,wheel_zoom,box_zoom,reset,save",
    height: 300,
    width: 300
  });

  // add a line with data from the source
  plot.line({ field: "x" }, { field: "y" }, {
    source: source,
    line_width: 2
  });

  // show the plot, appending it to the end of the current section
  Bokeh.Plotting.show(plot);

  function addPoint() {
    // add data --- all fields must be the same length.
    source.data.x.push(Math.random())
    source.data.y.push(Math.random())

    // notify the DataSource of "in-place" changes
    source.change.emit()
  }

  var addDataButton = document.createElement("Button");
  addDataButton.appendChild(document.createTextNode("Add Some Data!!!"));
  document.currentScript.parentElement.appendChild(addDataButton);
  addDataButton.addEventListener("click", addPoint);

  addPoint();
  addPoint();
</script>
</body>

</html>

edited Jan 04 '20 at 18:34

answered Jan 02 '20 at 06:25

bigreddot

33,642
5
69
122

The 403s are harmless and can be ignored. The browser is trying to load JS source maps, which are useful for debugging, but that we do not publish. The special source map comments that is causing the browser to do this will be stripped in a future release. – bigreddot Jan 02 '20 at 17:46
If that is the case, then something else must be going on, since even with your new code I still only get an empty page. I made a screenshot of the console output and posted it here: https://imgur.com/a/3Vxy2J1 Thanks so much for your time. I love working with Bokeh in Python, but for some reason I just can't get it to work in JS. – pfincent Jan 04 '20 at 18:13
1

The CDN URL in whatever you are actually viewing locally is wrong. You can see in the first message, it's got junk `%20` in it. I guess I fat-fingered an extra space in the answer above. I have edited it. – bigreddot Jan 04 '20 at 18:36
Removing the whitespace did resolve the problem, the plot is being displayed now. One more thing though: Do you think it has something to do with my setup that the code I originally posted does not work? If not, I would suggest editing the BokehJS user guide page that I linked to, for future newbies like me trying to run that code. Regardless, thank you for your help, I really appreciate the work you guys are doing at Bokeh. – pfincent Jan 04 '20 at 18:50
Thanks for the kind words. I think it would be great to clarify that the code needs to be under the body tag. Adding a note would a great task for a new contributor, I'd be happy to help with a PR if you want to make a GitHub issue to start. – bigreddot Jan 04 '20 at 19:38

Access to bokehJS source code is forbidden when trying to run minimal example from user guide

1 Answers1