- Bokeh Tutorial
- Bokeh - Home
- Bokeh - Introduction
- Bokeh - Environment Setup
- Bokeh - Getting Started
- Bokeh - Jupyter Notebook
- Bokeh - Basic Concepts
- Bokeh - Plots with Glyphs
- Bokeh - Area Plots
- Bokeh - Circle Glyphs
- Bokeh - Rectangle, Oval and Polygon
- Bokeh - Wedges and Arcs
- Bokeh - Specialized Curves
- Bokeh - Setting Ranges
- Bokeh - Axes
- Bokeh - Annotations and Legends
- Bokeh - Pandas
- Bokeh - ColumnDataSource
- Bokeh - Filtering Data
- Bokeh - Layouts
- Bokeh - Plot Tools
- Bokeh - Styling Visual Attributes
- Bokeh - Customising legends
- Bokeh - Adding Widgets
- Bokeh - Server
- Bokeh - Using Bokeh Subcommands
- Bokeh - Exporting Plots
- Bokeh - Embedding Plots and Apps
- Bokeh - Extending Bokeh
- Bokeh - WebGL
- Bokeh - Developing with JavaScript
- Bokeh Useful Resources
- Bokeh - Quick Guide
- Bokeh - Useful Resources
- Bokeh - Discussion
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Bokeh - Developing with JavaScript
The Bokeh Python library, and libraries for Other Languages such as R, Scala, and Julia, 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 line plot in the browser.
First include all BokehJS libraries 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.linspace(-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_line_color: null });
var yaxis = new Bokeh.LinearAxis({ axis_line_color: null });
plot.add_layout(xaxis, "below");
plot.add_layout(yaxis, "left");
// add a Line glyph
var line = new Bokeh.Line({
x: { field: "x" },
y: { field: "y" },
line_color: "#666699",
line_width: 2
});
plot.add_glyph(line, source);
Bokeh.Plotting.show(plot);
</script>
Save above code as a web page and open it in a browser of your choice.
