FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Spring MVC with Thymeleaf › Reply To: Spring MVC with Thymeleaf

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>