Similar to a question asked on here before about embedding a plotly graph into Hugo, I’ve run into a problem in getting the interactive graph to play after it’s embedded.
It’s a timelapse choropleth graph (plotly.express.choropleth) with plotly.express. Here is my stackoverflow question with the appropriate links since I can’t post more than 2 links on this post. I’ve transcribed the steps I used/outlined on SO here (could be helpful to anyone who needs a simpler instructional in the future):
Step 1 : Write your plotly graph into a json file using fig.write_json('<path/filename.json') . Make sure to place the json file in your <homefolder>/static folder in your Hugo template
Step 2 : Create both a load-plotly.html and plotly.html shortcode files with the code found in the SO link under <homefolder>/layouts/shortcodes . Make a folder if one doesn’t already exist.
Step 3 : Under <homefolder>/layouts create a partials folder. Within that create a head.html file and copy and paste the contents of what is found in the themes native head.html file found in <homefolder>/<theme name>/layouts/partials/head.html . Then at the bottom, add the corresponding code found in the SO link.
Step 3 : For whichever page needs the plotly graph, make sure to add plotly: true in the front matter (ie where the title, date, etc. goes at the top of a markdown file)
After finishing all these steps, I was able to see the graph on the rendering of my webpage ( hugo server , but unfortunately the graph isn’t ‘playable’. It just appears, and I can zoom in and out so it’s ‘interactive’, but the play button doesn’t result in progression of the data.
The JSON file of my data can be found in the original SO question (can’t add multiple links here). I’m new to Hugo and Plotly, but I’m wondering if it’s because the original graph is created with the plotly.express submodule and the Hugo embedding process above does not work for that.
Would love any help in figuring out where Hugo and plotly are not quite matching up for this graph.
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.
Everything is contained within index.html and the JSON file. Perhaps you can work with the Plotly community to get this single page example working, and then figure out how to do it Hugo.
*Oh nevermind, I understand the npm function. I’ll see if someone in the plotly forum can help diagnose this single page example. I’m new to git sharing etiquette, so I wanted to make sure it’s ok to share GitHub - jmooring/hugo-testing at hugo-forum-topic-32481 with them to do that.