Interactive visualizations become even more powerful when they can be integrated directly into websites, web applications, dashboards, and data portals. One of the biggest strengths of Bokeh is its ability to embed rich, interactive plots almost anywhere with only a few lines of Python code.
Whether you're building a personal dashboard, a Flask application, a Django website, or a data science report, Bokeh provides flexible embedding options that make sharing visualizations simple and efficient.
In this guide, you'll learn how to embed Bokeh plots and applications using the most common techniques.
What Is Embedding in Bokeh?
Embedding refers to displaying a Bokeh visualization inside another application instead of opening it as a separate HTML file.
Common embedding options include:
- Standalone HTML pages
- Flask applications
- Django websites
- Jupyter Notebook
- Web dashboards
- Data portals
- Interactive reports
- Custom web applications
Bokeh automatically generates the necessary HTML and JavaScript required to display interactive charts in a browser.
Installing Bokeh
If you haven't installed Bokeh yet, install it with pip.
pip install bokeh
Verify the installation:
import bokeh print(bokeh.__version__)
Creating a Simple Plot
Let's create a basic interactive visualization.
from bokeh.plotting import figure plot = figure( title="Monthly Sales", width=700, height=400 ) plot.line( [1,2,3,4,5], [4,7,2,8,9], line_width=3 )
This plot can now be embedded into different environments.
Embedding Using Components
The components() function is the most common embedding method.
from bokeh.embed import components script, div = components(plot)
This returns:
- JavaScript code
- HTML container
You can place these into any HTML template.
Example:
<html> <head> {{ script|safe }} </head> <body> <h2>Sales Dashboard</h2> {{ div|safe }} </body> </html>
This approach is ideal for integrating Bokeh into existing web pages.
Embedding with Standalone HTML
You can also generate an entire HTML document.
from bokeh.embed import file_html from bokeh.resources import CDN html = file_html( plot, CDN, "Interactive Dashboard" )
The generated HTML includes all required JavaScript resources and can be saved or served directly.
Advantages include:
- Easy deployment
- No web framework required
- Portable interactive visualizations
- Simple sharing
Embedding in Flask Applications
Bokeh integrates seamlessly with Flask.
Example Flask application:
from flask import Flask, render_template from bokeh.embed import components app = Flask(__name__) @app.route("/") def index(): script, div = components(plot) return render_template( "index.html", script=script, div=div ) app.run()
The HTML template inserts the generated script and div into the page, producing a fully interactive visualization.
Flask is a popular choice for lightweight analytics dashboards and internal business tools.
Embedding in Django Projects
Django also works well with Bokeh.
View example:
from django.shortcuts import render from bokeh.embed import components def dashboard(request): script, div = components(plot) return render( request, "dashboard.html", { "script": script, "div": div } )
The template renders the interactive chart using Django's templating system.
Using Bokeh Server Applications
For advanced interactivity, use a Bokeh server.
Example:
from bokeh.io import curdoc from bokeh.plotting import figure plot = figure() plot.circle( [1,2,3], [4,6,8], size=12 ) curdoc().add_root(plot)
Run the application:
bokeh serve app.py
Server applications allow:
- Live data updates
- Widgets
- User interaction
- Database connections
- Streaming data
- Real-time analytics
Embedding Interactive Dashboards
Multiple visualizations can be combined into a single dashboard.
from bokeh.layouts import column dashboard = column( plot1, plot2, plot3 )
Dashboards commonly include:
- Line charts
- Scatter plots
- Data tables
- Filters
- Dropdown menus
- Sliders
- Buttons
Embedding in Jupyter Notebook
Bokeh works exceptionally well inside notebooks.
from bokeh.io import output_notebook, show output_notebook() show(plot)
This displays the interactive chart directly within the notebook without exporting HTML.
Perfect for:
- Data exploration
- Machine learning
- Research
- Teaching
- Rapid prototyping
Using CDN Resources
Most embedded applications load Bokeh from a Content Delivery Network (CDN).
from bokeh.resources import CDN
Benefits include:
- Faster page loading
- Smaller application size
- Automatic browser caching
- Simplified deployment
Embedding with Inline Resources
If internet access is unavailable, use inline resources.
from bokeh.resources import INLINE html = file_html( plot, INLINE, "Offline Dashboard" )
Everything needed to display the chart is embedded directly into the HTML file.
This is useful for:
- Offline reports
- Internal company systems
- Secure environments
- Portable dashboards
Best Practices for Embedding Bokeh
Follow these recommendations for reliable and efficient applications:
- Keep visualizations focused and easy to understand.
- Use responsive sizing for different screen sizes.
- Load resources through a CDN whenever possible.
- Minimize unnecessary JavaScript for faster performance.
- Use Bokeh Server only when live interaction or real-time updates are required.
- Organize templates for easier maintenance.
- Test embedded charts across major web browsers.
- Optimize large datasets before rendering interactive plots.
Common Embedding Issues
Plot Does Not Display
Possible causes include:
- Missing Bokeh JavaScript resources
- Incorrect template placement
- JavaScript errors
- Missing CDN references
Always verify that the generated script and div are included correctly.
Interactive Tools Do Not Work
Ensure that JavaScript is enabled in the browser and that the required Bokeh resources are loaded successfully.
Bokeh Server Connection Errors
Confirm that the server is running:
bokeh serve app.py
Also verify the correct server address and firewall settings if accessing the application remotely.
Why Use Bokeh for Embedded Visualizations?
Bokeh offers several advantages for embedding interactive charts:
- Easy integration with Python web frameworks
- Rich interactive tools without writing JavaScript
- Responsive layouts for modern websites
- Support for live data and streaming applications
- Flexible embedding options for HTML, Flask, Django, and notebooks
- Excellent documentation and active community support
These capabilities make Bokeh an excellent choice for developers, analysts, educators, and businesses building modern data-driven web applications.
Conclusion
Embedding Bokeh plots and applications allows you to bring interactive data visualization directly into websites, dashboards, notebooks, and enterprise applications. Whether you need a simple embedded chart, a complete analytics dashboard, or a real-time web application powered by a Bokeh server, the library provides flexible and efficient solutions.
By mastering Bokeh's embedding features, you can create engaging visual experiences that make complex data easier to explore, analyze, and share while delivering professional-quality interactive applications across multiple platforms.
0 Comments