What about integrating chartjs?

[postb99]

Hello,

On my website, I'll have these kinds of diagrams:

• pie chart
• histogram chart
• spider chart

I see that mermaid supports pie chart (by chance).

What about adding support to chartjs.org to your theme? is this complicated?

Would there be other libraries that would use markdown input like mermaid?

Just some open questions while doing preliminary searches for which library would suit my need for the three kinds of diagrams.

I might study how you integrated mermaid and could try to do the same for chartjs. But you're blazingly fast at coding new features for this nice theme :D

[McShelby]

As from my quick look chartjs misses a way to write charts in a descriptive way as Mermaid does. That's what it makes mighty on the one hand but difficult to use for the average user on the other hand.

So at the moment, I have no plans to integrate this or any other library relying on JSON or JS to define a graph.

If you want to imnplent it yourself there are four places to look:

• the shortcode implementation setting a marker in the store (as in layouts/partials/shortcode/mermaid.html)
• the layouts/partials/page-meta.hugo that forcefully sets the marker if no shortcode was used but the user required it (as in exampleSite/content/basics/geneartor - this is required to be in this file and not the footer because of the last bullet point when printing whole chapters
• the footer to load the required JS libraries if the marker was set (in layouts/partials/footer.hmtl)
• transfering the marker to the parent for printing whole chapters (in layouts/partials/nested-article.hugo)

As you can see, it's quite littered over the templates. A situation I am not very happy of, myself.

[McShelby]

@postb99 #682 is for you!

[postb99]

Well, I followed your documentation but get errors so I forked my private repo for you to help me understand what's missing in your doc or in my head 😁 Thank you very much for your help.

This commits aims at adding chartjs:
https://github.com/postb99/poesieland/commit/f8d74b537d8facac4cf3247ce3ed6e58340bb623

Hugo server error:
assemble: "XXXX\content\fr\graphs\index.md:1:1": unmarshal failed: invalid character '{' looking for beginning of object key string
XXXX\content\fr\graphs\index.md:1:1:
{{< chartjs id="test" width="80%" jsFile="sample.js" >}}

NB: "XXXX" is the beginning of my file path on local disk.

[McShelby]

I've added comments to your changeset.

[McShelby]

I've pushed a changeset to your repo's branch and fixed the theme docs. My fault. Sorry.

[postb99]

Glad and will see this later today after work. Don't be sad, when I write doc I must follow it to proofread it and validate.

[McShelby]

I am happy someone does read the docs! That's the way to poke out all the errors. Thanks for this!

[McShelby]

I've closed this as the fallout was done in #682 and the rest is part on your site.

Nevertheless, don't hesitate if you need further help.

[postb99]

Well, still trying to troubleshoot what expects json and gets something else when I start hugo. Then I just found this, looking at this code may help me https://github.com/shen-yu/hugo-chart

Sorry for loosing your link about auto-closing shortcode tag but this didn't help.

And will have a look tomorrow at https://shashanksrivastava.gitlab.io/post/2019-06-14-use-chartjs-hugo-site/ despite its age because code seems close to yours.

[postb99]

Tonight I play with https://github.com/McShelby/hugo-testing that will the perfect place to play with a feature branch. Cheers

[McShelby]

At the moment there is not much to see. This repo is intended for making minimal working examples for certain issues related to Hugo and / or the theme.

This is inspired by https://github.com/jmooring/hugo-testing

[postb99]

@McShelby I invited you again to my private repo, that's the easiest way. I did some minor progress but would love to get some help, please can you read my last comment here when you have some time, the error message seems clear.

https://github.com/postb99/poesieland/issues/10 (branch is feature/1.1).

[postb99]

@McShelby since you helped me and I am so glad I have a working ChartJs on my website, are you interested by a documentation page I would submit you and that would talk about a step-by-step guide to add ChartJs? This page would be linked at the bottom of this documentation section: https://mcshelby.github.io/hugo-theme-relearn/basics/customization/index.html#own-shortcodes-with-javascript-dependencies

Because the main caveat was to find out to use the UMD loader rather than ES6 version and this would be nice to be documented. I had the same issue once in another project when using a plain JS lib into a project.

Going again to https://cdnjs.com/libraries/Chart.js I indeed see a classic and an UMD version.

[McShelby]

I am hesitant for two reasons:

1. Linking to external sources from the official documentation makes me somewhat responsible to not link to malicious sites. As the internet is a short lived medium, I feel obligated to periodically check if those links are still valid. If not automated, that's something I will easily forget about in 2 weeks.
2. I guess the theme has enough examples with openapi, mermaid and mathjax. The problem here was quite specific to the integration of Chart.js. Other libraries may have different issues, but I am not willing to add a link to everyone of them.

I still may make an exception here as:

1. I enjoy your contributions and dedication for this theme
2. If we could make the ES6 verion of Chart.js work. This could be of broader value for others, too.

[postb99]

Hello, my first Chart.js based chart is online 🌟 maybe my site could be added to the sites using this theme showcase because it's very nice to promote your Hugo theme.

Here is the link to my first chart:
http:https://poesieland.free.fr/charts/poems_length/index.html

Still thinking of making the ES6 version of Chart.js work, let me log an issue for myself ;)

[McShelby]

maybe my site could be added to the sites using this theme showcase

That's what I was thinking, too. Besides links to official Hugo documentation, this is the only place where I currently link to other sites. I am thinking about to upgrade the showcase page with some pointers describing what makes each page special.

[McShelby]

Before adding this to the showcase, are you planning on custumizing the visuals (eg. color variant) or is this final?

[postb99]

I just customized the logo and menu width, everything else pleases me in green theme used so this is the final look and feel. I also like neon theme when developing so that I have both local and remote sites open 😋