Plotly figures not getting displayed

[mojomaayan]

I used the instructions in this site to add plotly figures to my hugo markdown page. The repo is here. I have referenced the cdn:

<script src="https://cdn.plot.ly/plotly-2.11.1.min.js"></script>

and the code to display the figure is as follows.

<div id="/images/coolplot1.json" class="plotly" style="height:400px"></div>
<script>
Plotly.d3.json("/images/coolplot1.json", function(err, fig) {
    Plotly.plot('\/images\/coolplot1.json', fig.data, fig.layout, {responsive: true});
});
</script>

Yet only empty space is displayed and no figure can be seen both in my local and the netlify upload. Is it possible that some hugo config is blocking the display?

[jmooring]

You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

[mojomaayan]

@jmooring done thanks for the suggestion

[jmooring]

The article you referenced is no longer valid. The Plotly.d3 object was dropped in v2.0.

There are many ways to include a Plotly graph on a page. Your implementation will depend on:

• How the graph is defined
  • JavaScript?
  • Serialized data (JSON, YAML, TOML)?
• Where the graph definition is located
  • On the content page, between opening and closing shortcode tags?
  • As separate files?
    • Page resources?
    • Global resources (local or remote)?
    • In the static directory?
  • As objects in the data directory?

Give this a try. The graphs are defined with JSON files located in the data directory.

git clone --single-branch -b hugo-forum-topic-38221 https://github.com/jmooring/hugo-testing hugo-forum-topic-38221
cd hugo-forum-topic-38221
hugo server

[mojomaayan]

@jmooring That works well! Thanks so much for your effort!