Embed Bokeh with Django model

Question

I have python program in one development environment to stream data and save Bokeh div and script components to a file on a database. The webserver in a different environment serves the div and script components from the database as the webpage is requested. Viewing the html page source (shown below) seems to display the whole Bokeh package correctly with no visual errors but there is no graph. Please advise.

As a side note, I tried how to embed standalone bokeh graphs into django templates, (rendering a graph in the views.py at each page request), but this also failed in my web framework:

models.py:

from django.db import models


class Item(models.Model):
    name = models.CharField(max_length=32)
    description = models.TextField()
    image = models.ImageField(blank=True, null=True)
    script_com = models.FileField(blank=True, null=True)
    div_com = models.FileField(blank=True, null=True)

    def __str__(self):
        return self.name

    def get_image(self):
        return self.image

    def display_script_com(self):
        with open(self.script_com.path) as f:
            return f.read()

    def display_div_com(self):
        with open(self.div_com.path) as f:
            return f.read()

views.py:

from django.shortcuts import render
from sentiment_analysis.models import Item


def index(request):
    return render(request,'sentiment_analysis/index.html', {
        'itemContext':Item.objects.get(id=1)
    })

def get_update(request):
    return render(request,'sentiment_analysis/index.html', {
        'itemContext':Item.objects.get(id=1)
    })

index.html:

{% extends 'sentiment_analysis/layout.html' %}
{% block content %}
<style>
    .imgbox {
     display: grid;
     height: 100%;
    }
    .center-fit {
     max-width: 100%;
     max-height: 100vh;
     display: block;
     margin-left: auto;
     margin-right: auto;
    }
</style>
<div >
    <div >
        <link href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.13.min.css" rel="stylesheet" type="text/css">
        <link href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.13.min.css" rel="stylesheet" type="text/css">
        <link href="https://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.13.min.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.13.min.js"></script>
        <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.13.min.js"></script>
        <script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.13.min.js"></script>

        {{ itemContext.display_script_com | safe }}
        {{ itemContext.display_div_com | safe }}
    </div>
    <div class="imgbox">
        <form method="GET">
            {% csrf_token %}
            <img class="center-fit" src="{{ itemContext.image.url }}"/>
            <br>
            <button class="center-fit" type="submit">Update</button>
        </form>
    </div>
</div>
{% endblock %}

webpage source:

<style>

    .imgbox {
     display: grid;
     height: 100%;
    }
    .center-fit {
     max-width: 100%;
     max-height: 100vh;
     display: block;
     margin-left: auto;
     margin-right: auto;
    }
    </style>

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

