How do I integrate Bokeh with Angular 4?

2020-03-30 01:34发布

站内问答 / Python
1870 1 4

I have bokeh plot being generated in the backend, which I want to embed onto an already existing angular 4 webapp. Currently I've use the bokeh.components function which yields the following two html tags.

<script type="text/javascript">
  (function() {
    var fn = function() {
      Bokeh.safely(function() {
        (function(root) {
          function embed_document(root) {

          var docs_json = '{"d199dc51-c663-4220-800f-a5f0d7c3a97a":{"roots":{"references":[{"attributes":{"bottom_units":"screen","fill_alpha":{"value":0.5},"fill_color":{"value":"lightgrey"},"left_units":"screen","level":"overlay","line_alpha":{"value":1.0},"line_color":{"value":"black"},"line_dash":[4,4],"line_width":{"value":2},"plot":null,"render_mode":"css","right_units":"screen","top_units":"screen"},"id":"f795b234-3b1e-4117-aa31-bccbbaaccf71","type":"BoxAnnotation"},{"attributes":{"axis_line_color":{"value":null},"formatter":{"id":"8c794376-5b4c-42f6-bcf4-662922d47df1","type":"BasicTickFormatter"},"major_tick_line_color":{"value":null},"minor_tick_line_color":{"value":null},"plot":{"id":"6fbff9b0-a4fc-4fc1-a50e-d34f906928b2","subtype":"Figure","type":"Plot"},"ticker":{"id":"5468ade8-3979-45b4-9dd0-fbb3cab5b888","type":"BasicTicker"},"visible":null},"id":"be01b966-482b-4e6f-8c6f-8bc0373791aa","type":"LinearAxis"},{"attributes":{},"id":"f9e57a1a-b5e1-4c3f-8e0d-4789dca393ec","type":"SaveTool"},{"attributes":{"fill_color":{"value":"#6C69EB"},"height":{"value":0.5},"right":{"field":"Sales"},"y":{"field":"ID"}},"id":"4dc67234-e29e-4e53-997c-3a6b2e40d5e5","type":"HBar"},{"attributes":{},"id":"db86af55-1185-4097-839a-8d5dc01f19a2","type":"LinearScale"},{"attributes":{},"id":"538fede7-868b-4740-a75e-cb6065ac1194","type":"ResetTool"},{"attributes":{"source":{"id":"946bc6d9-32c8-4dfe-8d34-a29c7c06a242","type":"ColumnDataSource"}},"id":"4ff758a6-c013-4e17-ae69-5c039b0c9394","type":"CDSView"},{"attributes":{"callback":null,"factors":["1348","1226","1306","1268","1103","1129","1340","1470","1783","1346","1264","1387","1775","1247","1771","1770","1773","1772","1190","1733","1727","1694","1584","1503","1113","404","403","401","509","1119","1653","1467","1677","1670","1565","1391","1699","995","1235","1314","1759","1218","1336","1553","1668","1134","1493","1742","1561","1501","1567","1676","1678","1251","1664","1056","1557","1753","1602","1288","1438","1657","1681","1604","1768","1105","1750","1009","1361","1666","1259","1766","1382"]},"id":"2949c368-f95d-4a48-addb-988e5d963ff9","type":"FactorRange"},{"attributes":{},"id":"925e5c0f-b284-4614-a702-33c0ee4bcf34","type":"WheelZoomTool"},{"attributes":{"grid_line_color":{"value":null},"plot":{"id":"6fbff9b0-a4fc-4fc1-a50e-d34f906928b2","subtype":"Figure","type":"Plot"},"ticker":{"id":"5468ade8-3979-45b4-9dd0-fbb3cab5b888","type":"BasicTicker"}},"id":"b1bd251f-e88f-46f1-ac91-5ab1d74ece4b","type":"Grid"},{"attributes":{},"id":"4f69bbc9-c6df-4c64-976c-9013fddff8db","type":"CategoricalTickFormatter"},{"attributes":{"callback":null,"tooltips":"\\n    &lt;div&gt;\\n        &lt;div&gt;\\n            &lt;span style=\\"font-size: 10px;\\"&gt;Merch_Ifonafed:&lt;/span&gt;\\n            &lt;span style=\\"font-size: 15px; font-weight: bold;\\"&gt;@ID&lt;/span&gt;\\n        &lt;div&gt;\\n        \\n        &lt;div&gt;\\n            &lt;span style=\\"font-size: 10px;\\"&gt;Revenue:&lt;/span&gt;\\n            &lt;span style= font-size:15px; font-weight: bold;&gt;&amp;#x20B9;&lt;/span&gt; \\n            &lt;span style=\\"font-size: 15px; font-weight: bold;\\"&gt;@Sales{0,0.000}&lt;/span&gt;\\n        &lt;div&gt;\\n        \\n        &lt;div&gt;\\n            &lt;span style=\\"font-size: 10px;\\"&gt;Visits:&lt;/span&gt;\\n            &lt;span style=\\"font-size: 15px; font-weight: bold;\\"&gt;@Count&lt;/span&gt;            \\n        &lt;div&gt;\\n        \\n        &lt;div&gt;\\n            &lt;span style=\\"font-size: 10px;\\"&gt;Avg Val/Tr:&lt;/span&gt;\\n            &lt;span style= font-size:15px; font-weight: bold;&gt;&amp;#x20B9;&lt;/span&gt; \\n            &lt;span style=\\"font-size: 15px; font-weight: bold;\\"&gt;@AVG&lt;/span&gt;\\n\\n            \\n        &lt;div&gt;\\n        \\n        &lt;div&gt;\\n            &lt;span style=\\"font-size: 10px;\\"&gt;Mode:&lt;/span&gt;\\n            &lt;span style= font-size:15px; font-weight: bold;&gt;&amp;#x20B9;&lt;/span&gt; \\n            &lt;span style=\\"font-size: 15px; font-weight: bold;\\"&gt;@Mode&lt;/span&gt;\\n\\n        &lt;div&gt;\\n       \\n        &lt;div&gt;\\n            &lt;span style=\\"font-size: 10px;\\"&gt;Unique_Visitors:&lt;/span&gt;\\n            &lt;span style=\\"font-size: 15px; font-weight: bold;\\"&gt;@Unique_guests&lt;/span&gt;\\n\\n        &lt;/div&gt;\\n    &lt;/div&gt;\\n    "},"id":"508c69b2-507e-4091-8056-05e75b6a53bf","type":"HoverTool"},{"attributes":{},"id":"af2d3da9-5a8e-48f8-acb3-43d7d7778809","type":"HelpTool"},{"attributes":{},"id":"3de664c0-c02a-4eda-9c07-7e580557f395","type":"CategoricalScale"},{"attributes":{"axis_line_color":{"value":null},"formatter":{"id":"4f69bbc9-c6df-4c64-976c-9013fddff8db","type":"CategoricalTickFormatter"},"plot":{"id":"6fbff9b0-a4fc-4fc1-a50e-d34f906928b2","subtype":"Figure","type":"Plot"},"ticker":{"id":"89f1fa5c-f135-47df-8383-cb589af6606f","type":"CategoricalTicker"}},"id":"e9113819-fe22-4051-bbaa-c568873d85fe","type":"CategoricalAxis"},{"attributes":{"data_source":{"id":"946bc6d9-32c8-4dfe-8d34-a29c7c06a242","type":"ColumnDataSource"},"glyph":{"id":"4dc67234-e29e-4e53-997c-3a6b2e40d5e5","type":"HBar"},"hover_glyph":null,"muted_glyph":null,"view":{"id":"4ff758a6-c013-4e17-ae69-5c039b0c9394","type":"CDSView"}},"id":"9fed1d26-a3c2-4096-8c12-cca8bc423562","type":"GlyphRenderer"},{"attributes":{"below":[{"id":"be01b966-482b-4e6f-8c6f-8bc0373791aa","type":"LinearAxis"}],"left":[{"id":"e9113819-fe22-4051-bbaa-c568873d85fe","type":"CategoricalAxis"}],"outline_line_alpha":{"value":0.2},"renderers":[{"id":"be01b966-482b-4e6f-8c6f-8bc0373791aa","type":"LinearAxis"},{"id":"b1bd251f-e88f-46f1-ac91-5ab1d74ece4b","type":"Grid"},{"id":"e9113819-fe22-4051-bbaa-c568873d85fe","type":"CategoricalAxis"},{"id":"a48580a8-8254-4b66-a45c-a3e41210d5f4","type":"Grid"},{"id":"f795b234-3b1e-4117-aa31-bccbbaaccf71","type":"BoxAnnotation"},{"id":"9fed1d26-a3c2-4096-8c12-cca8bc423562","type":"GlyphRenderer"}],"title":{"id":"c23880dd-5727-4f94-9e1d-f1ecf3d2f71e","type":"Title"},"toolbar":{"id":"f380e570-a3bb-4430-9bb8-ba214afcf178","type":"Toolbar"},"x_range":{"id":"55df4eae-ccbb-4c6d-afa3-653995f8bb79","type":"DataRange1d"},"x_scale":{"id":"db86af55-1185-4097-839a-8d5dc01f19a2","type":"LinearScale"},"y_range":{"id":"2949c368-f95d-4a48-addb-988e5d963ff9","type":"FactorRange"},"y_scale":{"id":"3de664c0-c02a-4eda-9c07-7e580557f395","type":"CategoricalScale"}},"id":"6fbff9b0-a4fc-4fc1-a50e-d34f906928b2","subtype":"Figure","type":"Plot"},{"attributes":{},"id":"5468ade8-3979-45b4-9dd0-fbb3cab5b888","type":"BasicTicker"},{"attributes":{"plot":null,"text":""},"id":"c23880dd-5727-4f94-9e1d-f1ecf3d2f71e","type":"Title"},{"attributes":{"active_drag":"auto","active_inspect":"auto","active_scroll":"auto","active_tap":"auto","tools":[{"id":"883319d0-a94d-44bd-ad9d-8e7b4a393771","type":"PanTool"},{"id":"925e5c0f-b284-4614-a702-33c0ee4bcf34","type":"WheelZoomTool"},{"id":"ac6748d3-f7ae-4232-8ed3-74432a8f67ab","type":"BoxZoomTool"},{"id":"f9e57a1a-b5e1-4c3f-8e0d-4789dca393ec","type":"SaveTool"},{"id":"538fede7-868b-4740-a75e-cb6065ac1194","type":"ResetTool"},{"id":"af2d3da9-5a8e-48f8-acb3-43d7d7778809","type":"HelpTool"},{"id":"508c69b2-507e-4091-8056-05e75b6a53bf","type":"HoverTool"}]},"id":"f380e570-a3bb-4430-9bb8-ba214afcf178","type":"Toolbar"},{"attributes":{"overlay":{"id":"f795b234-3b1e-4117-aa31-bccbbaaccf71","type":"BoxAnnotation"}},"id":"ac6748d3-f7ae-4232-8ed3-74432a8f67ab","type":"BoxZoomTool"},{"attributes":{"callback":null,"column_names":["Count","AVG","ID","Sales"],"data":{"AVG":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"Count":[11,473,224,12,2522,1,3,1668,4,116,355,248,7,9,2,4,1922,1,1613,62,239,1,135,14,685,303,720,1092,1,264,1384,311,3,1680,903,80,2,337,249,207,1,271,2,1,440,1312,74,1169,3,427,1303,36,46,1002,97,438,2,2,272,1287,1205,212,6,1142,42,925,3,1130,13,692,887,166,446],"ID":["1348","1226","1306","1268","1103","1129","1340","1470","1783","1346","1264","1387","1775","1247","1771","1770","1773","1772","1190","1733","1727","1694","1584","1503","1113","404","403","401","509","1119","1653","1467","1677","1670","1565","1391","1699","995","1235","1314","1759","1218","1336","1553","1668","1134","1493","1742","1561","1501","1567","1676","1678","1251","1664","1056","1557","1753","1602","1288","1438","1657","1681","1604","1768","1105","1750","1009","1361","1666","1259","1766","1382"],"Sales":[14920,113230,50641,2400,585233,0,0,438801,900,56428,116718,89224,0,0,780,0,552609,0,389764,14688,50450,0,28240,2680,147458,89125,183097,266313,0,2094625,499393,90876,10,434509,238438,17970,290,141866,85690,47865,0,71074,320,0,89103,348101,20536,283752,0,138798,341643,8950,8451,335189,23034,125857,0,0,80885,342261,351727,52722,732,324171,11451,245051,0,370611,2310,161049,257464,41871,107453]}},"id":"946bc6d9-32c8-4dfe-8d34-a29c7c06a242","type":"ColumnDataSource"},{"attributes":{"dimension":1,"grid_line_color":{"value":null},"plot":{"id":"6fbff9b0-a4fc-4fc1-a50e-d34f906928b2","subtype":"Figure","type":"Plot"},"ticker":{"id":"89f1fa5c-f135-47df-8383-cb589af6606f","type":"CategoricalTicker"}},"id":"a48580a8-8254-4b66-a45c-a3e41210d5f4","type":"Grid"},{"attributes":{},"id":"883319d0-a94d-44bd-ad9d-8e7b4a393771","type":"PanTool"},{"attributes":{},"id":"89f1fa5c-f135-47df-8383-cb589af6606f","type":"CategoricalTicker"},{"attributes":{"callback":null},"id":"55df4eae-ccbb-4c6d-afa3-653995f8bb79","type":"DataRange1d"},{"attributes":{},"id":"8c794376-5b4c-42f6-bcf4-662922d47df1","type":"BasicTickFormatter"}],"root_ids":["6fbff9b0-a4fc-4fc1-a50e-d34f906928b2"]},"title":"Bokeh Application","version":"0.12.13"}}';
          var render_items = [{"docid":"d199dc51-c663-4220-800f-a5f0d7c3a97a","elementid":"74705daf-2fe7-47e6-9800-0ecaf72e9708","modelid":"6fbff9b0-a4fc-4fc1-a50e-d34f906928b2"}];
          root.Bokeh.embed.embed_items(docs_json, render_items);

          }
          if (root.Bokeh !== undefined) {
            embed_document(root);
          } else {
            var attempts = 0;
            var timer = setInterval(function(root) {
              if (root.Bokeh !== undefined) {
                embed_document(root);
                clearInterval(timer);
              }
              attempts++;
              if (attempts > 100) {
                console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing")
                clearInterval(timer);
              }
            }, 10, root)
          }
        })(window);
      });
    };
    if (document.readyState != "loading") fn();
    else document.addEventListener("DOMContentLoaded", fn);
  })();
