add bokeh example

fpliger · fpliger · commit c005784dc5d0 · 2022-04-05T09:59:37.000-05:00
diff --git a/pyscriptjs/public/bokeh.html b/pyscriptjs/public/bokeh.html
@@ -0,0 +1,54 @@
+<html><head>
+    <title>Bokeh Example</title>
+    <meta charset="iso-8859-1">
+    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js"></script>
+    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
+    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
+    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
+    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js"></script>
+
+    <script type="text/javascript">
+        Bokeh.set_log_level("info");
+    </script>
+    <link rel="stylesheet" href="build/pyscript.css" />
+    
+    <script defer src="build/pyscript.js"></script>
+    
+    </head>
+    <body>
+        <h1>Bokeh Example</h1>
+        <div id="myplot"></div>
+        <py-repl></py-repl>
+    
+    <py-script>
+from bokeh.plotting import figure
+from bokeh.resources import CDN
+import json
+from bokeh.embed import json_item
+from js import Bokeh
+
+
+from bokeh.io import output_notebook, show
+from bokeh.plotting import figure
+import bokeh.sampledata
+
+# create a new plot with default tools, using figure
+p = figure(plot_width=400, plot_height=400)
+
+# add a circle renderer with x and y coordinates, size, color, and alpha
+p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=15, line_color="navy", fill_color="orange", fill_alpha=0.5)
+p_json = json.dumps(json_item(p, "myplot"))
+print(p_json)
+
+async def show(item):
+  print("about to embed")
+  Bokeh.embed.embed_item(item)
+  print ("Done embedding...")
+
+pyscript.run_until_complete(show(p_json))
+#show(p) # show the results
+
+    </py-script>
+    
+</body>
+</html>
