Forum Stats

  • 3,770,379 Users
  • 2,253,100 Discussions
  • 7,875,430 Comments

Discussions

Gantt chart VBCS

User_AN1V9
User_AN1V9 Member Posts: 1 Green Ribbon

Hello Team,

I need to do 3 things in gantt chat, could you tell is it possible in gantt?.

1. Need to change week header like Jul 19 - Jul 25 but now I can able to do Jul 19 only in header of gantt.

2. In label bar I have to add 3 rows like first one is label name and second one is attachment icon with name and then third one is some number.

3. Need to change week starting from Monday to Sunday but now it's showing as Sunday to Saturday.

I have attached the sample screenshot, it's not VBCS gantt chart.

Thanks

Dinesh

Answers

  • Wilson Louie-Oracle
    Wilson Louie-Oracle Member Posts: 33 Employee

    Hi Dinesh,

    1) Possible. You can supply a converter or custom formatter function for specific scales. For example, to format the "weeks" scale to have the "Jul 19 - Jul 25" format for the date representing Jul 19, you can do something like the following in your viewmodel, and add minor-axis.converter.weeks="[[weeksConverter]]" to your html:

    import { IntlDateTimeConverter } from "ojs/ojconverter-datetime";
    
    class ViewModel {
        ...
        // see https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.IntlDateTimeConverter.html#ConverterOptions
        // This converter converts ISO strings to e.g. "Jul 19, 2021"
        const dateConverter = new IntlDateTimeConverter({ dateFormat: "medium" }); 
        this.weeksConverter = {
            // Take in an ISO string e.g. "2021-07-19T00:00:00.000Z" and return "Jul 19 - Jul 25"
            format: (date) => {
                const day = 24 * 3600 * 1000;
                const endDate = new Date(new Date(date).getTime() + 6*day).toISOString();
                const start = dateConverter.format(date).split(',')[0]; // remove year
                const end = dateConverter.format(endDate).split(',')[0];
                return `${start} - ${end}`;
            }
        }
    }
    

    2) If you're okay with the label name and attachment icons to be outside of the chart area, to be shown in a column on the left, then you can turn on the row-axis in combination with providing a rowAxisLabelTemplate (see https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=gantt&demo=multipleTasks). Otherwise, if you must require the labels to be inside the chart area, then in JET 11+ you may be able to use custom task renderers and render extra tasks just to hold the two labels (https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=gantt&demo=taskDepTemplates) but your mileage may vary.

    3) Not possible today, currently the start of the week is based on your locale's region.

    HTH,

    Wilson

  • Jeff S.
    Jeff S. Member Posts: 3 Green Ribbon

    Hi Wilson,

    Would you know of a way to render either the axis labels or gridlines.vertical in a certain way to highlight a Monday to Sunday view as opposed to the standard Sunday to Saturday? I noticed that using a Monday start date to begin the Gantt will shift the chart to start to start on a Monday but a visual such as the gridlines.vertical still shows on a Sunday instead of <startdate+7> days.

    Appreciate any assistance you may have.

    Thanks,

    Jeff

  • Jeff S.
    Jeff S. Member Posts: 3 Green Ribbon

    I was working on my above question and found a solution. Wanted to post it in this thread if it may help others.

    Adding a CSS "transform: translate(50px, 0px);" on oj-gantt-vertical-gridline moved the gridline to begin on Monday and end on a Sunday.

  • It's great that you have it working for your situation, but overriding JET CSS classes is a very bad idea in general and not supported. It will break, or can break, backward compatibility when you upgrade to a newer release in the future. Please make sure you document what you've done so that you can revisit it in the future if something goes sideways after upgrading. :-)

    Wilson Louie-Oracle