Hi friends, i made another sample with modelMap that is more natural for Thymeleaf, look above
Test -> http://127.0.0.1:8080/plot (i am using 8080)
First My POJO
// Ponto.java
package com.canvasjs.dto;
public class Ponto {
private Integer X;
private Integer Y;
public Integer getX() {
return X;
}
public void setX(Integer x) {
X = x;
}
public Integer getY() {
return Y;
}
public void setY(Integer y) {
Y = y;
}
}Now the controller
// CanvasJsChartsController.java
package com.canvasjs.chart.controllers;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.canvasjs.dto.Ponto;
@Controller
@RequestMapping("/")
public class CanvasJsChartsController {
@RequestMapping(value = "/plot", method = RequestMethod.GET)
public String getDataPlot(ModelMap model) throws IOException {
List<Ponto> pontos = new ArrayList<>();
Ponto ponto = new Ponto();
ponto.setX(10);
ponto.setY(15);
pontos.add(ponto);
ponto = new Ponto();
ponto.setX(20);
ponto.setY(21);
pontos.add(ponto);
ponto = new Ponto();
ponto.setX(30);
ponto.setY(8);
pontos.add(ponto);
model.addAttribute("pontos",pontos);
return "grafico2";
}
}And finally my HTML grafico2.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Test 2</title>
</head>
<body>
<script th:inline="javascript">
window.onload = function() {
/*<![CDATA[*/
var pontos = /*[[${pontos}]]*/ 'default';
pontos.forEach(myFunction);
function myFunction(value, index, array) {
console.log(value);
}
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "Line Sample"
},
axisY:{
includeZero: false
},
data: [{
type: "line",
dataPoints: []
}]
});
chart.render();
/*<![CDATA[*/
/* Update dataPoints from AJAX and render the chart*/
chart.options.data[0].dataPoints = pontos;
chart.render();
/*]]>*/
}
</script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>