<div class="bk-root" id="6da85ec8-092d-4c5e-b9c7-1538d41b81c3"></div>

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

          var docs_json = '{"14425cbe-28a8-4871-a77c-33e2fca75f34":{"roots":{"references":[{"attributes":{"num_minor_ticks":5,"tickers":[{"id":"d1139925-c510-47f9-8392-0ec23fe9247d","type":"AdaptiveTicker"},{"id":"b5c24cb3-96cf-4ea7-9b8c-49f1b4e0c9eb","type":"AdaptiveTicker"},{"id":"0581aaf3-856b-452a-9b84-d15c368ba8e5","type":"AdaptiveTicker"},{"id":"bf181bd2-afd7-41f8-be3a-865cca89fedd","type":"DaysTicker"},{"id":"f5e971a5-def0-49e1-9875-b00ea35ea798","type":"DaysTicker"},{"id":"8cd2a919-ace7-4f27-b0c4-27c7f0ec893e","type":"DaysTicker"},{"id":"33db587a-ce1d-4599-9369-dae8a5422e8d","type":"DaysTicker"},{"id":"e3229ee7-1025-4834-92d5-5e6676d42a0e","type":"MonthsTicker"},{"id":"a4061de2-0776-47c9-a361-155db590004f","type":"MonthsTicker"},{"id":"0e364e1a-0ab7-4360-8101-9eab0655d8ef","type":"MonthsTicker"},{"id":"3bb4982d-d2f4-4044-aa84-0d5178c09bd7","type":"MonthsTicker"},{"id":"5aa460e3-0757-47d9-a726-e36714fc2dfd","type":"YearsTicker"}]},"id":"24f8e500-d2ec-48ed-a907-aae68786cc74","type":"DatetimeTicker"},{"attributes":{"base":24,"mantissas":[1,2,4,6,8,12],"max_interval":43200000.0,"min_interval":3600000.0,"num_minor_ticks":0},"id":"0581aaf3-856b-452a-9b84-d15c368ba8e5","type":"AdaptiveTicker"},{"attributes":{"plot":null,"text":"Tesla Sentiment"},"id":"60f08c84-3e82-474c-9a51-f6caace198ee","type":"Title"},{"attributes":{"days":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]},"id":"bf181bd2-afd7-41f8-be3a-865cca89fedd","type":"DaysTicker"},{"attributes":{"days":[1,4,7,10,13,16,19,22,25,28]},"id":"f5e971a5-def0-49e1-9875-b00ea35ea798","type":"DaysTicker"},{"attributes":{"data_source":{"id":"4f193c61-9048-4bc5-9676-3fa377a78447","type":"ColumnDataSource"},"glyph":{"id":"d8c69f3e-6a5b-4a08-ad99-2a722cf5af8a","type":"Line"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"932d1e42-906a-4610-b438-628508cc1444","type":"Line"},"selection_glyph":null,"view":{"id":"c7b79ec5-570a-4ce6-91ba-b147c862a2f4","type":"CDSView"}},"id":"41e9f145-71ae-4fde-8687-57b321acc152","type":"GlyphRenderer"},{"attributes":{"days":[1,8,15,22]},"id":"8cd2a919-ace7-4f27-b0c4-27c7f0ec893e","type":"DaysTicker"},{"attributes":{},"id":"e58b906b-6b19-4c9f-b6f2-7b924db2b052","type":"LinearScale"},{"attributes":{"days":[1,15]},"id":"33db587a-ce1d-4599-9369-dae8a5422e8d","type":"DaysTicker"},{"attributes":{"months":[0,1,2,3,4,5,6,7,8,9,10,11]},"id":"e3229ee7-1025-4834-92d5-5e6676d42a0e","type":"MonthsTicker"},{"attributes":{"callback":null},"id":"f6ec3037-a0ae-45c2-9db9-04e70b5fea42","type":"DataRange1d"},{"attributes":{"months":[0,2,4,6,8,10]},"id":"a4061de2-0776-47c9-a361-155db590004f","type":"MonthsTicker"},{"attributes":{"formatter":{"id":"592321ce-036c-4268-96cf-cc0eeb9b8e94","type":"DatetimeTickFormatter"},"plot":{"id":"b286cd09-f230-4bc1-96ea-14f0bad8d641","subtype":"Figure","type":"Plot"},"ticker":{"id":"24f8e500-d2ec-48ed-a907-aae68786cc74","type":"DatetimeTicker"}},"id":"78b4ed5d-f84f-4539-abe8-5fb216e967c9","type":"DatetimeAxis"},{"attributes":{"months":[0,4,8]},"id":"0e364e1a-0ab7-4360-8101-9eab0655d8ef","type":"MonthsTicker"},{"attributes":{"months":[0,6]},"id":"3bb4982d-d2f4-4044-aa84-0d5178c09bd7","type":"MonthsTicker"},{"attributes":{"grid_line_alpha":{"value":0.5},"plot":{"id":"b286cd09-f230-4bc1-96ea-14f0bad8d641","subtype":"Figure","type":"Plot"},"ticker":{"id":"24f8e500-d2ec-48ed-a907-aae68786cc74","type":"DatetimeTicker"}},"id":"92e07aef-c11b-4429-af2c-5b4d869a237e","type":"Grid"},{"attributes":{},"id":"5aa460e3-0757-47d9-a726-e36714fc2dfd","type":"YearsTicker"},{"attributes":{"formatter":{"id":"cda7f473-f438-4368-8822-7187c7a623f6","type":"BasicTickFormatter"},"plot":{"id":"b286cd09-f230-4bc1-96ea-14f0bad8d641","subtype":"Figure","type":"Plot"},"ticker":{"id":"1a2a6a14-3e98-4b9f-abea-e5d341bcc4f9","type":"BasicTicker"}},"id":"69f60ed4-25cc-4dc3-b981-73900ca62545","type":"LinearAxis"},{"attributes":{},"id":"da5675dd-3f98-4bcf-b06a-d9c03b6e07c0","type":"Selection"},{"attributes":{},"id":"1a2a6a14-3e98-4b9f-abea-e5d341bcc4f9","type":"BasicTicker"},{"attributes":{"below":[{"id":"78b4ed5d-f84f-4539-abe8-5fb216e967c9","type":"DatetimeAxis"}],"left":[{"id":"69f60ed4-25cc-4dc3-b981-73900ca62545","type":"LinearAxis"}],"renderers":[{"id":"78b4ed5d-f84f-4539-abe8-5fb216e967c9","type":"DatetimeAxis"},{"id":"92e07aef-c11b-4429-af2c-5b4d869a237e","type":"Grid"},{"id":"69f60ed4-25cc-4dc3-b981-73900ca62545","type":"LinearAxis"},{"id":"d15e0336-d3d4-4539-baa4-93ece82de190","type":"Grid"},{"id":"6f6e76f9-dbb4-41bd-9388-093d272d3322","type":"BoxAnnotation"},{"id":"41e9f145-71ae-4fde-8687-57b321acc152","type":"GlyphRenderer"}],"title":{"id":"60f08c84-3e82-474c-9a51-f6caace198ee","type":"Title"},"toolbar":{"id":"d965ea4f-c4f1-481d-8e8e-afa04f78e87d","type":"Toolbar"},"x_range":{"id":"c3671359-429d-4c48-a39c-d3c6c2432696","type":"DataRange1d"},"x_scale":{"id":"979e8806-ddf2-4279-b387-2be8ba9d2fe3","type":"LinearScale"},"y_range":{"id":"f6ec3037-a0ae-45c2-9db9-04e70b5fea42","type":"DataRange1d"},"y_scale":{"id":"e58b906b-6b19-4c9f-b6f2-7b924db2b052","type":"LinearScale"}},"id":"b286cd09-f230-4bc1-96ea-14f0bad8d641","subtype":"Figure","type":"Plot"},{"attributes":{},"id":"72877d0c-6eec-43a6-9f1b-b6415e6a27ef","type":"UnionRenderers"},{"attributes":{"dimension":1,"grid_line_alpha":{"value":0.5},"plot":{"id":"b286cd09-f230-4bc1-96ea-14f0bad8d641","subtype":"Figure","type":"Plot"},"ticker":{"id":"1a2a6a14-3e98-4b9f-abea-e5d341bcc4f9","type":"BasicTicker"}},"id":"d15e0336-d3d4-4539-baa4-93ece82de190","type":"Grid"},{"attributes":{},"id":"1e2192bb-2083-4791-9792-fff4e518705a","type":"PanTool"},{"attributes":{"callback":null},"id":"c3671359-429d-4c48-a39c-d3c6c2432696","type":"DataRange1d"},{"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":"6f6e76f9-dbb4-41bd-9388-093d272d3322","type":"BoxAnnotation"},{"attributes":{"line_color":"#1f77b4","x":{"field":"Date"},"y":{"field":"Total_Sentiment"}},"id":"d8c69f3e-6a5b-4a08-ad99-2a722cf5af8a","type":"Line"},{"attributes":{},"id":"922717fe-cc98-4968-9c20-f53a58346487","type":"WheelZoomTool"},{"attributes":{"overlay":{"id":"6f6e76f9-dbb4-41bd-9388-093d272d3322","type":"BoxAnnotation"}},"id":"d6a4d04c-d444-4461-928b-23ca87255a1b","type":"BoxZoomTool"},{"attributes":{},"id":"282f47fa-8eec-4966-a6e9-19889be9c972","type":"ResetTool"},{"attributes":{},"id":"b8246d69-e232-412f-982f-32470ad85984","type":"SaveTool"},{"attributes":{"line_alpha":0.1,"line_color":"#1f77b4","x":{"field":"Date"},"y":{"field":"Total_Sentiment"}},"id":"932d1e42-906a-4610-b438-628508cc1444","type":"Line"},{"attributes":{"source":{"id":"4f193c61-9048-4bc5-9676-3fa377a78447","type":"ColumnDataSource"}},"id":"c7b79ec5-570a-4ce6-91ba-b147c862a2f4","type":"CDSView"},{"attributes":{},"id":"979e8806-ddf2-4279-b387-2be8ba9d2fe3","type":"LinearScale"},{"attributes":{"callback":null,"data":{"Date":{"__ndarray__":"AIBDz4ZXdkIAAP/Phld2QgCAN9GGV3ZCAABw0oZXdkIAAO3Shld2QgCAGdaGV3ZCAABS14ZXdkIAAFLXhld2QgAAUteGV3ZCAABG2YZXdkIAADrbhld2QgAAOtuGV3ZCAAC324ZXdkI=","dtype":"float64","shape":[13]},"Sentiment":{"__ndarray__":"AAAAAAAAAAAAAAAAAADgP5qZmZmZmbk/AAAAAAAAoD8AAAAAAACgPwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABMqOLwgItI/AAAAAAAAAAA=","dtype":"float64","shape":[13]},"Total_Sentiment":{"__ndarray__":"AAAAAAAAAAAAAAAAAADwPwAAAAAAAABAAAAAAAAACEAAAAAAAAAQQAAAAAAAABBAAAAAAAAAEEAAAAAAAAAQQAAAAAAAABBAAAAAAAAAEEAAAAAAAAAQQAAAAAAAABRAAAAAAAAAFEA=","dtype":"float64","shape":[13]},"Tweet_Id":[1,2,3,4,5,6,7,8,9,10,11,12,13],"index":[0,1,2,3,4,5,6,7,8,9,10,11,12]},"selected":{"id":"da5675dd-3f98-4bcf-b06a-d9c03b6e07c0","type":"Selection"},"selection_policy":{"id":"72877d0c-6eec-43a6-9f1b-b6415e6a27ef","type":"UnionRenderers"}},"id":"4f193c61-9048-4bc5-9676-3fa377a78447","type":"ColumnDataSource"},{"attributes":{},"id":"cda7f473-f438-4368-8822-7187c7a623f6","type":"BasicTickFormatter"},{"attributes":{},"id":"592321ce-036c-4268-96cf-cc0eeb9b8e94","type":"DatetimeTickFormatter"},{"attributes":{"callback":null,"formatters":{"Date":"datetime"},"mode":"vline","renderers":"auto","tooltips":[["Space-Time","@Date{%F}"],["Tweet Sentiment","@Sentiment"],["Cummulative Sentiment","@Total_Sentiment"]]},"id":"90aa17a6-9714-482b-bcdf-c8f08855e56b","type":"HoverTool"},{"attributes":{"mantissas":[1,2,5],"max_interval":500.0,"num_minor_ticks":0},"id":"d1139925-c510-47f9-8392-0ec23fe9247d","type":"AdaptiveTicker"},{"attributes":{"active_drag":"auto","active_inspect":"auto","active_multi":null,"active_scroll":"auto","active_tap":"auto","tools":[{"id":"1e2192bb-2083-4791-9792-fff4e518705a","type":"PanTool"},{"id":"922717fe-cc98-4968-9c20-f53a58346487","type":"WheelZoomTool"},{"id":"d6a4d04c-d444-4461-928b-23ca87255a1b","type":"BoxZoomTool"},{"id":"282f47fa-8eec-4966-a6e9-19889be9c972","type":"ResetTool"},{"id":"b8246d69-e232-412f-982f-32470ad85984","type":"SaveTool"},{"id":"90aa17a6-9714-482b-bcdf-c8f08855e56b","type":"HoverTool"}]},"id":"d965ea4f-c4f1-481d-8e8e-afa04f78e87d","type":"Toolbar"},{"attributes":{"base":60,"mantissas":[1,2,5,10,15,20,30],"max_interval":1800000.0,"min_interval":1000.0,"num_minor_ticks":0},"id":"b5c24cb3-96cf-4ea7-9b8c-49f1b4e0c9eb","type":"AdaptiveTicker"}],"root_ids":["b286cd09-f230-4bc1-96ea-14f0bad8d641"]},"title":"Bokeh Application","version":"0.13.0"}}';
      var render_items = [{"docid":"14425cbe-28a8-4871-a77c-33e2fca75f34","roots":{"b286cd09-f230-4bc1-96ea-14f0bad8d641":"6da85ec8-092d-4c5e-b9c7-1538d41b81c3"}}];
      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>

</div>

<div class="imgbox">
    <form method="GET">
        <input type="hidden" name="csrfmiddlewaretoken" value="p7jvRxqYrbUe5ArEYxFb6oD0nvuUBDJNKETaaXkFkjtdrym5lxNua30rb4qHWhoR">
        <img class="center-fit" src="/media/graph.png"/>
        <br>
        <button class="center-fit" type="submit">Update</button>
    </form>
</div>

STATUS UPDATE: ERROR:

Answer 1

You are embedding the wrong version of BokehJS in your index.html. The version of BokehJS that you load from CDN must match the version of Python Bokeh library you are using. You are loading 0.12.13:

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

and, in particular, the Selection model did not exist in 0.12.13