Home › Forums › Chart Support › Spring MVC with Thymeleaf

Spring MVC with Thymeleaf

Viewing 7 posts - 1 through 7 (of 7 total)

Tagged: 

  • March 4, 2019 at 4:52 pm #24538

    makasu

    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.

    March 6, 2019 at 9:15 pm #24563

    Shashi Ranjan

    @makasu,

    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.

    CanvasJS Chart in Thymeleaf

    —
    Shashi Ranjan
    Team CanvasJS

    March 8, 2019 at 2:23 am #24577

    makasu

    Shashi, many thanks. This is very helpful.

    May 1, 2019 at 1:11 am #25026

    stargazer.dev

    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>
    • This reply was modified 5 years, 7 months ago by stargazer.dev.
    May 1, 2019 at 1:22 am #25028

    stargazer.dev

    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>
    May 1, 2019 at 1:44 am #25030

    stargazer.dev

    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>
    May 4, 2019 at 6:53 am #25075

    carlosdaniel_am

    This sample working is here

    https://drive.google.com/drive/folders/1sXzYM8syiteg12SWmH6p9l_N8ij6g499?usp=sharing

Viewing 7 posts - 1 through 7 (of 7 total)

Tagged: 

You must be logged in to reply to this topic.