First steps 1: Creating a line chart#

With just a few lines of Python code, Bokeh enables you to create interactive, JavaScript-powered visualizations displayable in a web browser.

The basic idea of Bokeh is a two-step process: First, you select from Bokeh’s building blocks to create your visualization. Second, you customize these building blocks to fit your needs.

To do that, Bokeh combines two elements:

A Python library for defining the content and interactive functionalities of your visualization.
A JavaScript library called BokehJS that is working in the background to display your interactive visualizations in a web browser.

Based on your Python code, Bokeh automatically generates all the necessary JavaScript and HTML code for you. In its default setting, Bokeh automatically loads any additional JavaScript code from Bokeh’s CDN (content delivery network).

Bokeh’s documentation consists of several elements, including the user guide with detailed explanations and examples and the reference guide that systematically describes every element of Bokeh. In this guide, you will find links to both those resources.

Note

All the code in “First Steps” sections can be be run as standard Python scripts. When run, these scripts will create HTML outputs that are visible in a web browser.

Creating a simple line chart#

Your first visualization will be a plot with a single line that looks like this:

Even a simple graph like this has interactive features. Use the tools on the right of the plot to explore:

Use the pan tool to move the graph within your plot.
Use the box zoom tool to zoom into an area of your plot.
Use the wheel zoom tool to zoom in and out with a mouse wheel.
Use the save tool to export the current view of your plot as a PNG file.
Use the reset tool to return your view to the plot’s default settings.
Use the help symbol to learn more about the tools available in Bokeh.

Follow these steps to recreate this simple line chart:

1. Create a new Python file on your machine (e.g. simple_line_chart.py) and open it in a code editor of your choice (such as Sublime Text,`Visual Studio Code`_ , etc.).

As the first line of your new Python script, import the necessary functions from the bokeh.plotting module:
from bokeh.plotting import figure, show

Define two lists containing the data for your line chart:

# prepare some data
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

Use the figure() function to create your plot. Pass the following arguments:
- title: the title of your line chart (optional)
- x_axis_label: a text label to put on the chart’s x-axis (optional)
- y_axis_label: a text label to put on the chart’s y-axis (optional)
# create a new plot with a title and axis labels p = figure(title="Simple line example", x_axis_label='x', y_axis_label='y')
Add a line graph to the plot you just created, using the line() function. Pass the following arguments:
- your lists x and y containing the data
- legend_label: a string to label the line graph with (optional)
- line_width: define the line width (in pixels, optional)
# add a line renderer with legend and line thickness to the plot p.line(x, y, legend_label="Temp.", line_width=2)
Finally, use the show() function to generate your graph and open a web browser to display the generated HTML file.
# show the results show(p)
From the command line, run the Python script you just created. For example:
python simple_line_chart.py

When you execute these lines of code, Bokeh creates an output file "lines.html". Bokeh also opens a browser to display it.

This is what the completed code for your line graph should look like:

from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

# create a new plot with a title and axis labels
p = figure(title="Simple line example", x_axis_label="x", y_axis_label="y")

# add a line renderer with legend and line thickness
p.line(x, y, legend_label="Temp.", line_width=2)

# show the results
show(p)

Combining multiple graphs#

With Bokeh’s bokeh.plotting interface, you can add more glyphs to your plot:

To add more line graphs to your plot, all you need to do is call the line() function multiple times.

First, add more data as the basis for additional graphs:

# prepare some data
x = [1, 2, 3, 4, 5]
y1 = [6, 7, 2, 4, 5]
y2 = [2, 3, 4, 5, 6]
y3 = [4, 5, 5, 7, 2]

Next, update the title for your plot by changing the string for the title argument in the figure() function:

# create a new plot with a title and axis labels
p = figure(title="Multiple line example", x_axis_label='x', y_axis_label='y')

Finally, add more calls to the line() function:

# add multiple renderers
p.line(x, y1, legend_label="Temp.", color="blue", line_width=2)
p.line(x, y2, legend_label="Rate", color="red", line_width=2)
p.line(x, y3, legend_label="Objects", color="green", line_width=2)

In this example, you also assign a different color to each of the lines by passing a different named color to each line’s color argument.

This is what the completed code for your multi-line plot should look like:

from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y1 = [6, 7, 2, 4, 5]
y2 = [2, 3, 4, 5, 6]
y3 = [4, 5, 5, 7, 2]

# create a new plot with a title and axis labels
p = figure(title="Multiple line example", x_axis_label="x", y_axis_label="y")

# add multiple renderers
p.line(x, y1, legend_label="Temp.", color="blue", line_width=2)
p.line(x, y2, legend_label="Rate", color="red", line_width=2)
p.line(x, y3, legend_label="Objects", color="green", line_width=2)

# show the results
show(p)

Recap: building visualizations#

You just completed all the basic steps that most basic visualizations with Bokeh’s bokeh.plotting interface require:

Preparing the data
You used a plain Python list, but other forms of serialized data work as well.
Calling the figure() function
This creates a plot with the most common default options. You can customize various properties of your plot, such as its title, tools, and axes labels.
Adding renderers
You used line() to create a line. Renderers have various options that allow you to specify visual attributes such as colors, legends, and widths.
Asking Bokeh to show() or save() the results
These functions either save your plot to an HTML file or display it in a browser.