Bokeh and Django are not compatible when it comes to owning models, as there can only be one document owner for each model

I've been working on creating some bokeh plots using Python Bokeh and Django. My goal is to display these bokeh plots in a row, but I encountered an issue at the following line:

script, div = components(row(sample_plot, variant_plot, sizing_mode='scale_width'))

in the code snippet below. Interestingly, when I try to render a single plot generated with this method, it works perfectly fine. The error message that I received is as follows:

I'm quite perplexed by why this problem arises only when I try to put my plots in a row.

ERROR (exception.py:118; 04-11-2021 16:56:58): Internal Server Error: /
Traceback (most recent call last):
   ...

Views (with example function to generate a plot)

def create_variant_barchart():
    """ Create a sample tracking barchart for all sites.
        args: None
        returns: plot
    """

    # Function implementation

class DashoardView(View):

    def get(self, request, *args, **kwargs):

        sample_plot = create_barchart_all_sites()
        variant_plot = create_variant_barchart()

        script, div = components(row(sample_plot, variant_plot, sizing_mode='scale_width'))

        self.context['script'] = script
        self.context['div'] = div

        return render(request, self.template, self.context)

Template

<div class="row">
  <div class="col mb-3">
      <div id='outstanding_samples' class='card'>
        <div class="card-header bg-light">
          <h6><b>HODB Overview</b></h6>
        </div>

        <div class='container-fluid card-body'>
            {{div|safe}}
            {{script|safe}}
        </div>

    </div>
  </div>
</div>

Answer №1

For the functions below, I decided to alter the variable names because they were both saving their plots as 'p'. It seems that Bokeh doesn't appreciate having them named the same!

    new_sample_plot = generate_all_sites_barchart()
    updated_variant_plot = create_variant_barchart()

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Firefox not responding to mouse movements

I am experimenting with creating an "animation" using JavaScript's "mousemove" Check it out here This is the code I am currently using $("body").mousemove(function(e){ var wWidth = $("body").width()/2 var wHeight = $("body").height()/2 var posX; v ...

JavaScript: employing a for loop as a variable declaration

Recently, I've been delving into JavaScript and exploring the functionality of the 'for' statement. However, I have a question that's been on my mind. I've managed to use the 'for' statement to produce output, like this: ...

What is the most effective method to retrieve the current browser URL in Angular 2 with TypeScript?

Is there a way for me to retrieve the current URL from the browser within my Angular 2 application? Usually in JavaScript, we would use the window object for this task. Can anyone guide me on how to achieve this in Angular 2 using TypeScript? Appreciate a ...

Turn off drag and drop functionality and activate selection in HTML

Recently, I encountered a strange issue where selected text became draggable and droppable onto other text, causing it to concatenate. To resolve this problem, I added the following code: ondragstart="return false" onmousedown="return false" However, thi ...

What are the steps for incorporating a YouTube playlist into a website?

I'm in the process of creating a website and I'd like to incorporate a YouTube video playlist that looks similar to this example - http://www.youtube.com/user/icicibank/home. I plan to use HTML5, JavaScript, and the YouTube API. Can you provide g ...

I am encountering difficulties with importing Node modules into my Vue.js project

Having some trouble importing a node module via NPM in a Vue.js single file component. No matter which module I try to install, it always throws an error saying These dependencies were not found. I'm following the installation instructions correctly ( ...

Creating a vertical bar chart in D3 with a JSON data source embedded within the code

Struggling to generate a stacked bar graph in D3.js. The axes are displaying correctly, but the data on the graph is not showing up. Any suggestions on what could be causing this issue? JS: var svg = d3.select("#recovery__table"), margin = {top: 20, ...

I have successfully implemented the Context API in my Next.js project and everything is functioning smoothly. However, I encountered an error while using TypeScript

Currently, I am working on a Next.js project that involves using the Context API. The data fetched from the Context API works perfectly fine, but I am encountering errors with TypeScript and I'm not sure how to resolve them. Error: Property openDialo ...

Creating links within a single image in HTML?

Is there a way to hyperlink different parts of a single image to various webpages using JavaScript coordinates or any other method? ...

How do I prevent a specific word from being removed in a contenteditable div using JavaScript?

Attempting to create a terminal-like experience in JS, I am looking to generate the word 'current source, current location' (e.g., admin@ubuntuTLS~$: ~/Desktop) at the beginning which cannot be removed. Also, I want to prevent the caret from bein ...

Error: Attempting to access 'title' property of undefined object leads to Uncaught TypeError

I am attempting to extract content from a Google Blogger Feed that can be found at this link. I am using JavaScript code from here. When inspecting the elements, I encountered a specific red warning message: Uncaught TypeError: Cannot read property ' ...

Utilize JavaScript or jQuery to segment HTML elements

Looking for a front-end solution to a common practice. In the past, I've stored reusable HTML elements (such as <nav>, <header>, <footer>, etc.) in a functions.php file and used PHP functions to include them on multiple pages. This ...

Leveraging the ReactJS Hook useState for detecting Key press events

As I am in the process of constructing a piano, I want it to showcase certain CSS styles when the user "presses" specific keyboard buttons (via keydown event) - even enabling the simultaneous clicking of multiple different buttons. Once the user releases t ...

The Art of Checkbox Design

Seeking help in replacing the default check mark on a checkbox with an image. Here is the code snippet I am currently using: <html> <head> <style> .bl { background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), c ...

Using Vue.js to inject plain text into a Vue component from HTML

I am currently in the process of transitioning code from ASPX to VUE.JS. In the previous system, there was a feature that allowed plain text to be injected into HTML (such as messages with text, images, links, and inputs). However, in VUE, the injected HT ...

Conditional Summation in Django ORM: Utilizing the SumIf Function

In my database, I have a Publisher model and a Book model. Currently, I am retrieving publishers using the following query: Publisher.objects.filter(name="A").annotate(total_pages=Sum('books__num_pages')) However, I am specifically interested ...

Instance of a Django template tag

Having trouble formulating the question, so I'll get straight to the point. I created the following template tag: def do_simple_tag(parser, token): try: tag_name, name = token.split_contents() except ValueError: raise template ...

The dimensions of the sprites within Three.js geometry

I am interested in creating an animation of sprites moving along a figure, particularly sprites that walk along the figure. An example of what I envision can be seen here: http://armsglobe.chromeexperiments.com/ I found some helpful information related t ...

Node.js client-sessions malfunction when not utilized as a primary callback

When utilizing express.Router, I'm attempting to create a middleware for a particular router in my application that will establish and handle a session. However, this approach fails if the client-sessions session is not invoked directly by Router().us ...

Ways to create a fixed button positioned statically at the bottom of a page

Currently, I am utilizing tailwind CSS to create a webpage with Next and Back buttons for navigation. However, an issue arises when there is minimal content on the page as the button adheres to the top. For visual reference, please view the image linked be ...