CODEWITHSUNDEEP
bokehbokehjs
pfincent
pfincent

Reputation: 485

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

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: console output

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

Upvotes: 0

Views: 549

Answers (1)

bigreddot
bigreddot

Reputation: 34568

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>

Upvotes: 1

Related Questions