Forum Replies Created

Viewing 4 posts - 1 through 4 (of 4 total)
  • in reply to: Spring MVC with Thymeleaf #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>
    in reply to: Transform jstl view code to thymeleaf code #25029

    Try here another solution

    Spring MVC with Thymeleaf

    in reply to: Spring MVC with Thymeleaf #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>
    in reply to: Spring MVC with Thymeleaf #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 2 years, 7 months ago by ti.korth.
Viewing 4 posts - 1 through 4 (of 4 total)