You must be logged in to post your query.
Home › Forums › Chart Support › Spring MVC with Thymeleaf
Tagged: Thymelaf
I have tried to implement one of the Spring MVC examples. Unfortunately, these examples use JSP which is not recommended by Spring and setting up the IDE for JSP development is not straightforward. I was wondering if there is an example using Thymeleaf as the template engine.
CanvasJS can be integrated with Spring MVC irrespective of the view layer being used in the project. When it comes to the view layer in Spring MVC, it gives you a variety of choices like JSP or template engines like Thymeleaf, Velocity, FreeMarker, etc.
The Spring MVC sample that you can download from our download page uses JSP as view, whereas CanvasJS works smoothly without any issue with any template engines – as CanvasJS is just a JavaScript library, it works fine as the browser supports JavaScript irrespective of any template engine being used.
Here is a sample project of integrating CanvasJS in Spring MVC web-project that uses Thymeleaf template engine as view layer.
—
Shashi Ranjan
Team CanvasJS
Shashi, many thanks. This is very helpful.
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>
Hi friends, i made another sample with modelMap that is more natural for Thymeleaf
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>
I review my grafico2.html and remove no necessary code….
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Test 2</title>
</head>
<body>
<script th:inline="javascript">
/*<![CDATA[*/
window.onload = function() {
var pontos = /*[[${pontos}]]*/ 'default';
// Only a test
pontos.forEach(myFunction);
function myFunction(value, index, array) {
console.log(value);
}
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: false,
theme: "light2",
title:{
text: "Line Sample"
},
axisY:{
includeZero: false
},
data: [{
type: "line",
dataPoints: []
}]
});
/* 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://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>
This sample working is here
https://drive.google.com/drive/folders/1sXzYM8syiteg12SWmH6p9l_N8ij6g499?usp=sharing
Tagged: Thymelaf
You must be logged in to reply to this topic.