LineChart x axis values

UI Components for JSF
Post Reply
Grombaner
Posts: 1
Joined: 03 May 2018, 21:12

11 Jan 2019, 21:20

I have a Linechart in my project that displays statistics for a hospital. When the user opens the statistic site the values for the current weeks are displayed. Above the statistic are to <p:Calendar> to choose statistic of a specific week the user wants to see.

Code: Select all

		LocalDate maxDate;
		
        durationLine = new LineChartModel();
        List<Double> durationLineData = new ArrayList<>();

		// Gets the Data for the specific week from DB
        if(calendarFrom != null | calendarTo != null) {
            maxDate = calendarTo.toInstant().atZone(ZoneId.systemDefault()).toLocalDate();
            durationLineData = statisticsManager.getAverageEmergencySessionDurationPerDay
                    (calendarFrom.toInstant().atZone(ZoneId.systemDefault()).toLocalDateTime(),
                           calendarTo.toInstant().atZone(ZoneId.systemDefault()).toLocalDateTime());
        } else {
            maxDate = LocalDate.now();
            durationLineData = statisticsManager.getAverageEmergencySessionDurationPerDay
                    (LocalDateTime.now().minusDays(7), LocalDateTime.now());
        }
		
        int size = durationLineData.size();
        LineChartSeries lineChart = new LineChartSeries();
		
        long days = 0;
        for(int i = 0; i < size; i++){
            if(days < 7) {
                lineChart.set(maxDate.minusDays(days), durationLineData.get(i));
                days++;
            } else {
                lineChart.set(maxDate, durationLineData.get(i));
            }
        }

        durationLine.addSeries(lineChart);

        durationLine.getAxis(AxisType.Y).setLabel("Minuten");
        durationLine.getAxis(AxisType.Y).setMin(0);
        DateAxis axis = new DateAxis();
        axis.setTickAngle(-50);
        axis.setMax(LocalDate.now().toString());
        axis.setTickFormat("%#d %b, %y");
        durationLine.getAxes().put(AxisType.X, axis);

Code: Select all

 <h:form>
            <p:panel styleClass="center" style="margin-top: 50px;border-color: white">

                <div style="display: block; margin-left: auto;margin-right: auto; width: 60%">
                    <h:panelGrid columns="8" cellpadding="5"  style="margin-bottom: 20px">
                        <p:outputLabel for="from" value="Von:" />
                        <p:calendar id="from" value="#{durationChartBean.calendarFrom}" locale="de" navigator="true"
                                    pattern="dd-MM-yyyy"  mask="true" onchange=""/>
                        <p:outputLabel for="to" value=" bis "/>
                        <p:calendar id="to" value="#{durationChartBean.calendarTo}" locale="de" navigator="true"
                                    pattern="dd-MM-yyyy" mindate="#{durationChartBean.calendarFrom}" mask="true"/>
                        <p:commandButton type="submit" icon="ui-icon-search" action="#{durationChartBean.updateCharts}"
                        update="@form"/>
                    </h:panelGrid>
                </div>

                <p:tabView styleClass="tabView">
                    <p:tab title="#{msg['average']}">
                        <p:chart  type="line" model="#{durationChartBean.dateModel}" style="height: 450px;width: 750px"/>
                    </p:tab>
                    <p:tab title="#{msg['ambulance']}">
                        <p:chart type="bar" model="#{durationChartBean.durationBar}" style="height: 450px;width: 750px"/>
                    </p:tab>
                </p:tabView>

            </p:panel>
 </h:form>
At the beginning the chart displays the correct 7 dates from now to the date 7 days ago:
Image

When I choose a new week the first x value is the first date I selected but the last x value is still the current date:
Image

What did I do wrong that the current date is always the maximum?

PS: when I update the chart, the java method above is called again, the max value is also correctly set

Melloware
Posts: 3717
Joined: 22 Apr 2013, 15:48

12 Jan 2019, 15:52

I would clone this project and put together a small reproducible test case so developers can debug it: https://github.com/primefaces/primefaces-test
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 35 guests