Home forums Using CanvasJS Spring MVC with Thymeleaf

Tagged: 

This topic contains 6 replies, has 4 voices, and was last updated by  carlosdaniel_am 4 months, 3 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #24538

    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.

    #24563

    @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.

    ____
    Shashi Ranjan
    Team CanvasJS

    #24577

    Shashi, many thanks. This is very helpful.

    #25026

    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://canvasjs.com/assets/script/canvasjs.min.js"></script>
    
    </body>
    </html>
    • This reply was modified 4 months, 3 weeks ago by  ti.korth.
    #25028

    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://canvasjs.com/assets/script/canvasjs.min.js"></script>
    
    </body>
    </html>
    #25030

    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://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </body>
    </html>
    #25075
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.