Horizontal time line Day view calendar

Support
#21

I have set up the Gnatt Chart like this


<chart:ganttChart id="ganttChart"
                  additionalSegmentFields="task"
                  balloonDateFormat="JJ:NN"
                  brightnessStep="7"
                  categoryField="category"
                  colorField="color"
                  columnWidth="0.5"
                  endDateField="end"
                  height="auto"
                  marginRight="70"
                  marginLeft="70"
                  period="YEARS"
                  rotate="true"
                  segmentsField="segments"
                  startDate="2015-01-01"
                  startDateField="start"
                  theme="LIGHT"
                  width="100%">
    <chart:graph balloonText="<strong>[[task]]</strong>: [[open]] - [[value]]"
                 fillAlphas="1"
                 lineAlpha="1"
                 lineColor="WHITE"></chart:graph>
    <chart:valueAxis maximum="7"
                     minimum="1"
                     type="DATE"></chart:valueAxis>
    <chart:valueScrollbar autoGridCount="true"
                          color="BLACK"></chart:valueScrollbar>
    <chart:chartCursor cursorAlpha="0"
                       cursorColor="#55bb76"
                       fullWidth="true"
                       valueBalloonsEnabled="false"
                       valueLineAlpha="0.5"
                       valueLineBalloonEnabled="true"
                       valueLineEnabled="true"
                       valueZoomable="true"
                       zoomable="false"></chart:chartCursor>
    <chart:categoryAxis axisColor="#DADADA"
                        gridAlpha="0.07"
                        startOnAxis="true">
        <chart:guides>
            <chart:guide category="2016"
                         dashLength="2"
                         fillAlpha="0.2"
                         fillColor="#CC0000"
                         inside="true"
                         label="fines for speeding increased"
                         labelRotation="90"
                         toCategory="2017"></chart:guide>
            <chart:guide category="2018"
                         dashLength="2"
                         inside="true"
                         label="motorcycle fee introduced"
                         labelRotation="90"
                         lineAlpha="1"
                         lineColor="#CC0000"></chart:guide>
        </chart:guides>
    </chart:categoryAxis>
    <chart:export></chart:export>
    </chart:ganttChart>

And used the data in the example:


List<MapDataItem> segments = new ArrayList<>();
segments.add(new MapDataItem(ParamsMap.of("start", "2016-01-01 10:00:00",
        "end", "2016-01-14 11:00:00", "task", "Gathering requirements", "color", "#b9783f")));
segments.add(new MapDataItem(ParamsMap.of("start", "2016-01-16 10:00:00",
        "end", "2016-01-27 12:00:00", "task", "Producing specifications")));
segments.add(new MapDataItem(ParamsMap.of("start", "2016-02-05 8:05:00",
        "end", "2016-04-18 10:55:00", "task", "Development")));
segments.add(new MapDataItem(ParamsMap.of("start", "2016-04-18 7:10:00",
        "end", "2016-04-30 9:10:00", "task", "Testing and QA")));
dataProvider.addItem(new MapDataItem(ParamsMap.of("category", "Sjåfør #1", "segments", segments)));

But I don’t see any guides?

#22

You can add guide programmatically, for example:


Guide currentTimeGuide = new Guide()
                .setValue(/* a date */)
                .setLineAlpha(1.0)
                .setLineColor(new Color("#CC0000"));

GanttChart ganttChartModel = (GanttChart) ganttChart.getConfiguration();
ganttChartModel.addGuides(currentTimeGuide);

But as I mentioned before, currently guide cannot be used with date value - PL-8746.

#23

Hi,

So, you’ve just copied guides from the sample but setting for guides suitable only for that sample. In your case, instead of category attribute, you need to use ‘value’ attribute, because dates are values. But I’ve found a problem with setting value attribute as a date and created the issue - PL-8746. Sorry for the inconvenience.

Regards,

Gleb

#24

