Incorporating Javascript into a Django template: best practices

Question

Incorporating Javascript into a Django template: best practices

Using Django templates, I am interested in embedding a Bokeh plot by using Json output.

The Json output is already prepared for querying the database. The plot needs to be displayed in a div with a specific ID.

According to the documentation, the following code function should be used to utilize the Json output in the template:

item = JSON.parse(item_text);
Bokeh.embed.embed_item(item);

I need guidance on the correct syntax for implementing this in the template:

<div id="title"></div>

<script>
function(response) { return item = JSON.parse( {{plot_json}} ); }
function(item) { Bokeh.embed.embed_item(item); }
</script>

View file:

def home(request):
    plot_json = Price_Charts.objects.using('llweb').values('timeframe_1h').filter(symbol_pair='ETH')
    context = {
    'plot_json': plot_json
    }
    return render(request, "home.html", context)

javascript django bokeh

Answer 1

Answer №1

While my knowledge of Bokeh is limited, I do know that it's important to make sure the JSON object is interpreted correctly in a Django template as JavaScript and not auto-escaped. One way to achieve this is by trying out disabling autoescaping in combination with using the Bokeh 'then' syntax.

<div id="title"></div>

<script>        
fetch('/plot') 
    .then(function(response) { 
         {% autoescape off %}
             return item = JSON.parse( {{plot_json}} ); 
        {% autoescape on %}
    })
    .then(function(item) { Bokeh.embed.embed_item(item); })
</script>

Answer 2

While my knowledge of Bokeh is limited, I do know that it's important to make sure the JSON object is interpreted correctly in a Django template as JavaScript and not auto-escaped. One way to achieve this is by trying out disabling autoescaping in combination with using the Bokeh 'then' syntax.

<div id="title"></div>

<script>        
fetch('/plot') 
    .then(function(response) { 
         {% autoescape off %}
             return item = JSON.parse( {{plot_json}} ); 
        {% autoescape on %}
    })
    .then(function(item) { Bokeh.embed.embed_item(item); })
</script>

Answer 3

Answer №2

If you're looking for a simplified jinja2 example that works with Bokeh v1.0.4, give this code snippet a try:

python myapp.py

Here's how your file and directory structure should look like:

myapp
   |
   +---myapp.py
   +---templates
        +---index.html

In your myapp.py file:

import io
import json
import jinja2
import numpy as np
from bokeh.plotting import figure, curdoc
from bokeh.embed import json_item
from bokeh.resources import CDN

plot = figure()
plot.line(np.arange(10), np.random.random(10))
curdoc().add_root(plot)

renderer = jinja2.Environment(loader = jinja2.FileSystemLoader(['templates']), trim_blocks = True)
html = renderer.get_template('index.html').render(resources = CDN.render(), item_json_object = json.dumps(json_item(plot)))

filename = 'json_items.html'
with io.open(filename, mode = 'w', encoding = 'utf-8') as f:
    f.write(html)

Your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{{ resources }}
</head>
<body>
<div id="myplot"></div>
<script>
    Bokeh.embed.embed_item({{ item_json_object }}, "myplot");
</script>
</body>
</html>

When using json.dumps(json_item(plot) in the template, be aware that it's already a JSON object, so no need to use JSON.parse() on it. Ensure you pass a string object if needed.

You can find more details in the Bokeh documentation, which includes an example showcasing dynamically loaded plot data through JS fetch() method at page loading time compared to attaching plot data during template rendering.

Answer 4

If you're looking for a simplified jinja2 example that works with Bokeh v1.0.4, give this code snippet a try:

python myapp.py

Here's how your file and directory structure should look like:

myapp
   |
   +---myapp.py
   +---templates
        +---index.html

In your myapp.py file:

import io
import json
import jinja2
import numpy as np
from bokeh.plotting import figure, curdoc
from bokeh.embed import json_item
from bokeh.resources import CDN

plot = figure()
plot.line(np.arange(10), np.random.random(10))
curdoc().add_root(plot)

renderer = jinja2.Environment(loader = jinja2.FileSystemLoader(['templates']), trim_blocks = True)
html = renderer.get_template('index.html').render(resources = CDN.render(), item_json_object = json.dumps(json_item(plot)))

filename = 'json_items.html'
with io.open(filename, mode = 'w', encoding = 'utf-8') as f:
    f.write(html)

Your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{{ resources }}
</head>
<body>
<div id="myplot"></div>
<script>
    Bokeh.embed.embed_item({{ item_json_object }}, "myplot");
</script>
</body>
</html>

When using json.dumps(json_item(plot) in the template, be aware that it's already a JSON object, so no need to use JSON.parse() on it. Ensure you pass a string object if needed.

You can find more details in the Bokeh documentation, which includes an example showcasing dynamically loaded plot data through JS fetch() method at page loading time compared to attaching plot data during template rendering.

Incorporating Javascript into a Django template: best practices

Answer №1

Answer №2

Similar questions

Is it recommended to keep static files in a dedicated S3 bucket while deploying using AWS Elastic Beanstalk?

Tips on populating the gap between dual cylinder meshes in Three.js

Activate ajax search in select2 by hand

Validating decimals in a text field with either JavaScript or jQuery

Which one should I use: ng-repeat or ng-options?

A quicker method for deleting an element from an array based on its index

Determine the absence of values in a randomly generated array and identify the quantity of missing values

Merge topics together in RxJS like zip

Creating a highly innovative server infrastructure tailored for Dojo applications with exceptional features

The Art of jQuery Data Processing

Exploration of features through leaflet interaction

extract information from the request header

Generating a dynamic form by utilizing a JavaScript JSON object

Is utilizing Eval on a div within a DataList ItemTemplate feasible for MouseOver event handling?

Vue: the parent template does not permit the use of v-for directives

To ensure that new tabs are opened directly within jQuery UI tabs, the tab should be created within the jQuery UI tabs interface

Check if an object is already in an array before pushing it in: JavaScript

Loading information in a directive by utilizing promises in a service with AngularJS

Need help setting up a time-based query in Laravel? Here's how to schedule it!

Vue 2 checkbox form array data