Using Thymeleaf with Google charts and Java Map

Question

The Thymeleaf block I have made in JavaScript cuts off the ending ; of the variable, and throws an Uncaught (in promise) SyntaxError: Unexpected token ' in JSON at position 2.

The code does parse like it should, except for the data variable. Parsed code:

function drawChart() {

    var jsonData = "{ 'cols': [" +
        "{'id':'','label':'Expense','pattern':'','type':'string'}" +
        "{'id':'','label':'Amount','pattern':'','type':'number'}]," +
        "'rows': [";

    var data = {'Expense1': 25.0, 'Expense2': 20.0, 'Expense3': 40.0};
    var end = "]}";
    var res = jsonData.concat(data);
    var res = res.concat(end);

    var json = JSON.parse(res);

    var data = new google.visualization.DataTable(json);

    var options = {
        title: 'Data test',
        pieHole: 0.4
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
}

Pre Thymeleaf code:

<script type="text/javascript" th:inline="javascript">
    google.charts.load('current', {'packages': ['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

        var jsonData = "{ 'cols': [" +
            "{'id':'','label':'Expense','pattern':'','type':'string'}" +
            "{'id':'','label':'Amount','pattern':'','type':'number'}]," +
            "'rows': [";

        var data = /*[[${chart.DataPoints}]]*/;
        var end = "]}";
        var res = jsonData.concat(data);
        var res = res.concat(end);

        var json = JSON.parse(res);

        var data = new google.visualization.DataTable(json);

        var options = {
            title: /*[[${chart.title}]]*/'',
            pieHole: 0.4
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
    }
</script>

The data var is either like it is right now, or when enclosed in "", it cuts off the closing semi-colon. How do I get Thymeleaf of JavaScript to cast the data var to a string (while maintaining the '' it contains)?

Are you using thymeleaf 3? Print and validate JOSN being returned from {chart.DataPoints} — Venu Duggireddy, Mar 21 '18 at 19:30
create:33 Uncaught (in promise) SyntaxError: Unexpected token ' in JSON at position 2 at JSON.parse () at drawChart (create:33) at It seems like for some reason Thymeleaf only wants to output raw data, and I can't convert it to a string because of the quotes. — toverknol, Mar 21 '18 at 20:21

Metroids · Accepted Answer · 2018-03-22T14:51:08.577

Does this work for you? I don't think you need to build your data as a JSON string first, simply create it as a JavaScript object:

<script type="text/javascript" th:inline="javascript">
    google.charts.load('current', {'packages': ['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var json = {
            'cols': [
                {'id':'', 'label': 'Expense', 'pattern': '', 'type': 'string'},
                {'id':'', 'label': 'Amount', 'pattern': '', 'type': 'number'}
            ],
            rows: []
        };

        var data = /*[[${chart.DataPoints}]]*/ [];
        var rows = [];
        Object.keys(data).forEach(function(key) {
            rows.push({
                "c": [
                    {"v": key,       "f": null},
                    {"v": data[key], "f": null}
                ]
            });
        });

        json['rows'] = rows;

        var data = new google.visualization.DataTable(json);
        var title = /*[[${chart.title}]]*/ '';
        var options = {
            title: title,
            pieHole: 0.4
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
    }
</script>

edit: you can format the data however you want... it's pretty trivial to do in JavaScript.

This does render the title of the chart, but does displays "no data" where the graph should be, looking into the JSON at the moment. — toverknol, Mar 22 '18 at 08:33
{"cols":[{"id":"","label":"Expense","pattern":"","type":"string"},{"id":"","label":"Amount","pattern":"","type":"number"}],"rows":{"Expense1:25,"Expense2":20,"Expense3":40}} it does output valid JSON, I think there have to be square brackets around 'rows' though, I feel like it's getting close. — toverknol, Mar 22 '18 at 08:52
I changed the JSON to hardcoded JSON. Is there a way to format the /*[[${chart.DataPoints}]]*/ to something like this: {"c":[{"v":"Expense1","f":null},{"v":25,"f":null}]}, {"c":[{"v":"Expense2","f":null},{"v":20,"f":null}]}, {"c":[{"v":"Expense3","f":null},{"v":40,"f":null}]}? — toverknol, Mar 22 '18 at 09:01

Using Thymeleaf with Google charts and Java Map

1 Answers1