Ok. Now I got the guide in the chart with values. Here is the code:
Gantt.xml


<chart:ganttChart id="ganttChart"
                                          additionalSegmentFields="task"
                                          balloonDateFormat="JJ:NN"
                                          brightnessStep="7"
                                          categoryField="category"
                                          colorField="color"
                                          columnWidth="0.5"
                                          endDateField="end"
                                          height="auto"
                                          marginRight="70"
                                          marginLeft="70"
                                          period="DAYS"
                                          rotate="true"
                                          segmentsField="segments"
                                          startDate="2016-01-01"
                                          startDateField="start"
                                          theme="LIGHT"
                                          width="100%">
                            <chart:graph balloonText="&lt;strong&gt;[[task]]&lt;/strong&gt;: [[open]] - [[value]]"
                                         fillAlphas="1"
                                         lineAlpha="1"
                                         lineColor="WHITE"/>
                            <chart:valueAxis maximum="31"
                                             minimum="7"
                                             type="DATE">
                                <chart:guides>
                                    <chart:guide value="1453028400000"
                                                 dashLength="2"
                                                 fillAlpha="0.2"
                                                 fillColor="#CC0000"
                                                 inside="true"
                                                 label="Time by Day"
                                                 labelRotation="90"
                                                 toValue="1453114800000"/>
                                    <chart:guide
                                            value="1453028400000"
                                            dashLength="2"
                                            inside="true"
                                            label="Current time"
                                            labelRotation="90"
                                            lineAlpha="1"
                                            lineColor="#CC0000"/>
                                </chart:guides>
                            </chart:valueAxis>
                            <chart:valueScrollbar autoGridCount="true"
                                                  color="BLACK"/>
                            <chart:chartCursor cursorAlpha="0"
                                               cursorColor="#55bb76"
                                               fullWidth="true"
                                               valueBalloonsEnabled="false"
                                               valueLineAlpha="0.5"
                                               valueLineBalloonEnabled="true"
                                               valueLineEnabled="true"
                                               valueZoomable="true"
                                               zoomable="false"/>

                            <chart:export/>
                        </chart:ganttChart>

What I have done since there is a bug in Value (PL-8746) is to convert Date to milliseconds.

Code in Controller:


List<MapDataItem> segments = new ArrayList<>();
        segments.add(new MapDataItem(ParamsMap.of("start", "2016-01-01 10:00:00",
                "end", "2016-01-14 11:00:00", "task", "Gathering requirements", "color", "#b9783f")));
        segments.add(new MapDataItem(ParamsMap.of("start", "2016-01-16 10:00:00",
                "end", "2016-01-27 12:00:00", "task", "Producing specifications")));
        segments.add(new MapDataItem(ParamsMap.of("start", "2016-02-05 8:05:00",
                "end", "2016-04-18 10:55:00", "task", "Development")));
        segments.add(new MapDataItem(ParamsMap.of("start", "2016-04-18 7:10:00",
                "end", "2016-04-30 9:10:00", "task", "Testing and QA")));
        dataProvider.addItem(new MapDataItem(ParamsMap.of("category", "Item #1", "segments", segments)));

        segments = new ArrayList<>();
        segments.add(new MapDataItem(ParamsMap.of("start", "2016-01-01",
                "end", "2016-01-10", "task", "Gathering requirements", "color", "#cc4748")));
        segments.add(new MapDataItem(ParamsMap.of("start", "2016-01-12",
                "end", "2016-01-15", "task", "Producing specifications")));
        segments.add(new MapDataItem(ParamsMap.of("start", "2016-01-16",
                "end", "2016-02-05", "task", "Development")));
        segments.add(new MapDataItem(ParamsMap.of("start", "2016-02-10",
                "end", "2016-02-18", "task", "Testing and QA")));
        dataProvider.addItem(new MapDataItem(ParamsMap.of("category", "Item #2", "segments", segments)));

        segments = new ArrayList<>();
        segments.add(new MapDataItem(ParamsMap.of("start", "2016-01-01",
                "end", "2016-01-10", "task", "Gathering requirements", "color", "#cc4748")));
        segments.add(new MapDataItem(ParamsMap.of("start", "2016-01-12",
                "end", "2016-01-15", "task", "Producing specifications")));
        segments.add(new MapDataItem(ParamsMap.of("start", "2016-01-16",
                "end", "2016-02-05", "task", "Development")));
        segments.add(new MapDataItem(ParamsMap.of("start", "2016-02-10",
                "end", "2016-02-18", "task", "Testing and QA")));
        dataProvider.addItem(new MapDataItem(ParamsMap.of("category", "Item #3", "segments", segments)));

        segments = new ArrayList<>();
        segments.add(new MapDataItem(ParamsMap.of("start", "2016-01-01",
                "end", "2016-01-10", "task", "Gathering requirements", "color", "#cc4748")));
        segments.add(new MapDataItem(ParamsMap.of("start", "2016-01-12",
                "end", "2016-01-15", "task", "Producing specifications")));
        segments.add(new MapDataItem(ParamsMap.of("start", "2016-01-16",
                "end", "2016-02-05", "task", "Development")));
        segments.add(new MapDataItem(ParamsMap.of("start", "2016-02-10",
                "end", "2016-02-18", "task", "Testing and QA")));
        dataProvider.addItem(new MapDataItem(ParamsMap.of("category", "Item #4", "segments", segments)));

        ganttChart.getConfiguration().setDataProvider(dataProvider);
