I am currently facing a problem with a custom Gantt chart in vega lite (Deneb power bi visual) I made based on the idea for a gantt chart from a stackoverflow topic:
Gantt chart example using vega-lite
Everything works correctly, I just have a problem when I have a lot of tasks (I use it to visualise tasks in a project, not different projects, principle is the same though).
I want the height of each bar to be dependent on a data value in a column from the dataset that I pass a long from a PowerBI filter. I prefer to do it this way so I can manipulate the height directly from the PowerBI report. (This is to make it fit the screen and avoid the scroll bar, which causes you to not see the scale/axis anymore)
I can't make it work that the height: {step: } property can be a dynamic value. I can only insert an actual number (14 in the code snippet below).
In the sample dataset, I would like to use the Schaalwaarde column value as the step value. (it is a powerBI measure).
{
"data": {"name": "dataset"},
"height": {"step": 14},
"width": "container",
"transform": [
{
"calculate": "now()",
"as": "now_field"
}
],
"layer": [
{
"mark": {
"type": "rule",
"color": "red",
"size": 1
},
"encoding": {
"x": {
"field": "now_field",
"type": "temporal"
}
}
},
{
"layer": [
{
"params": [
{
"name": "grid",
"select": "interval",
"bind": "scales"
}
],
"mark": {
"type": "bar",
"cornerRadius": 15,
"height": {"band": 0.7}
},
"encoding": {
"opacity": {
"condition": {
"test": "datum['Level'] == 2",
"value": 0.5
},
"value": 0
},
"color": {
"field": "WPnummer",
"scale": {
"domain": [
0,
1,
2,
3,
4,
5,
6,
7,
8
],
"range": [
"#E4002B",
"#83D0F5",
"#414959",
"#6C223C",
"#ADB30A",
"#F39200",
"#F3BEB7",
"#454D6B"
]
}
}
}
},
{
"mark": {
"type": "text",
"align": "right",
"dx": -5
},
"encoding": {
"text": {
"field": "TaakDuur"
},
"opacity": {
"condition": {
"test": "datum['Level'] == 2",
"value": 1
},
"value": 0
},
"color": {
"field": "WPnummer",
"scale": {
"domain": [
0,
1,
2,
3,
4,
5,
6,
7,
8
],
"range": [
"#E4002B",
"#83D0F5",
"#414959",
"#6C223C",
"#ADB30A",
"#F39200",
"#F3BEB7",
"#454D6B"
]
}
}
}
},
{
"mark": {
"type": "bar",
"height": {"band": 1}
},
"encoding": {
"opacity": {
"condition": {
"test": "datum['Level'] == 1",
"value": 1
},
"value": 0
},
"color": {
"field": "WPnummer",
"scale": {
"domain": [
0,
1,
2,
3,
4,
5,
6,
7,
8
],
"range": [
"#E4002B",
"#83D0F5",
"#414959",
"#6C223C",
"#ADB30A",
"#F39200",
"#F3BEB7",
"#454D6B"
]
}
}
}
},
{
"mark": {
"type": "text",
"align": "center",
"color": "white"
},
"encoding": {
"text": {
"field": "TaakDuur"
},
"opacity": {
"condition": {
"test": "datum['Level'] == 1",
"value": 1
},
"value": 0
},
"x": {
"field": "mid_gantt",
"type": "temporal"
}
}
},
{
"mark": {
"type": "point",
"shape": "diamond",
"size": 150
},
"encoding": {
"opacity": {
"condition": {
"test": "datum['MijlpaalBool'] == true",
"value": 1
},
"value": 0
},
"color": {
"field": "WPnummer",
"scale": {
"domain": [
0,
1,
2,
3,
4,
5,
6,
7,
8
],
"range": [
"#E4002B",
"#83D0F5",
"#414959",
"#6C223C",
"#ADB30A",
"#F39200",
"#F3BEB7",
"#454D6B"
]
}
}
}
},
{
"mark": {
"type": "text",
"align": "right",
"dx": -10
},
"encoding": {
"text": {
"field": "TaakDuur"
},
"opacity": {
"condition": {
"test": "datum['MijlpaalBool'] == true",
"value": 1
},
"value": 0
}
}
},
{
"mark": {
"type": "bar",
"height": {"band": 1.2}
},
"encoding": {
"opacity": {
"condition": {
"test": "datum['Sort'] == 0",
"value": 1
},
"value": 0
},
"color": {
"field": "WPnummer",
"scale": {
"domain": [
0,
1,
2,
3,
4,
5,
6,
7,
8
],
"range": [
"#E4002B",
"#83D0F5",
"#414959",
"#6C223C",
"#ADB30A",
"#F39200",
"#F3BEB7",
"#454D6B"
]
}
}
}
},
{
"mark": {
"type": "text",
"align": "center",
"color": "white"
},
"encoding": {
"text": {
"field": "TaakDuur"
},
"opacity": {
"condition": {
"test": "datum['Sort'] == 0",
"value": 1
},
"value": 0
},
"x": {
"field": "mid_gantt",
"type": "temporal"
}
}
}
],
"encoding": {
"x": {
"field": "Startdatum_gantt",
"type": "temporal",
"axis": {
"title": null,
"grid": true,
"format": "%d%b%y",
"orient": "bottom"
}
},
"y": {
"field": "TaakDuur",
"type": "ordinal",
"sort": {"field": "Sort"},
"axis": {
"title": null,
"grid": false,
"labels": false,
"tickBand": "extent"
}
},
"x2": {
"field": "Einddatum_gantt",
"type": "temporal"
},
"tooltip": [
{"field": "Taak"},
{"field": "Startdatum"},
{"field": "Einddatum"},
{"field": "Duur"}
]
}
}
]
}
I managed to do this with a bind parameter, but I prefer not to do it this way, I want to do it from a powerBI filter (because I use the visual embedded in ppt and the vega slider ruins it a bit). My backup plan is just to make 5 different reports with 5 different step heights, but this seems a little retarded to me and I assume there should be an easy solution. I just can't figure out how to reference the data in a column from my dataset in height {step}.
I also want to avoid using autosize or height: container because if there are not a lot of tasks in my project it will stretch the entire visual in a weird way.
Any ideas?
