March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount! Early Bird pricing ends December 9th.
Register NowGet certified in Microsoft Fabric—for free! For a limited time, the Microsoft Fabric Community team will be offering free DP-600 exam vouchers. Prepare now
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,
Solved! Go to 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.
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.
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.
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
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.
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.
Might be quicker if you asked the developer on Github.
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"
},
I was referring to the code in the original github, where they define the day and month x axis.
I already asked, he can't work on it now
code lines 1118 through 1139
March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount! Early Bird pricing ends December 9th.
Check out the November 2024 Power BI update to learn about new features.
User | Count |
---|---|
116 | |
85 | |
79 | |
64 | |
59 |
User | Count |
---|---|
140 | |
122 | |
105 | |
94 | |
90 |