How to put spring data into JS Json variable?

Question

I'm using a bar chart JS script with a Spring Boot/Thymeleaf web app. The problem is feeding the data from database through Thymeleaf into the following JS variable:

var myBarChart = new Chart(ctx, {
                            type: 'bar',
                            data: {
                                labels: ["Algotech", "Provident", "Play", "Namirial", "Avaya", "Maintenance"],
                                datasets: [{
                                    label: "Godziny",
                                    backgroundColor: "#4e73df",
                                    hoverBackgroundColor: "#2e59d9",
                                    borderColor: "#4e73df",
                                    data: [77, 50, 43, 2, 0, 7],
                                }],
                            },
                            options: {
                                maintainAspectRatio: false,
                                layout: {
                                    padding: {
                                        left: 10,
                                        right: 25,
                                        top: 25,
                                        bottom: 0
                                    }
                                },
                                scales: {
                                    xAxes: [{
                                        time: {
                                            unit: 'month'
                                        },
                                        gridLines: {
                                            display: false,
                                            drawBorder: false
                                        },
                                        ticks: {
                                            maxTicksLimit: 6
                                        },
                                        maxBarThickness: 25,
                                    }],
                                    yAxes: [{
                                        ticks: {
                                            min: 0,
                                            max: 200,
                                            maxTicksLimit: 5,
                                            padding: 10,
                                            // Include a dollar sign in the ticks
                                            callback: function(value, index, values) {
                                                return number_format(value) + 'g';
                                            }
                                        },
                                        gridLines: {
                                            color: "rgb(234, 236, 244)",
                                            zeroLineColor: "rgb(234, 236, 244)",
                                            drawBorder: false,
                                            borderDash: [2],
                                            zeroLineBorderDash: [2]
                                        }
                                    }],
                                },
                                legend: {
                                    display: false
                                },
                                tooltips: {
                                    titleMarginBottom: 10,
                                    titleFontColor: '#6e707e',
                                    titleFontSize: 14,
                                    backgroundColor: "rgb(255,255,255)",
                                    bodyFontColor: "#858796",
                                    borderColor: '#dddfeb',
                                    borderWidth: 1,
                                    xPadding: 15,
                                    yPadding: 15,
                                    displayColors: false,
                                    caretPadding: 10,
                                    callbacks: {
                                        label: function(tooltipItem, chart) {
                                            var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                                            return datasetLabel + ':' + number_format(tooltipItem.yLabel);
                                        }
                                    }
                                },
                            }
                        });

There are several parts of this variable that I need to change, e.g. labels, datasets.data, yAxes.ticks.max and so on. I know about inlining with Thymeleaf but I can't get it to work here. I have the script properly placed:

<script th:inline="javascript">
     /*<![CDATA[*/
     the body of the script here
     /*]]>*/
</script>

And it works only until I try to add Thymeleaf variables. For example the following change crashes Thymeleaf:

labels: [/*[[${projects[0].name}]]*/, "Provident", "Play", "Namirial", "Avaya", "Maintenance"],

And that doesn't even cover the problem of the projects list coming in various sizes. Is there a way to do this with Java, Thymeleaf or no Thymeleaf? I'm starting to think I would have easier time feeding the data using PHP.

Answer 1

OK, so embarrassing as it is, I had to resort to PHP. I've transformed the JS file into a PHP file with desired values filled from URL parameters and I'm calling it like this:

<script src="http://myphpserversaddress/barchart.php?parameter=value"></script>

Works perfectly and I can handle various charts using just this one file.