tecchan1107
commented
9 months ago I created a column formatting that allows you to set the start and end dates of the Gantt chart to any value. Please try it out if you like. https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-gantt-chart
Sample (which sample are you talking about)
generic-yearly-gantt-chart-with-today.json
Suggestion (the more details, the better)
The current chart doesn't look great if the project spans years. One possible solution is using a 2 year view. Another possible solution is shifting 6 months at a time instead of 1 year at a time. The 2 year solution is better if you have a lot of screen space, and a lot of projects that have a duration greater than 6 months. But sliding by 6 months was a better solution for me. I was able to modify the code to get it to work.
Note, instead of using Start and End I am using: Project_Start_Date and Go_Live_Date
Here is the code:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "margin": "5px" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "row", "justify-content": "space-between", "width": "100%", "margin-bottom": "3px" }, "attributes": { "class": "ms-fontColor-themePrimary ms-fontWeight-bold" }, "children": [ { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "= if(getMonth([$Project_Start_Date])< 7,'1','7')" }, { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "= if(getMonth([$Project_Start_Date])< 7,'3','9')" }, { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "= if(getMonth([$Project_Start_Date])< 7,'5','11')" }, { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "= if(getMonth([$Project_Start_Date])< 7,'7','1')" }, { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "= if(getMonth([$Project_Start_Date])< 7,'9','3')" }, { "elmType": "span", "style": { "width": "100%", "text-align": "left" }, "txtContent": "= if(getMonth([$Project_Start_Date])< 7,'11','5')" } ] }, { "elmType": "div", "style": { "display": "flex", "width": "100%", "border": "2px solid", "height": "20px" }, "attributes": { "class": "ms-fontColor-themePrimary" }, "children": [ { "elmType": "div", "style": { "position": "relative", "cursor": "pointer", "max-width": "=((Number(Date('' + (getYear([$Project_Start_Date])+if(getMonth([$Project_Start_Date])< 7,0,1)) + if(getMonth([$Project_Start_Date])< 7,'/12/31','/06/30'))) - Number(Date([$Project_Start_Date]))) / (Number(Date('' + getYear([$Project_Start_Date]) + '/12/31')) - Number(Date('' + getYear([$Project_Start_Date]) + '/01/01')))) * 100 + '%'", "width": "=((Number(Date([$Go_Live_Date])) - Number(Date([$Project_Start_Date]))) / (Number(Date('' + getYear([$Project_Start_Date]) + '/12/31')) - Number(Date('' + getYear([$Project_Start_Date]) + '/01/01')))) * 100 + '%'", "left": "=((Number(Date([$Project_Start_Date])) - Number(Date('' + getYear([$Project_Start_Date]) + if(getMonth([$Project_Start_Date])< 7,'/01/01','/07/01')))) / (Number(Date('' + getYear([$Project_Start_Date]) + '/12/31')) - Number(Date('' + getYear([$Project_Start_Date]) + '/01/01')))) * 100 + '%'" }, "attributes": { "class": "ms-bgColor-themePrimary ms-bgColor-themeTertiary--hover" }, "customCardProps": { "directionalHint": "topCenter", "isBeakVisible": true, "openOnEvent": "hover", "formatter": { "elmType": "div", "style": { "display": "flex", "align-items": "center", "justify-content": "center", "width": "250px", "height": "30px", "margin": "10px", "font-weight": "bold" }, "attributes": { "class": "ms-fontSize-l" }, "children": [ { "elmType": "div", "children": [ { "elmType": "span", "txtContent": "[$Project_Start_Date.displayValue]" }, { "elmType": "span", "style": { "margin-left": "5px", "margin-right": "5px" }, "txtContent": "-" }, { "elmType": "span", "txtContent": "[$Go_Live_Date.displayValue]" } ] } ] } } } ] }, { "elmType": "div", "style": { "display": "flex", "width": "100%", "border": "1px solid", "height": "8px" }, "attributes": { "class": "ms-fontColor-themePrimary" }, "children": [ { "elmType": "div", "style": { "position": "relative", "width": "= '1' + '%'", "left": "= floor(((Number(@now)-Number(Date('' + getYear([$Project_Start_Date]) + if(getMonth([$Project_Start_Date])< 7,'/1/1','/7/1'))))/(1000*60*60*24))/365 * 100) + '%'" }, "attributes": { "class": "ms-bgColor-sharedRed10" } } ] } ] }