Chartjs-Label not showing in Chart.js with Grails

by

1👍

✅

The main issue here is that grails automatically escapes values as HTML upon insertion in the GSP page. You can suppress this by adding the advice 

<%@ expressionCodec="none" %>

at the beginning of the GSP page.

Be aware that your application will be less secure after the change. Especially if the data can contain user-created input people might start messing with your application.

Here is a running example using Grails 3.3.8 based on the test data supplied by @Kumar Chapagain, thank you very much.

In the controller you don’t need to package the data in a ModelAndView, as this is done automatically by Grails. Just return a map with the needed entries. I prefer to convert the map to JSON within the controller and not in the gsp page as it keeps the control where it belongs and the GSP more simple.

Controller:

package g338

import grails.converters.JSON

class ChartController {

    def index() {

        Map userResultMap = [:]
        List dateCreated = ["2018-09-17 13:07:06.0","2018-09-17 13:27:06.0","2018-09-17 14:27:06.0","2018-09-17 17:27:06.0"]
        List result = [50, 56, 23, 42]
        userResultMap.put("dateCreated",dateCreated)
        userResultMap.put("result",result)

        [ userResultMap: userResultMap as JSON ]
    }
}

gsp page: views/chart/index.gsp

<%@ expressionCodec="none" %>
<!doctype html>
<html>
<head>
    <meta name="layout" content="main"/>
    <title>Welcome to Grails</title>
</head>
<body>
    <canvas id="myChart"></canvas>
    <g:javascript>
    var result = ${userResultMap};
    var data = result.result;
    var labels = result.dateCreated;

    var config = {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Clinical FRE',
                backgroundColor: '#7A564A',
                borderColor: '#7A564A',
                data: result,
                fill: false
            }]
        },
        options: {
            legend: {
                display: false
            },
            tooltips: {
                enabled: false
            },
            responsive: true,
            scales: {
                yAxes: [{
                    gridLines: {
                        drawBorder: false,
                        color: ['#9b1f22', '#9b1f22', '#ed1c24', '#ed1c24', '#f7931f', '#f7931f', '#206b36', '#206b36', '#206b36', '#206b36', '#206b36']
                    },
                    ticks: {
                        min: 0,
                        max: 100,
                        stepSize: 10,
                        callback: function (value) {
                            return value + "%"
                        }
                    }
                }]
            }
        }
    };

    window.onload = function createChart(data) {
        var ctx = document.getElementById('myChart').getContext('2d');
        window.myLine = new Chart(ctx, config)
    };

    </g:javascript>

</body>
</html>

1👍

Make sure userResultsList(userListMap) data must be in the form below from the controller.

    Map userResultMap = [:]
    List dateCreated = ["2018-09-17 13:07:06.0","2018-09-17 13:27:06.0","2018-09-17 14:27:06.0","2018-09-17 17:27:06.0"]
    List result = [50, 56, 23, 42]
    userResultMap.put("dateCreated",dateCreated)
    userResultMap.put("result",result)

Then you need to parse the userResultMap data as JSON if not parsed and do similar like this in gsp page: 

<script>
    var userResult = ${userResultMap as JSON};
    var result = userResult.result;
    var labels = userResult.dateCreated;
</script>

0👍

You would need to convert your array, object whatever you are using to JSON for JavaScript to understand it. 

<g:javascript>
        var testDate = ${userResultsList.dateCreated}
        var result = ${userResultsList.result as JSON}    // make sure grails.converters.JSON is imported
</g:javascript>

0👍

var labels = userResult.dateCreated;

     var config = {
        type: 'line',
        data: {
            labels: testDate,

you are using labels: testDate,
but assigning labels to labels
try

var testDate = userResult.dateCreated;
**labels: testDate**

Leave a comment