Help with Bokeh shortcode

support
1

Apologies to go back to this old topic.
Is this shortcode for Bokeh still working? I’m having problems with my site.

Thank you!
-NC

2

What does this mean?

3

I either get nothing as output in the site or an error message.
I’m building my site on Netlify (Wowchemy theme).

Error: Error building site: “/opt/build/repo/content/graficos/index.md:81:1”: failed to render shortcode “bokeh”: failed to process shortcode: “/opt/build/repo/layouts/shortcodes/bokeh.html:11:33”: execute of template failed: template: shortcodes/bokeh.html:11:33: executing “shortcodes/bokeh.html” at <$item.RelPermalink>: nil pointer evaluating resource.Resource.RelPermalink

4

How are you calling the shortcode?

1 Like
5

jmooring,

First, thank you for taking the time to have a look at this.

I’m calling the shortcode “bokeh.html”.
I have limited coding skills, and I can’t make much sense of how this shortcode works.

{{ $item := $.Page.Resources.GetMatch (.Get 0)}}

<div id="{{ .Get 0 }}">

  <script charset="utf-8" type="text/javascript">

    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {

      if (this.readyState == 4 && this.status == 200) {

        var item = JSON.parse(this.responseText);

        Bokeh.embed.embed_item(item, "{{ .Get 0 }}");

      }

    };

    xmlhttp.open("GET", "{{ $item.RelPermalink }}", true);

    xmlhttp.send(); 

  </script>

</div>

I also added Bokeh’s “scripts” to the custom head

6

What does your markdown file look like?

7

Right now I’m just trying to have the graph show in the website.
Here:

{{% bokeh "PBI real.json" %}}

I tried different paths to the .json file. In some instances nothing happens (the site builds), in other instances I get the above error message.

This is my custom head:

<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.0.2.min.js" ></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.0.2.min.js" ></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.0.2.min.js" ></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.0.2.min.js" ></script>
8

Do you have a git repository for your project’s source code? If so, is it public? If so, can you share a link to it?

9

Here GitHub’s repository:

Path to the markdown file:

A number of .png files that work just fine. The shortcode is at the end of the file.

Shortcode in “layouts/shortcodes”

10

Change this:

{{% bokeh "PBI real.json" %}}

to this:

{{< bokeh "PBI real.json" >}}

Reload the page, and open the dev tools. You’ll see this error:

image
image1466×512 75.3 KB

So, to answer your original question, this shortcode and/or the associated scripts are not working.

11

And before you begin troubleshooting, rename your data file to eliminate the space and upper case. Something like pbi.json.

12

Thank you, this provides some new information.
I wish there were an easier way to make this work.

Hope you have a nice week.

-NC

13

OK, this works.

You can name your JSON file whatever you would like, including spaces and upper case characters, but I stand by my earlier recommendation—it is the right thing to do.

structure

content/
└── post
    └── test
        ├── index.md
        └── pbi_real.json

markdown

{{< bokeh "pbi_real.json" >}}

layouts/shortcodes/bokeh.html

{{- with .Get 0 -}}
  {{- $path := . -}}
  {{- $id :=  anchorize . -}}
  {{- with $.Page.Resources.GetMatch $path -}}
    {{- $json := .Content | safeJS -}}
    <div id="{{ $id }}">
      <script>
        var item = JSON.parse({{ $json }});
        Bokeh.embed.embed_item(item, {{ $id }});
      </script>
    </div>
  {{- else -}}
    {{- errorf "The %s shortcode was unable to find %s. See %s" $.Name $path $.Position -}}
  {{- end -}}
{{- else -}}
  {{- errorf "The %s shortcode requires a single positional parameter. See %s" $.Name $.Position -}}
{{- end -}}

And this should be in the <head> section of your page:

  <script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.3.0.min.js" crossorigin="anonymous"></script>
  <!-- <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.0.min.js" crossorigin="anonymous"></script> -->
  <!-- <script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.0.min.js" crossorigin="anonymous"></script> -->
  <!-- <script src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.3.0.min.js" crossorigin="anonymous"></script> -->

I’ve commented out the last three items because they are not needed for your chart, but you might need them for something in the future.

IMPORTANT

Open your JSON file and go to the very end. Notice the version, 2.3.0. The script(s) that you load in <head> need to match.

1 Like
14

Yes! Thank you so much!
I need to figure out to fix the size. The chart shows too wide and does not show up completely.

PS: I do appreciate the help/guidance in what is a new language and methods for me.

15

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.