Column Gantt Chart additional entry

[gowebUSA]

Sample (which sample are you talking about)

https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-column-chart

Question (the more details, the better)

How can we add more entries to the GanttChartMulti Column? As of now, the only things showing are data from Start and End. I wanted to add Start1 and End1 to the column for more entries on the same GanttChartMulti column. Please help. Thank you.

[tecchan1107]

Hi @gowebUSA ! I think it is possible to add Start1 and End1. Is it correct that the Gantt chart should be lined up vertically as shown in the following image?

[tecchan1107]

Since there seems to be no reply, I will close it. If you have any questions, sorry, but please create a new issue again.

[gowebUSA]

Hi tecchan1107. Sorry, I didn't check this submission. But, yes, I want to place it on the same line. Thank you for your help. I will be checking this thread regularly now.

[tecchan1107]

Thanks for the reply @gowebUSA ! I will try and comment again when the code is ready!

[tecchan1107]

Hi @gowebUSA . I have tried to create a sample that displays the Gantt chart vertically. I would be happy if you could try it out when you have time.

About the formula

The formula in the Calculated column should be changed as follows

=TEXT([Start],"MM-dd-yyyy")&"^"&TEXT([End],"MM-dd-yyyy")&","&TEXT([Start1],"MM-dd-yyyy")&"^"&TEXT([End1],"MM-dd-yyyy")&"(11-01-2023_05-31-2024)"

Sample Code

The sample code is as follows