</script>

as well as 

<div class="bk-root">
    <div class="bk-plotdiv" id="74705daf-2fe7-47e6-9800-0ecaf72e9708"></div>
</div>

which I can embed onto a small boilerplate: 

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Bokeh Scatter Plots</title>

            <link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.6.min.css" type="text/css" />
            <script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.6.min.js"></script>

            <script type="text/javascript">
  (function() {
    var fn = function() {
      Bokeh.safely(function() {
        (function(root) {
          function embed_document(root) {

          var docs_json = <!---docs_json---!>
          var render_item = <!---items---!>

        </head>
        <body>
            <div class="bk-root">
        <div class="bk-plotdiv" id=<!--- div_id ---!>></div>
    </div>
        </body>
    </html>

For this I need to parse out the important variables(docs_json,render_id,div_id) from the first two scripts and then have them sent as a json to the Frontend using Flask. much like this google forms question

https://groups.google.com/a/continuum.io/forum/#!topic/bokeh/McLDXP414ps

Is there a better way to send my bokeh plot to the angular front end, instead of having to go through all of this ?

1条回答
够拽才男人
2楼-- · 2020-03-30 02:35

you want to be able to send update events from the python back-end and have all the nice interactions like button press- and text input- events coming with Angular, right?

I prepared a nice and clean angular-project for you, see in https://github.com/NuCOS/angular-bokeh, but the interactions you would have to implement as you wish, i did not want to over-float the example with stuff that actually is not in a direct connection with the problem you described.

In short, I show that you have to do a little bit more work, you can not put the boilerplate into the html part like in your example.

To integrate the BokehJS lib into an Angular project we use an angular component named bokeh-chart. The plotting data is most likely provided by a websocket service, in our example, we use aiohttp, but you are free to set up any other websocket connection. The angular component may be integrated anywhere in the html by its tag-name, the following snippet shows the Bokeh chart component

<bokeh-chart></bokeh-chart>

The bokeh-chart component is a regular angular component, with a html part

<div [id]="id"></div>

and a typescript part. The chart component only needs to provide the id to its own html part. The data for the chart is provided by a service that is called right at the initialization of the component in ngOnInit. The relevant typescript part of the Bokeh chart component looks like this:

...
export class BokehChartComponent implements OnInit {
  public id: string;

  constructor(
    private bokehService: BokehService) { }


 ngOnInit() {
     this.id = "chart";
     this.bokehService.getChart(this.id);
 }
}

Since the BokehJS lib has no types available, the integration in angular is not as straightforward as it should be. One has access to that lib only via the global exposed object of the lib, which in this case is also named Bokeh and which is the only hook which is necessary to embed a chart.

// this is the global hook to the bokehjs lib (without types)
declare var Bokeh: any;

This magic works only as expected if you plug in the usual java script into the topmost html file of the angular app index.html

<head>
 ...
  <link
    href="https://cdn.bokeh.org/bokeh/release/bokeh-1.0.4.min.css"
    rel="stylesheet" type="text/css">
  <script src="https://cdn.bokeh.org/bokeh/release/bokeh-1.0.4.min.js"></script>
 </head>

The BokehService provides the data for the chart via a MessageService which encapsulates the connection to the backend such that one only needs to send a proper message by the exposed method sendMsg(msg: Message). 

export class BokehService extends Connector {
constructor(private msgService: MessageService) {
 super('BokehService');
 this.msgService.register(this);
 }
…
public getChart(id: string) {
 const msg = {
 name: 'addChart',
 args: [id],
 action: 'default'
 };
 this.msgService.sendMsg(msg);
 }

This service also exposes a method to the backend, that actually plots the chart into the native DOM-element, where we have to delete first the previous plots

public plot(msg: Message) {
      const id = msg.args.id;
      const el = document.getElementById(id);
      // first remove the previous charts as child
      // this is necessary, since bokeh do not let us update a chart
      while (el.hasChildNodes()) {
            el.removeChild(el.lastChild);
      }
      // be sure to include the correct dom-id as second argument
      Bokeh.embed.embed_item(msg.args.item, id);
    }

The back-end service in our example is written in python. As i said, we use aiohttp as an async solution for the web server. Right after starting the angular app in the browser, the angular WebsocketService connects immediately to the python backend on server side. Remember that in production you would implement more security on that point, like an authentication. The backend is ready to receive events from angular, like e.g. give me the data for the Bokeh chart. The addChart, which is called by the message from angular, sends the chartItem as a json item that connects to the websocket service

async def addChart(self, id_, user):
    """
    Example for adding a bokeh chart from backend

    """
    chartItem = self.chartProvider.chartExample()
    print("try to add chart for dom-id %s" % id_)
    context = {"name": "BokehService",
               "args": {"item": chartItem, "id": id_},
               "action": "plot"}
    await self.send_event(json.dumps(context), user=user)

The interesting part here is the send_event method which in fact is based on our implementation of the websocket server. As already mentioned, that part may differ in your individual implementation. The minimal example for the chart, also written as a member function of ChartProvider class, looks very simple and just produces the data for a plain sin-plot in Bokeh

import time
import numpy as np
from bokeh.plotting import figure
from bokeh.embed import json_item

class ChartProvider():
    def chartExample(self):
        t0 = time.time()
        # prepare some data
        self.phi += 0.02
        x = np.arange(0., 10., 0.1)
        y = np.sin(x + self.phi)
        # create a new plot
        p = figure()
        p.line(x, y, legend="SIN")
        chart_item = json_item(p)
        print(time.time()-t0)
        return chart_item
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)