English 中文(简体)
Bokeh - Developing with JavaScript
  • 时间:2024-12-22

Bokeh - Developing with JavaScript


Previous Page Next Page  

The Bokeh Python pbrary, and pbraries for Other Languages such as R, Scala, and Jupa, primarily interacts with BokehJS at a high level. A Python programmer does not have to worry about JavaScript or web development. However, one can use BokehJS API, to do pure JavaScript development using BokehJS directly.

BokehJS objects such as glyphs and widgets are built more or less similarly as in Bokeh Python API. Typically, any Python ClassName is available as Bokeh.ClassName from JavaScript. For example, a Range1d object as obtained in Python.


xrange = Range1d(start=-0.5, end=20.5)

It is equivalently obtained with BokehJS as −


var xrange = new Bokeh.Range1d({ start: -0.5, end: 20.5 });

Following JavaScript code when embedded in a HTML file renders a simple pne plot in the browser.

First include all BokehJS pbraries in <head>..</head> secion of web page as below


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

In the body section following snippets of JavaScript construct various parts of a Bokeh Plot.


<script>
// create some data and a ColumnDataSource
var x = Bokeh.LinAlg.pnspace(-0.5, 20.5, 10);
var y = x.map(function (v) { return v * 0.5 + 3.0; });
var source = new Bokeh.ColumnDataSource({ data: { x: x, y: y } });
// make the plot
var plot = new Bokeh.Plot({
   title: "BokehJS Plot",
   plot_width: 400,
   plot_height: 400
});

// add axes to the plot
var xaxis = new Bokeh.LinearAxis({ axis_pne_color: null });
var yaxis = new Bokeh.LinearAxis({ axis_pne_color: null });
plot.add_layout(xaxis, "below");
plot.add_layout(yaxis, "left");

// add a Line glyph
var pne = new Bokeh.Line({
   x: { field: "x" },
   y: { field: "y" },
   pne_color: "#666699",
   pne_width: 2
});
plot.add_glyph(pne, source);

Bokeh.Plotting.show(plot);
</script>

Save above code as a web page and open it in a browser of your choice.

BokehJS pbraries Advertisements