Hej,
mam pewien problem. Chcę do swojego projektu dorzucić prosty wykres. Na osi X data, a na osi Y pewnie liczby.
Zdecydowałam się na wypróbowanie CanvasJS i mam pewien problem w pliku .jsp... Spójrzcie proszę w link i powiedzcie mi co robi druga pętla forEach
https://canvasjs.com/spring-mvc-charts/line-chart/
Próbuję zaimplementować to u siebie, dane mam w Hibernate w bazce. Wcześniej jak potrzebowałam w .jsp wyciągnąć coś to robiłam podobną pętlę, przekazywałam w controllerze dane do modelu, model do widoku, itd. przykład:
<c:forEach items="${sugars}" var="sugar">
<tr>
<td>${sugar.date}</td>
a w tym linku oni w drugiej pętli odwołują się do czegoś co jest chwilę wyżej: dataPoints: dps[0]
Do czego ja powinnam się odwołać?
I dlaczego w zagnieżdzonej pętli xValue to własnie wartość z tego dataPoints a nie z Listy?
Będę bardzo bardzo bardzo wdzięczna za pomoc!
tutaj zamieszczam to co mam konkretnie u siebie w projekcie jeżeli będzie tak łatwiej mi pomóc:
kontroler:
@GetMapping("/sugarplus/sugars/graphs")
public String showCharts(ModelMap modelMap){
List<Sugar> sugarList = jpaSugarService.findSugarsByDate();
modelMap.addAttribute("sugarDataChart", sugarList);
return "test";
}
mój plik .jsp i javascript w srodku:
<!DOCTYPE HTML>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css"/>
<%@ include file="header.jsp" %>
<head>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
let arr = [];
let chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Wykres pomiarów"
},
axisX: {
title: "Data pomiaru",
gridThickness: 2,
valueFormatString: "DD MMM"
},
axisY: {
title: "Cukier"
},
data: [
{
type: "line",
xValueType: "dateTime",
dataPoints: arr[0]
}
]
});
let xValue;
let yValue;
<c:forEach items="${sugarDataChart}" var="sugars" varStatus="loop">
<c:forEach items="${dataPoints}" var="dataPoints">
xValue = "${dataPoints.x}";
yValue = "${dataPoints.y}";
arr["${loop.index}"].push({
x: xValue,
y: yValue
});
</c:forEach>
</c:forEach>
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
<%@ include file="footer.jsp" %>
</html>