#25

How to I access Guide in code? I have tried to give it an ID, but I can’t reach it.

#26

A value of Date/Time must be presented as java.util.Date.
To access guides you need to cast an object returned by getConfiguration() method to a proper chart model object, e.g. GanttChart.

#27

To get the Guide in code I used the following code:


GanttChart gantt = (GanttChart) ganttChart.getConfiguration();
Guide guide = gantt.getValueAxis().getGuides().get(0);
// Date for Value is 2016-01-25
guide.setValue(Double.valueOf("1453680000000"));
// Date for toValue is 2016-01-26
guide.setToValue(Double.valueOf("1453766400000"));
#28

how do I update GnattChart without repaint the Chart. This very anoying to see that the GnattChart is repaintet every 30 sek.

I tried to refresh the datasource, but the Chart is not updated without repaint.
Is there another way of refresh the Chart, I am using ListDataProvider to fill Chart with data.

#29

Do you have any idea when the issue PL-8746 is fixed? I really need this feature.

#30

Hello, Kjell.

The issue PL-8746 is fixed now and the very next bugfix release will not have this issue.

Regards,

Gleb

#31

Good, thanks for fast fix.

#32

When will this release be published?

#33

Sorry, I have no information about release date.

#34

I have tried to get the ItemClickListener in GnattChart. I got the Item but can’t get selected segment. Here is my test code:


weekGanttchart.addGraphItemClickListener(event -> {
 List<DataItem> items = dataProvider.getItems();
 DataItem dataItem = items.get(event.getItemIndex());

 ArrayList<MapDataItem> segments = (ArrayList<MapDataItem>) dataItem.getValue("segments");
 MapDataItem s = segments.get(event.getItemIndex());

 showNotification("" + s.getValue("uuid") );
 UUID uuid = (UUID) s.getValue("uuid");
 Assignment assignment = loadAssignmentById(uuid);
 assignmentDs.setItem(assignment);
 assignmentDs.refresh();
 assignmentFieldGroup.setDatasource(assignmentDs);
 //showNotification("This don't work according to bug. Bug is reported. Waiting for fix");
 });

How can I get the segment i select in the Gnatt Chart?

#35

:ticket: See the following issue in our bug tracker:

https://youtrack.cuba-platform.com/issue/PL-7655