0

I failed to put a simple for-loop in javascript.

for(var i = 0; i < 3; i++){
    // ... do something
}

The idea was to create a data object for the chart, but even a simple construction, with hardcoded values produces the exception:

org.xml.sax.SAXParseException: The content of elements must consist of well-formed character data or markup.

I placed the loop inside this function:

    <html xmlns:th="http://www.thymeleaf.org">
<head>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
window.onload = function () {
    var dataPoints = [{y : 10}, {y : 13}, {y : 18}, {y : 20}, {y : 17}];

    for(var i = 0; i < 3; i++){
          // ... do something
         };

    var chart = new CanvasJS.Chart("chartContainer", {
            title : {
                text : "Dynamic Data"
            },
            data : [{
                    type : "spline",
                    dataPoints : dataPoints
                }
            ]
        });

    chart.render();

    var yVal = 15, updateCount = 0;
    var updateChart = function () {

        yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
          updateCount++;

        dataPoints.push({
            y : yVal
        });

        chart.options.title.text = "Update " + updateCount;
        chart.render();

    };

    // update chart every second
    setInterval(function(){updateChart()}, 1000);
}

</script>
    <script type = "text/javascript" src = "/assets/script/canvasjs.min.js" >  </script>
</head>
<body>
<div id = "chartContainer" style = "height: 300px; width: 100%;" />
</body>
</html>

What is wrong with that? I found a lot of examples and similar questions but nothing helps.

...

Actually I found the reason of the issue, it is explaind here:

Error parsing XHTML: The content of elements must consist of well-formed character data or markup

And the solution is here:

    <html xmlns:th="http://www.thymeleaf.org">
<head>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    window.onload = function () {
    var dataPoints = [{y : 0}, {y : 0}];

    //var levels = [600, 680, 823, 900]; //test without thymeleaf model data

    //var levels get data from thymeleaf model
    var levels = [[${readings}]];
    for(var i = 0; i < levels.length; i++){
        dataPoints.push({
            y : levels[i]
        });
    }

    var chart = new CanvasJS.Chart("chartContainer", {
            title : {
                text : "Dynamic Data"
            },
            data : [{
                    type : "spline",
                    dataPoints : dataPoints
                }
            ]
        });

    chart.render();

    var yVal = 15, updateCount = 0;
    var updateChart = function () {

        yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
          updateCount++;

        dataPoints.push({
            y : yVal
        });

        chart.options.title.text = "Update " + updateCount;
        chart.render();

    };

    // update chart every second
    setInterval(function(){updateChart()}, 1000);
}/*]]>*/
    </script>
    <script type = "text/javascript" src = "/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id = "chartContainer" style = "height: 300px; width: 100%;" />
</body>
</html>

Instead of CDATA I could put the code into a separate file, but the thymleaf model was out of the scope and I haven't solve this new issue yet.

Alhen
  • 1
  • 2

0 Answers0