Convert JSP code into JavaScript for canvasJS

Question

I'm trying to get this canvasJS line chart to render using thymeleaf rather than JSP.

It has the following loop in jsp that I need to convert to javascript. However I'm not proficient in javascript

<c:forEach items="${dataPointsList}" var="dataPoints" varStatus="loop"> 
    <c:forEach items="${dataPoints}" var="dataPoint">
        xValue = parseInt("${dataPoint.x}");
        yValue = parseFloat("${dataPoint.y}");
        dps[parseInt("${loop.index}")].push({
            x : xValue,
            y : yValue,
        });     
    </c:forEach>    
</c:forEach> 

The above $dataPointList is created in java as follows

static List<Map<Object, Object>> dataPoints1 = new ArrayList<Map<Object, Object>>();

    static {
        int limit = 50000;
        int y = 100;
        Random rand = new Random();

        for (int i = 0; i < limit; i += 1) {
            y += rand.nextInt(11) - 5;
            map = new HashMap<Object, Object>();
            map.put("x", i);
            map.put("y", y);
            dataPoints1.add(map);
        }

        list.add(dataPoints1);
    }

    public static List<List<Map<Object, Object>>> getCanvasjsDataList() {
        return list;
    }

I've tried the following however dps[parseInt(i)].push({ gives a type error. I'm not sure how to create the required data structure for canvasJS given the datalist defined in java.

  <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
        <script type="text/javascript" th:inline="none" class="init">
            /*<![CDATA[*/
            window.onload = function (e) {
                var dps = [[]];
                var chart = new CanvasJS.Chart("chartContainer", {
                    theme: "light2", // "light1", "dark1", "dark2"
                    animationEnabled: true,
                    zoomEnabled: true,
                    title: {
                        text: "Try Zooming and Panning"
                    },
                    data: [{
                            type: "area",
                            dataPoints: dps[0]
                        }]
                });

                var xValue;
                var yValue;

                var dataPointsList = /*[[${dataPointsList}]]*/ 'default';

                for (var i = 0; i < dataPointsList.length; i++) {
                    var dataPoints = dataPointsList[i];
                    for (var j = 0; j < dataPoints.length; j++) {
                        dps[parseInt(i)].push({
                        x : dataPoints[j].x,
                        y : dataPoints[j].y,
                    });     
                    }
                }


                chart.render();

            }
            /*]]>*/
        </script>

Answer 1

The following adjustments have resulted in the graph displaying

    <script type="text/javascript" th:inline="javascript" class="init">
        /*<![CDATA[*/
        window.onload = function (e) {
            var dps = [];
            var chart = new CanvasJS.Chart("chartContainer", {
                theme: "light2", // "light1", "dark1", "dark2"
                animationEnabled: true,
                zoomEnabled: true,
                title: {
                    text: "Try Zooming and Panning"
                },
                data: [{
                        type: "area",
                        dataPoints: dps
                    }]
            });


            var dataPointsList = /*[[${dataPointsList}]]*/ 'null';

            count = 0;
            for (var i = 0; i < dataPointsList.length; i++) {
                var dataPoints = dataPointsList[i];
                for (var j = 0; j < dataPoints.length; j++) {
                    dps[count++] = {
                        x: dataPoints[j].x,
                        y: dataPoints[j].y
                    };
                }
            }
            chart.render();
        }
        /*]]>*/
    </script>