Forum Replies Created by stargazer.dev

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

    stargazer.dev

    Try here another solution

    https://canvasjs.com/forums/topic/spring-mvc-with-thymeleaf/

    May 1, 2019 at 1:22 am in reply to: Spring MVC with Thymeleaf #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:11 am in reply to: Spring MVC with Thymeleaf #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.
Viewing 4 posts - 1 through 4 (of 4 total)