Convert JSP code into JavaScript for canvasJS - thymeleaf

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>