Hey everyone,
I'm trying to publish a Deneb / Vega-Lite visual which I've created in PowerBI Desktop to PowerBI Service.
Basically, my idea was to include Bar charts inside a hconcat-element, like so:
![Screenshot 2024-08-22 155644.png]( "Screenshot 2024-08-22 155644.png")
My Code for this looks like this:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A matrix with multiple columns including stacked bar charts for specific columns.",
"data": {
"name": "dataset"
},
"transform": [
{
"fold": [
"Sum of datenanbindung_todo_percentage",
"Sum of datenanbindung_inprogress_percentage",
"Sum of datenanbindung_blocked_percentage",
"Sum of datenanbindung_done_percentage"
],
"as": ["da_status", "da_percentage"]
},
{
"fold": [
"Sum of pareto_todo_percentage",
"Sum of pareto_inprogress_percentage",
"Sum of pareto_blocked_percentage",
"Sum of pareto_done_percentage"
],
"as": ["pa_status", "pa_percentage"]
},
{
"fold": [
"Sum of sollzustand_todo_percentage",
"Sum of sollzustand_inprogress_percentage",
"Sum of sollzustand_blocked_percentage",
"Sum of sollzustand_done_percentage"
],
"as": ["sz_status", "sz_percentage"]
}
],
"hconcat": [
{
"title": "",
"mark": {
"type": "text",
"font": "Segue UI",
"fontWeight": 100,
"align": "right"
},
"encoding": {
"text": {
"field": "Summary",
"type": "nominal"
},
"row": {
"field": "Summary",
"type": "ordinal",
"title": null, // removes the y-axis description ("Summary"
"header": {"labels": false}
}
}
},
{
"title": {
"text": "IST-Zustand",
"align": "center"
},
"mark": {
"type": "circle",
"align": "right"
},
"encoding": {
"text": {"field": "IST-Zustand", "type": "nominal"},
"row": {
"field": "Summary",
"type": "nominal",
"title": null, // removes the y-axis description ("Summary")
"header": {"labels": false}
},
"color": {
"condition": [
{"test": "datum['IST-Zustand'] === 'Done'", "value": "green"},
{"test": "datum['IST-Zustand'] === 'In Progress'", "value": "yellow"},
{"test": "datum['IST-Zustand'] === 'Blocked'", "value": "red"}
],
"value": "grey" // Default color if no condition matches
},
"size": {"value": 200} // Adjust size as needed
}
},
{
"title": "Datenanbindung",
"mark": "bar",
"height": 18,
"width": 130,
"encoding": {
"row": {
"field": "Summary",
"title": null, // removes the y-axis description ("Summary"
"type": "nominal",
"header": {"labels": false}
},
"x": {
"field": "da_percentage",
"type": "quantitative",
"stack": "normalize",
"axis": {
"title": "",
"grid": false,
"labels": false,
"domain": false,
"ticks": false // labels, domain, ticks to false removes the line displaying percentages from underneath the bar chart
}
},
"color": {
"field": "da_status",
"type": "nominal",
"scale": {
"domain": ["Sum of datenanbindung_todo_percentage", "Sum of datenanbindung_inprogress_percentage", "Sum of datenanbindung_blocked_percentage", "Sum of datenanbindung_done_percentage"],
"range": ["grey", "yellow", "red", "green"]
},
"legend": null
}
}
},
{
"title": {
"text": "Sollzustand"
},
"mark": {
"type": "bar",
"align": "center"
},
"height": 18,
"width": 130,
"encoding": {
"row": {
"field": "Summary",
"title": null, // removes the y-axis description ("Summary"
"type": "nominal",
"header": {"labels": false}
},
"x": {
"field": "sz_percentage",
"type": "quantitative",
"stack": "normalize",
"axis": {
"title": "",
"grid": false,
"labels": false,
"domain": false,
"ticks": false // labels, domain, ticks to false removes the line displaying percentages from underneath the bar chart
}
},
"color": {
"field": "sz_status",
"type": "nominal",
"scale": {
"domain": ["Sum of sollzustand_todo_percentage", "Sum of sollzustand_inprogress_percentage", "Sum of sollzustand_blocked_percentage", "Sum of sollzustand_done_percentage"],
"range": ["grey", "yellow", "red", "green"]
},
"legend": null
}
}
},
{
"title": "Pareto",
"mark": "bar",
"height": 18,
"width": 130,
"encoding": {
"row": {
"field": "Summary",
"title": null, // removes the y-axis description ("Summary"
"type": "nominal",
"header": {"labels": false}
},
"x": {
"field": "pa_percentage",
"type": "quantitative",
"stack": "normalize",
"axis": {
"title": "",
"grid": false,
"labels": false,
"domain": false,
"ticks": false // labels, domain, ticks to false removes the line displaying percentages from underneath the bar chart
}
},
"color": {
"field": "pa_status",
"type": "nominal",
"scale": {
"domain": ["Sum of pareto_todo_percentage", "Sum of pareto_inprogress_percentage", "Sum of pareto_blocked_percentage", "Sum of pareto_done_percentage"],
"range": ["grey", "yellow", "red", "green"]
},
"legend": null
}
}
},
{
"title": {
"text": "Abnahme FB",
"align": "center"
},
"mark": "circle",
"encoding": {
"text": {"field": "IST-Zustand", "type": "nominal"},
"row": {
"field": "Summary",
"type": "nominal",
"title": null, // removes the y-axis description ("Summary"
"header": {
"labels": false
}
},
"color": {
"condition": [
{"test": "datum['Abnahme-FB'] === 'Done'", "value": "green"},
{"test": "datum['Abnahme-FB'] === 'In Progress'", "value": "yellow"},
{"test": "datum['Abnahme-FB'] === 'Blocked'", "value": "red"}
],
"value": "grey" // Default color if no condition matches
},
"size": {"value": 200} // Adjust size as needed
}
},
{
"title": "Kommentar",
"mark": {
"type": "text",
"align": "left"
},
"encoding": {
"text": {"field": "kommentar", "type": "nominal"},
"row": {
"field": "Summary",
"type": "nominal",
"title": null, // removes the y-axis description ("Summary"
"header": {"labels": false}
}
}
}
],
"config": {
"view": {
"continuousHeight": 20, // Adjust this value to make the rows smaller
"stroke": "transparent" // removes the border lines for a cleaner look
},
"text": {
"fontSize": 12, // Adjust this value for text size, if needed
"lineHeight": 15 // Adjust this value for text line height
},
"facet": {
"spacing": 3 // Adjust this value to reduce spacing between rows
}
}
}
Now onto my problem: In PowerBI Desktop, this works just fine and displays correctly. But when I publish this to PowerBI Service, the Bar charts just disappear. The rest of the hconcat table is displayed just fine, it's really just the bar charts that are missing.
Has anyone encountered a problem like this before and knows a solution?
