Deneb - David Bacci Gantt Chart - How to modify daily timeline to monthly?

[Danny2020]

Hi everyone,

I applied David's Bacci Gantt Chart via Deneb app from the pbix available at:

https://github.com/PBI-David/Deneb-Showcase/tree/main/Gantt%20Chart

The Gantt chart has a daily timeline is shown as follows:

I've been modifiying the JSON / VEGA script with no luck. Does anybody know how to get a monthly timeline?

Thank you,

[Danny2020 · Accepted solution]

Thanks @lbendlin . I modified in multiple times the mentioned lines

 "size": {"signal": "pow( min(y_step,x_step),1.3)"}
}
}
}
],
"axes": [
{
"description": "Day axis",
"ticks": true,
"labelPadding": -12,
"scale": "xDays",
"tickSize": 15,
"orient": "top",
"bandPosition": 0,
"grid": false,
"zindex": 1,
"encode": {
"labels": {
"update": {
"text": [
{
"signal": "timeFormat(timeParse(datum.label,'%d/%m/%y'),'%d')"

The first idea I had was to change '%d to %m, then changed other lines but not successful. I also tried to change the xDays definition.. Unfortunately I don't have too much knowledge of JavaScript.

[nl_nom · Accepted solution]

Not a direct answer to your question but it might be usefull, I have been editing this code for a few days and adding several elements to it. My javascript knowledge was zero before starting so forgive me for any obvious inefficient coding.

What I have done is add several other parts in the axis and edit already existing ones to accomodate for a more compact axis, the entire axis part is now replaced by:

"axes": [
        {
          "description": "Day axis",
          "ticks": true,
          "labelPadding": 0,
          "scale": "xDays",
          "tickSize": 5,
          "orient": "top",
          "bandPosition": 0,
          "grid": false,
          "zindex": 1,
          "encode": {
            "labels": {
              "update": {
                "text": [{"value": ""}]
              }
            }
          }
        },
        {
          "description": "Week axis",
          "scale": "xDays",
          "domain": false,
          "orient": "top",
          "offset": 0,
          "tickSize": 21,
          "labelFontSize": 12,
          "labelPadding": -15,
          "bandPosition": 1,
          "grid": false,
          "zindex": 2,
          "encode": {
            "ticks": {
              "update": {
                "strokeOpacity": [
                  {
                    "test": "timeFormat(timeParse(datum.label, '%d/%m/%y'), '%w') == 0",
                    "value": 1
                  },
                  {"value": 0}
                ]
              }
            },
            "labels": {
              "update": {
                "text": [
                  {
                    "test": "timeFormat(timeParse(datum.label, '%d/%m/%y'), '%w') == 4",
                    "signal": "timeFormat(timeParse(datum.label, '%d/%m/%y'), '%V')"
                  },
                  {"value": ""}
                ]
              }
            }
          }
        },
        {
          "description": "Month axis",
          "scale": "xDays",
          "domain": true,
          "orient": "top",
          "offset": 21,
          "tickSize": 17,
          "labelFontSize": 12,
          "labelPadding": -15,
          "bandPosition": 0,
          "grid": false,
          "zindex": 0,
          "encode": {
            "domain": {
              "update": {
                "y": {"value": 0},
                "stroke": {
                  "value": "black"
                },
                "strokeWidth": {
                  "value": 1
                }
              }
            },
            "ticks": {
              "update": {
                "strokeOpacity": [
                  {
                    "test": "timeFormat(timeParse(datum.label,'%d/%m/%y'),'%d')   == '01'",
                    "value": 1
                  },
                  {"value": 0}
                ]
              }
            },
            "labels": {
              "update": {
                "text": [
                  {
                    "test": "timeFormat(timeParse(datum.label,'%d/%m/%y'),'%d')   == '15'",
                    "signal": "timeFormat(timeParse(datum.label,'%d/%m/%y'),'%B')"
                  },
                  {"value": ""}
                ]
              }
            }
          }
        },
        {
          "description": "Year axis",
          "scale": "xDays",
          "domain": true,
          "orient": "top",
          "offset": 38,
          "tickSize": 17,
          "labelFontSize": 12,
          "labelPadding": -16,
          "bandPosition": 0,
          "grid": false,
          "zindex": 3,
          "encode": {
            "domain": {
              "update": {
                "y": {"value": 0},
                "stroke": {
                  "value": "black"
                },
                "strokeWidth": {
                  "value": 1
                }
              }
            },
            "ticks": {
              "update": {
                "strokeOpacity": [
                  {
                    "test": "timeFormat(timeParse(datum.label, '%d/%m/%y'), '%j') == 1",
                    "value": 1
                  },
                  {"value": 0}
                ]
              }
            },
            "labels": {
              "update": {
                "text": [
                  {
                    "test": "timeFormat(timeParse(datum.label, '%d/%m/%y'), '%j') == 183",
                    "signal": "timeFormat(timeParse(datum.label, '%d/%m/%y'), '%Y')"
                  },
                  {"value": ""}
                ]
              }
            }
          }
        },
        {
          "description": "Year Axis Domain Line",
          "scale": "xDays",
          "domain": true,
          "offset": 55,
          "orient": "top",
          "tickSize": 0,
          "labelPadding": 0,
          "labelFontSize": 0,
          "bandPosition": 0,
          "grid": false,
          "zindex": 3,
          "encode": {
            "domain": {
              "update": {
                "stroke": {
                  "value": "black"
                },
                "strokeWidth": {
                  "value": 1
                }
              }
            }
          }
        },
        {
          "scale": "y",
          "orient": "left",
          "encode": {
            "ticks": {
              "update": {
                "x2": {
                  "signal": "-taskColumn-startColumn-endColumn-daysColumn-progressColumn-(columnPadding*5)-15"
                }
              }
            }
          },
          "tickColor": "#f1f1f1",
          "bandPosition": 1.35,
          "labels": false,
          "title": "",
          "ticks": true,
          "zindex": 0
        }
      ]
    }
  ]

 All new axis components are scaled of the xDays scale to keep it simple, you can now easily alter the width of the axis by adjusting the x_step signal on line 13. You might also need a bit of adjusting to dependency lines/arrow offsets to keep them in the right place.

[WMA]

This is working perfect, can it be modified to cater quarters in there like axis would be year, quarter, month as my data range is too long

[Danny2020]

Thank you @nl_nom , your approach works.

A similar one I applied is editting directly line 13, reducing x  value to 10, and removing the lines that contains the days boxes.

[Danny2020 · Accepted solution]

Thanks @lbendlin . I modified in multiple times the mentioned lines

 "size": {"signal": "pow( min(y_step,x_step),1.3)"}
}
}
}
],
"axes": [
{
"description": "Day axis",
"ticks": true,
"labelPadding": -12,
"scale": "xDays",
"tickSize": 15,
"orient": "top",
"bandPosition": 0,
"grid": false,
"zindex": 1,
"encode": {
"labels": {
"update": {
"text": [
{
"signal": "timeFormat(timeParse(datum.label,'%d/%m/%y'),'%d')"

The first idea I had was to change '%d to %m, then changed other lines but not successful. I also tried to change the xDays definition.. Unfortunately I don't have too much knowledge of JavaScript.

[lbendlin]

Might be quicker if you asked the developer on Github.

[Danny2020]

Thanks @lbendlin. I modified lines 1115 to 1125 as follows, with no noticeable change in the chart. Any ideas?

{
"name": "fills",
"description": "Percent complete for each phase",
"type": "rect",
"clip": true,
"encode": {
"update": {
"x": {
"signal": "1"
},

[lbendlin]

I was referring to the code in the original github, where they define the day and month x axis.

[Danny2020]

I already asked, he can't work on it now

[lbendlin]

code lines 1118 through 1139