Gantt chart display in day, week, month, year

Support
#1

Hi
I have been trying with the gantt chart. Currently it is displayed in hour. How can i display it in Day, Week, Month, Year ?

I tried to play with period but didn’t work.


        <chart:ganttChart id="gantt"
                          additionalSegmentFields="task"
                          balloonDateFormat="JJ:NN"
                          brightnessStep="10"
                          categoryField="category"
                          colorField="color"
                          columnWidth="0.5"
                          datasource="taskSpansDs"
                          durationField="duration"
                          endField="end"
                          height="100%"
                          marginRight="70"
                          period="hh"
                          rotate="true"
                          segmentsField="segments"
                          startDate="2016-01-01"
                          startField="start"
                          theme="LIGHT"
                          width="100%">
            <chart:graph balloonText="[[task]]: [[open]] [[value]]"
                         fillAlphas="1"/>
            <chart:valueAxis maximum="31"
                             minimum="7"
                             type="DATE"/>
            <chart:chartScrollbar/>
            <chart:chartCursor cursorAlpha="0.1"
                               fullWidth="true"
                               valueBalloonsEnabled="false"
                               valueLineBalloonEnabled="true"
                               valueLineEnabled="true"/>
            <chart:export/>
        </chart:ganttChart>
#2

Hello,
The “period” attribute is what you need to change. The proper values are:

  • fff - MILLISECONDS
  • ss - SECONDS
  • mm - MINUTES
  • hh - HOURS
  • DD - DAYS
  • MM - MONTHS
  • WW - WEEKS
  • YYYY - YEARS

I’ve attached example project.

gantt-test.zip (23.2K)

#3

Thanks and it works. Another question, I am wondering if there is any mechanism to automatically convert the values when I am changing from DD to WW for example.

#4

What is the use of defining period in ss, mm, DD, MM, do we have any functionality that converts day to month?

#5

Hello Mortoza,

Sorry, but there is no default functionality to convert data between periods. Only stock charts have something similar, called Period Selector, but it works more like predefined zoom.

Regards.

#6

Hi, Mortoza!
Glad to notify you that in the Platform 6.2 new Gantt chart is included. Now it has the horizontal scrollbar.
So, we can dynamically change the chart’s scale and borders and the chart remains good looking.
In that case, it is better to adjust segments specifying the “startDateField”, “endDateField” - properties.


@Inject
private Chart ganttChart;
...
((GanttChart)ganttChart.getConfiguration()).setPeriod(DatePeriod.YEARS.toString());
((GanttChart)ganttChart.getConfiguration()).setPeriod(DatePeriod.MONTHS.toString());
((GanttChart)ganttChart.getConfiguration()).setPeriod(calculatePeriod(earliestDate, latestDate));
((GanttChart)ganttChart.getConfiguration()).setStartDate(earliestDate);
((GanttChart)ganttChart.getConfiguration()).getValueAxis().setMaximum(calculateEndOFAxis(earliestDate,latestDate));
#7

Thank you, sounds good.

I am experimenting if I can use the listener to open an editor screen and update data. It worked well but it doesn’t refresh the chart. It is refreshed only when I reloaded it. What Do you suggest to refresh the chart immediately after I have saved the change I data by editor?

#8

Hi,
If you have got the chart on the entity browser screen and want to refresh it after the entity editor is closed, it may be easily done in the AfterCommitHandler/AfterWindowClosedHandler of the corresponding table actions.
Here is the code of entity browser screen controller.

    
    @Named("tasksTable.create")
    private CreateAction tasksTableCreate;

    @Named("tasksTable.edit")
    private EditAction tasksTableEdit;
....
    @Override
    public void init(Map<String, Object> params) {
        super.init(params);

        fillGanttChart();   /*method which refreshes the chart*/
        tasksTableCreate.setAfterCommitHandler(e -> fillGanttChart());
        tasksTableEdit.setAfterWindowClosedHandler(e -> fillGanttChart());
#9

@Gleb
I want to change the period attribute on the fly programmatically and wanted to download the test app you shared but couldn;t download. It seems there is an issue with repository.