Sample Code (Click to open/close)

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "row", "width": "100%", "align-items": "center", "margin-top": "2px", "margin-bottom": "2px" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "width": "100%", "margin-bottom": "3px" }, "children": [ { "elmType": "div", "style": { "display": "flex", "justify-content": "space-between", "width": "100%", "white-space": "nowrap" }, "attributes": { "class": "ms-fontSize-xs" }, "children": [ { "elmType": "div", "txtContent": "=replaceAll(substring(@currentField,indexOf(@currentField,'(')+1,indexOf(@currentField,'_')),'-','/')" }, { "elmType": "div", "txtContent": "=replaceAll(substring(@currentField,indexOf(@currentField,'_')+1,indexOf(@currentField,')')),'-','/')" } ] }, { "elmType": "div", "forEach": "_period in split(substring(@currentField,0,indexOf(@currentField,'(')),',')", "style": { "width": "100%", "height": "13px", "position": "relative", "overflow": "hidden", "border-left": "1px solid", "border-right": "1px solid", "border-bottom": "=if(loopIndex('_period')==0,'','1px solid')", "border-top": "1px solid" }, "children": [ { "elmType": "div", "style": { "position": "absolute", "height": "100%", "width": "=((Number(Date(substring([$_period],indexOf([$_period],'^')+1,indexOf([$_period]+'@','@'))))-Number(Date(substring([$_period],0,indexOf([$_period],'^'))))+86400000)/(Number(Date(substring(@currentField,indexOf(@currentField,'_')+1,indexOf(@currentField,')'))))-Number(Date(substring(@currentField,indexOf(@currentField,'(')+1,indexOf(@currentField,'_'))))+86400000))*100+'%'", "left": "=((Number(Date(substring([$_period],0,indexOf([$_period],'^'))))-Number(Date(substring(@currentField,indexOf(@currentField,'(')+1,indexOf(@currentField,'_')))))/(Number(Date(substring(@currentField,indexOf(@currentField,'_')+1,indexOf(@currentField,')'))))-Number(Date(substring(@currentField,indexOf(@currentField,'(')+1,indexOf(@currentField,'_'))))+86400000))*100+'%'" }, "attributes": { "class": "ms-bgColor-themePrimary", "title": "=replaceAll(substring([$_period],0,indexOf([$_period],'^')),'-','/')+' ～ '+replaceAll(substring([$_period],indexOf([$_period],'^')+1,indexOf([$_period]+'@','@')),'-','/')" } }, { "elmType": "div", "style": { "position": "absolute", "height": "100%", "width": "=(86400000/(Number(Date(substring(@currentField,indexOf(@currentField,'_')+1,indexOf(@currentField,')'))))-Number(Date(substring(@currentField,indexOf(@currentField,'(')+1,indexOf(@currentField,'_'))))+86400000))*100+'%'", "left": "=((Number(@now)-(60*60*1000*12)-Number(Date(substring(@currentField,indexOf(@currentField,'(')+1,indexOf(@currentField,'_')))))/(Number(Date(substring(@currentField,indexOf(@currentField,'_')+1,indexOf(@currentField,')'))))-Number(Date(substring(@currentField,indexOf(@currentField,'(')+1,indexOf(@currentField,'_'))))+86400000))*100+'%'", "display": "flex", "justify-content": "center", "align-items": "center" }, "children": [ { "elmType": "div", "style": { "width": "100%", "min-width": "5px", "height": "100%" }, "attributes": { "class": "ms-bgColor-themeLight", "title": "Now" } } ] } ] } ] }, { "elmType": "div", "style": { "padding": "10px", "margin-left": "5px", "cursor": "pointer", "border-radius": "50%" }, "attributes": { "iconName": "Edit", "class": "ms-bgColor-themeLighter--hover" }, "customCardProps": { "openOnEvent": "click", "directionalHint": "topCenter", "isBeakVisible": true, "formatter": { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "padding": "10px 15px" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "row", "align-items": "center" }, "children": [ { "elmType": "div", "style": { "margin": "5px" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column" }, "children": [ { "elmType": "div", "txtContent": "[!Start.DisplayName]", "attributes": { "class": "ms-fontSize-s" } }, { "elmType": "div", "inlineEditField": "[$Start]", "style": { "border": "1px solid", "padding": "5px 10px", "border-radius": "3px", "display": "flex", "align-items": "center" }, "children": [ { "elmType": "span", "txtContent": "[$Start.displayValue]" }, { "elmType": "span", "style": { "margin-left": "8px" }, "attributes": { "iconName": "Edit" } } ] } ] } ] }, { "elmType": "div", "txtContent": "～", "style": { "margin": "5px" } }, { "elmType": "div", "style": { "margin": "5px" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column" }, "children": [ { "elmType": "div", "txtContent": "[!End.DisplayName]", "attributes": { "class": "ms-fontSize-s" } }, { "elmType": "div", "inlineEditField": "[$End]", "style": { "border": "1px solid", "padding": "5px 10px", "border-radius": "3px", "display": "flex", "align-items": "center" }, "children": [ { "elmType": "span", "txtContent": "[$End.displayValue]" }, { "elmType": "span", "style": { "margin-left": "8px" }, "attributes": { "iconName": "Edit" } } ] } ] } ] } ] }, { "elmType": "div", "style": { "display": "flex", "flex-direction": "row", "align-items": "center" }, "children": [ { "elmType": "div", "style": { "margin": "5px" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column" }, "children": [ { "elmType": "div", "txtContent": "[!Start1.DisplayName]", "attributes": { "class": "ms-fontSize-s" } }, { "elmType": "div", "inlineEditField": "[$Start1]", "style": { "border": "1px solid", "padding": "5px 10px", "border-radius": "3px", "display": "flex", "align-items": "center" }, "children": [ { "elmType": "span", "txtContent": "[$Start1.displayValue]" }, { "elmType": "span", "style": { "margin-left": "8px" }, "attributes": { "iconName": "Edit" } } ] } ] } ] }, { "elmType": "div", "txtContent": "～", "style": { "margin": "5px" } }, { "elmType": "div", "style": { "margin": "5px" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column" }, "children": [ { "elmType": "div", "txtContent": "[!_x0045_nd1.DisplayName]", "attributes": { "class": "ms-fontSize-s" } }, { "elmType": "div", "inlineEditField": "[$_x0045_nd1]", "style": { "border": "1px solid", "padding": "5px 10px", "border-radius": "3px", "display": "flex", "align-items": "center" }, "children": [ { "elmType": "span", "txtContent": "[$_x0045_nd1.displayValue]" }, { "elmType": "span", "style": { "margin-left": "8px" }, "attributes": { "iconName": "Edit" } } ] } ] } ] } ] }, { "elmType": "div", "txtContent": "If you changed the date manually instead of using the calendar, press [Enter] after changing the date.", "style": { "max-width": "300px", "text-align": "center" }, "attributes": { "class": "ms-fontSize-s" } } ] } } } ] } ] } ```

Additional Notes

• When I created the End1 column, the internal name of the column became _x0045_nd1. (I don't know why, but no matter how many times I created the column, the internal name of the column became _x0045_nd1😢) So I am using _x0045_nd1 in the code as well. Please replace _x0045_nd1 if necessary.

[gowebUSA]

Hi tecchan1107,

Thank you so much. I'll try the code tomorrow and let you know. I appreciate you.

[gowebUSA]

Hi Tecchan1107,

It looks good. We can close this task. Thank you so much.