canvasJS i pliki .jsp

0

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>
1
GosiaSo napisał(a):

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/
.
.
.
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?

Odpowiedź znajduje się tutaj.
Nie wgłębiałem się w sens tego projektu, ale Lista list z mapami to niezłe gó... combo :)

List<List<Map<Object, Object>>> canvasjsDataList = canvasjsChartService.getCanvasjsChartData();

Pierwsza pętla pobiera wewnętrzną liste, druga pętla odnosi się do każdej mapy po kolei i pobiera wartości X, Y.

Patrząc 60 sec na ten 'tutorial' stwierdzam, że rzuciłbym go w piz... :)

ps skąd pomysł na tykanie JSP?

0

A co proponujesz innego zamiast jsp? Thymeleaf czy zupełnie nowy front typu Angular? Jestem na etapie nauki, więc chętnie dowiem się co ciekawego można użyć. Do tej pory używałam właśnie jsp w projektach i przyjemnie mi się używało. Zwłaszcza do prostych widoków typu wyświetlanie tabeli z danymi.

2
GosiaSo napisał(a):

nowy front typu Angular?

Tak.

Zobacz te 2 moje posty: https://4programmers.net/Forum/1707425 i https://4programmers.net/Forum/1701455

3

Na wszelki wypadek wrzucam link do pozostałych tech zombie, jakbyś po rezygnacji z JSP trafiła na cos jeszcze gorszego (niestety da się)
Początki w java, a technolog...

2

@GosiaSo: W przykładzie do jsp przekazują listę list, U Ciebie jest lista obiektów Sugar, więc ta wewnętrzna pętla jest niepotrzebna.

<c:forEach items="${sugarDataChart}" var="sugar" varStatus="loop">
                    xValue = "${sugar.x}";
                    yValue = "${sugar.y}";
                    arr[0].push({
                        x: xValue,
                        y: yValue
                    });
</c:forEach>

Zakładam, że w klasie Sugar masz pola x i y;

1 użytkowników online, w tym zalogowanych: 0, gości: 1