---
title: "Run Bokeh in back-end, draw real-time charts to front-end, and make data scientists happy - Ko Ko"
tags: PyConAPAC2022, 2022-organize, 2022-共筆
---

# Run Bokeh in back-end, draw real-time charts to front-end, and make data scientists happy - Ko Ko

{%hackmd 3JQH2UcwQ1e5RMgz4GRiKg %}

<iframe src=https://app.sli.do/event/sGXsgsexVZRoXz7BdhcbaZ height=450 width=100%></iframe>

Slide link 投影片連結：https://www.slideshare.net/KoKo164/run-bokeh-in-backend-draw-realtime-charts-to-frontend-and-make-data-scientists-happy-2022-pycon-apac
YouTube link　演講影片連結：TBA

> Collaborative writing start from below
> 從這裡開始共筆

## About Speaker Ko Ko
1. Micrsoft AI MVP
2. Lecturer in large conference, such as COSCUP, .NET Conf, ModernWeb and so on.
3. Love NFT

## Dilemma of data scientists
1. Boss want data scientists to do everything which are belong to Front-end engineer
2. Shouldn't do HTML/CSS/JS because you are a data scientist
3. Learning curve of D3.js is very steep.

## Introduction to Bokeh
1. An interactive chart library which can make chart vivid.
2. Bokeh can generate chart with HTML/CSS/JS.
3. Bokeh can generate real-time chart to website.

## Live demo key point
1. Use Azure ML notebook for easier setup.
2. How to show interactive graph in Jupyter Notebook?

from bokeh.io import output_notebook
output_notebook()

4. Basic concept of Bokeh and how to draw.
5. How to export static files

frome bokeh.plotting import save
save(fig1, 'index.html')

## Bokeh JS
1. Another way to develop with Bokeh
2. Bokeh provides JavaScript library.
3. API is similar to Python.

## Run Bokeh in back-end
1. Use Bokeh server, cannot run in notebook.
2. Can connect to database.

## Key points of running Bokeh in back-end in Live Demo
1. Install Bokeh on your server
2. `$ bokeh serve --show myapp.py`
3. `bokeh serve --show dash`
4. Structure
myapp
|
+---__init__.py
+---app_hooks.py
+---main.py
+---request_handler.py
+---static
+---theme.yaml
+---templates
+---index.html

## Life Cycle Hook
1. If you are using a Bokeh server with a Django server, you need to call django.setup() for each Bokeh server to properly initialize Django for use by Bokeh application code.
2. API

def on_server_loaded(server_context):
    # If present, this function executes when the server starts.
   
def on_server_unloaded(server_context):
    # If present, this function executes when the server shuts down.
  
def on_session_created(session_context):
    # If present, this function executes when the server creates a session.
    
def on_session_destroyed(session_context):
    # If present, this function executes when the server closes a session.

## Integration with other websites
1. Many way to integrate
2. Standalone Content
- HTML files
- JSON items
- Components ( div tage targeted)
3. Bokeh Server Applications
- App documents (The easiest one)
- App sessions
- Standard template (Jinja template)\

from bokeh.embed import server_document
script = server_document("you bokeh server url")
print(script)

# then copy and paste the script to HTML

## Security strategy

bokeh serve --auth-module=/path/to/auth.py

bokeh serve --show --allow-websocket-origin=yourdomain.com myapp.py

BOKEH_SIGN_SESSIONS=yes bokeh serve --allow-websocket-origin=yourdomain.com myapp.py

## Conclusion
1. Use Bokeh for interactive chart.
2. Basic usage of Bokeh.
3. Use Bokeh in Back-end.
4. Integrate Bokeh in existing website.

Below is the part that speaker updated the talk/tutorial after speech
講者於演講後有更新或勘誤投影片的部份