# Help with Bokeh shortcode

**URL:** <https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070>\
**Category:** support\
**Created:** [March 30, 2021, 10:48pm UTC](https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070 "2021-03-30T22:48:46Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![ncachanosky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ncachanosky/32/13996_2.png) [@ncachanosky](https://discourse.gohugo.io/u/ncachanosky)\
**Post date:** [March 30, 2021, 10:48pm UTC](https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070/1 "2021-03-30T22:48:46Z")

</div>

Apologies to go back to this old topic.  
Is [this shortcode](https://discourse.gohugo.io/t/embed-html-file-in-page/16047/8) for Bokeh still working? I’m having problems with my site.

Thank you!  
-NC

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 30, 2021, 11:16pm UTC](https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070/2 "2021-03-30T23:16:00Z")

</div>

> [@ncachanosky](#):
>
> I’m having problems with my site.

What does this mean?

---

<div class="post-metadata">

**Author:** ![ncachanosky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ncachanosky/32/13996_2.png) [@ncachanosky](https://discourse.gohugo.io/u/ncachanosky)\
**Post date:** [March 30, 2021, 11:19pm UTC](https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070/3 "2021-03-30T23:19:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 30, 2021, 11:27pm UTC](https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070/4 "2021-03-30T23:27:20Z")

</div>

How are you calling the shortcode?

---

<div class="post-metadata">

**Author:** ![ncachanosky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ncachanosky/32/13996_2.png) [@ncachanosky](https://discourse.gohugo.io/u/ncachanosky)\
**Post date:** [March 30, 2021, 11:32pm UTC](https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070/5 "2021-03-30T23:32:33Z")

</div>

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.

```auto
{{ $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`

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 30, 2021, 11:38pm UTC](https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070/6 "2021-03-30T23:38:17Z")

</div>

What does your markdown file look like?

---

<div class="post-metadata">

**Author:** ![ncachanosky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ncachanosky/32/13996_2.png) [@ncachanosky](https://discourse.gohugo.io/u/ncachanosky)\
**Post date:** [March 30, 2021, 11:45pm UTC](https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070/7 "2021-03-30T23:45:05Z")

</div>

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

```auto
{{% 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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 30, 2021, 11:48pm UTC](https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070/8 "2021-03-30T23:48:42Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ncachanosky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ncachanosky/32/13996_2.png) [@ncachanosky](https://discourse.gohugo.io/u/ncachanosky)\
**Post date:** [March 30, 2021, 11:52pm UTC](https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070/9 "2021-03-30T23:52:32Z")

</div>

Here GitHub’s repository:

> **[ncachanosky/el-hub-economico](https://github.com/ncachanosky/el-hub-economico)**
>
> Contribute to ncachanosky/el-hub-economico development by creating an account on GitHub.

Path to the markdown file:

> <https://github.com/ncachanosky/el-hub-economico/blob/master/content/graficos/index.md>

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

Shortcode in “layouts/shortcodes”

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 31, 2021, 12:21am UTC](https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070/10 "2021-03-31T00:21:16Z")

</div>

Change this:

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

```

to this:

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

```

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

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/a/a370ea2482caaca2ea56a25eeeabe09c9821ba0d.png)

So, to answer your original question, [this shortcode](https://discourse.gohugo.io/t/embed-html-file-in-page/16047/8) and/or the associated scripts are not working.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 31, 2021, 12:24am UTC](https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070/11 "2021-03-31T00:24:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ncachanosky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ncachanosky/32/13996_2.png) [@ncachanosky](https://discourse.gohugo.io/u/ncachanosky)\
**Post date:** [March 31, 2021, 12:47am UTC](https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070/12 "2021-03-31T00:47:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 31, 2021, 3:07am UTC](https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070/13 "2021-03-31T03:07:34Z")

</div>

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

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

```

markdown

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

```

layouts/shortcodes/bokeh.html

```auto
{{- 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:

```html
  <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.

---

<div class="post-metadata">

**Author:** ![ncachanosky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ncachanosky/32/13996_2.png) [@ncachanosky](https://discourse.gohugo.io/u/ncachanosky)\
**Post date:** [March 31, 2021, 3:34am UTC](https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070/14 "2021-03-31T03:34:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [April 2, 2021, 3:35am UTC](https://discourse.gohugo.io/t/help-with-bokeh-shortcode/32070/15 "2021-04-02T03:35:13Z")

</div>

Closed on April 2, 2021, 3:35am UTC

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