Accessing hugo's template variable inside Javascript files?

support
10

Thanks a lot everybody. I got it to work.

Result is here, in case someone would reuse it:

Markdown : post.md

---
title: "Test charts.js"
---
{{% chart id="myChart2" width="1600" height="900" csvfile="data/data1.csv" graphtype="radar" %}}

Shortcode : chart.html

<!-- File as parameter -->
{{ if .Get "csvfile" }}
    {{ $csvURL := .Get "csvfile" }}
    {{ $csv := getCSV "," $csvURL }}

    <!-- Count CSV line number (-1 for labels) for generating 1 different color by DATA line -->
    {{ $.Scratch.Set "nbLines" -1 }}        <!-- First line = label not data -->
    {{ range $i, $v1 := $csv }}
        {{ $.Scratch.Add "nbLines" 1 }}     <!-- Count CSV line number -->
    {{ end }}

<div>
    <!-- Init the graphic for Chart.js-->
    <canvas id="{{ .Get "id"}}" width="{{ .Get "width" }}" height="{{ .Get "height" }}"></canvas>

        <script> /* INLINE script to work OK with Hugo variables & shortcode */

            /*  Original script from Chart.js */
            $(function(){

            var ctx = document.getElementById("{{ .Get "id" }}");
            var myChart = new Chart(ctx, {
                type: 'radar',
                data: {
                    {{ range $i, $v1 := $csv }}     /* loop lines from CSV files */

                        {{ if eq $i 0 }}            /* 1rst line = CSV Header = labels */
                        labels: [
                            {{ range $j, $v2 := . }}
                                {{ if ne $j 0 }}    /* line title (except useless 1rst) */
                                    {{ . }},
                                {{ end }}
                            {{ end }}
                            ],
                            datasets: [             /* will be filled with the next loop */
                        {{ end }}                   /* end test for 1rst line */

                        {{ if ne $i 0 }}            /* After 1rst line = regular data lines */
                            {                       /* We are in one of the data lines */
                            {{ range $j, $v2 := . }}
                                {{ if eq $j 0 }}    /* label line */
                                    label: {{ . }},
                                    data: [
                                {{ else }}          /* data from $j line */
                                    {{ . }},
                                {{ end }}
                            {{ end }}
                            ],

                            backgroundColor: [
                                'rgba(255, 209, 132, 0.2)',  /* TODO color index by http://linkbroker.hu/stuff/kolorwheel.js/ */
                                ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)', /* TODO color index by http://linkbroker.hu/stuff/kolorwheel.js/ */
                                ],
                            borderWidth: 1.4
                            },                  /* end of 1 dataset = 1 line */
                        {{ end }}               /* end test for regular line */

                    {{ end }}                   /* end loop CSV file */
                    ]                           /* close the datasets label */
                },

                options: {
                    scale: {
                        display: true
                    }
                }
            });
            })                                  /* End function for Chart.js */

        </script>

    <!-- Call the Chart routine -->
    <script src="../../js/Chart.min.js"></script>
    <!-- Online source : "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js" -->

</div>

{{ end }}

CSV sample

"Titre","Primes récurrentes","Assurance vie","Assurances Décennale","Assurances Habitation Professionnelle","Automobile","Bris de Machines","Complémentaire Santé","Construction DO PUC CNR TRC","Divers","Dommages aux Biens","Individuelle Accident","Maritime et Transport","Multirisque Habitation Particulier","Multirisque Immeuble","Multirisque Professionnelle","Navigation de Plaisance","Perte d'Exploitation","Protection Juridique","Prévoyance","RISQUES SPECIAUX","RISQUES TECHNIQUES","Responsabilité Civile"
"Situation N-1",1717.61,3450.00,6617.91,1659.82,7164.69,4560.00,450.00,5218.54,7770.00,3297.31,4420.00,2240.00,4896.33,4340.00,1420.54,4340.00,4340.00,430.00,430.00,430.00,4440.00,1442.47
"TEST ligne 2 CSV",2240.00,4896.33,4340.00,1420.54,4340.00,4340.00,430.00,430.00,430.00,4440.00,1442.47,1717.61,3450.00,6617.91,1659.82,7164.69,4560.00,450.00,5218.54,7770.00,3297.31,4420.00
"TEST ligne 3 CSV",430.00,430.00,430.00,4440.00,1442.47,1717.61,3450.00,6617.91,2240.00,4896.33,4340.00,1420.54,4340.00,4340.00,1659.82,7164.69,4560.00,450.00,5218.54,7770.00,3297.31,4420.00
"TEST ligne 4 CSV",2240.00,4896.33,4340.00,1420.54,4340.00,1717.61,3450.00,6617.91,1659.82,7164.69,4560.00,450.00,4340.00,430.00,430.00,430.00,4440.00,1442.47,5218.54,7770.00,3297.31,4420.00