📅
Diagrama de Gantt
Plantilla de diagrama de Gantt, adaptada de Vega-Lite y personalizada para Deneb en Power BI. Incluye etiquetas dentro de las barras con la duración de cada tarea y un título descriptivo para facilitar la lectura. Las tareas se ordenan en el eje Y, con barras en verde oscuro y esquinas redondeadas para un aspecto moderno. Además, el cross-filter funciona por completo, lo que hace este gráfico aplicable a cualquier proceso que requiera seguir los tiempos y la secuencia de las actividades.
Vega-Lite gantt intermedio
✓ Cross-filter
✓ Tooltip
✓ Context menu
✓ Selección
Vista previa en vivo
Render con datos de muestra · Vega/Vega-Lite🖱️ Cross-filter en vivo — haz clic en una marca y las demás se filtran/atenúan aquí mismo (runtime de Deneb reutilizado, MIT). Igual que en Power BI.
Cargando vista previa…
Vista previa renderizada con el runtime de Deneb · MIT © Daniel Marsh-Patrick
🧩 Campos que espera
-
__0__Task texto -
__1__End_Day número medida -
__2__Start_Day número medida -
__3__Task_Order número medida -
__4__Duration número medida
Arrastra tus campos a Values en este orden.
🎯 Técnica
- Motor
- Vega-Lite 5.20.1
- Marks
- bar, text
Cómo usarlo en Power BI
- Agrega el visual Deneb a tu reporte e ingresa a su editor.
- Arrastra tus campos a Values en este orden: Task , End_Day , Start_Day , Task_Order , Duration .
- Pega el spec (botón «Copiar spec» arriba) en el editor JSON de Deneb.
- Mapea tus columnas y ajusta a tu gusto. La interactividad nativa ya viene configurada.
Ver el spec Vega-Lite completo
spec.vega-lite.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"usermeta": {
"information": {
"uuid": "a1aa3117-60f0-4be2-9c86-992c757746f6",
"generated": "2024-08-16T03:43:41.186Z",
"previewImageBase64PNG": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
"name": "Gantt Chart",
"description": "This Gantt chart template, adapted from Vega-Lite and customized for Deneb in Power BI, provides a clear and functional visualization.\nAuthor: Cristobal Salcedo Beltran. Contact: contacto@csalcedodatabi.com.",
"author": "Cristobal Salcedo Beltran"
},
"deneb": {
"build": "1.7.1.0",
"metaVersion": 1,
"provider": "vegaLite",
"providerVersion": "5.20.1"
},
"interactivity": {
"tooltip": true,
"contextMenu": true,
"selection": true,
"selectionMode": "simple",
"highlight": false,
"dataPointLimit": 50
},
"config": "{\r\n \"view\": {\r\n \"stroke\": \"transparent\"\r\n },\r\n \"background\": \"transparent\",\r\n \"axisX\": {\r\n \"orient\": \"bottom\",\r\n \"offset\": 5,\r\n \"grid\": true,\r\n \"tickRound\": true,\r\n \"labelFontSize\": 14,\r\n \"tickCount\": 2\r\n },\r\n \"axisY\": {\r\n \"domain\": false,\r\n \"tickWidth\": 46,\r\n \"tickSize\": 300,\r\n \"tickColor\": {\r\n \"expr\": \"split(datum.value,'|')[0]=='on'?'#08534b': '#eee'\"\r\n },\r\n \"labelColor\": {\r\n \"expr\": \"split(datum.value,'|')[0]=='on'?'white': 'black'\"\r\n },\r\n \"offset\": 15,\r\n \"grid\": false,\r\n \"tickRound\": true,\r\n \"labelFontSize\": 18,\r\n \"labelAlign\": \"left\",\r\n \"labelLimit\": 370,\r\n \"labelPadding\": -4,\r\n \"titleAlign\": \"left\",\r\n \"titleAnchor\": \"start\",\r\n \"titleAngle\": 0,\r\n \"titleFontSize\": 20,\r\n \"titlePadding\": -12,\r\n \"titleY\": -5\r\n }\r\n}",
"dataset": [
{
"key": "__0__",
"name": "Task",
"description": "",
"kind": "column",
"type": "text"
},
{
"key": "__1__",
"name": "End_Day",
"description": "",
"kind": "measure",
"type": "numeric"
},
{
"key": "__2__",
"name": "Start_Day",
"description": "",
"kind": "measure",
"type": "numeric"
},
{
"key": "__3__",
"name": "Task_Order",
"description": "",
"kind": "measure",
"type": "numeric"
},
{
"key": "__4__",
"name": "Duration",
"description": "",
"kind": "measure",
"type": "numeric"
}
]
},
"description": "This Gantt chart template, adapted from Vega-Lite and customized for Deneb in Power BI, provides a clear and functional visualization. It includes labels within the bars showing the duration of each task and a descriptive title for easy understanding. Tasks are ordered on the Y-axis, with bars styled in dark green and rounded corners for a modern look. Additionally, cross-filtering interactivity is fully operational, making this chart applicable to any process that requires tracking the timing and sequence of activities. Author: Cristobal Salcedo Beltran. Contact: contacto@csalcedodatabi.com.",
"data": {
"name": "dataset"
},
"transform": [
{
"calculate": "datum.__selected__+'|'+ datum['__0__']",
"as": "selectedTask"
}
],
"encoding": {
"y": {
"field": "selectedTask",
"type": "ordinal",
"axis": {
"title": "__0__",
"labelExpr": "split(datum.value,'|')[1]"
},
"sort": {
"field": "__3__"
}
},
"x": {
"field": "__2__",
"type": "quantitative"
},
"x2": {
"field": "__1__",
"type": "quantitative",
"title": ""
}
},
"layer": [
{
"name": "Mark_barLegend",
"mark": {
"type": "bar",
"color": "#08534b",
"height": 20,
"width": 10
},
"encoding": {
"x": {
"value": {
"expr": "width/2.5"
}
},
"x2": {
"value": {
"expr": "width/2.3"
}
},
"y": {
"value": -25
}
}
},
{
"name": "Mark_textLegend",
"mark": {
"type": "text",
"align": "left",
"color": "#020202",
"fontSize": 25
},
"encoding": {
"text": {
"value": "__4__"
},
"x": {
"value": {
"expr": "width/2.2"
}
},
"y": {
"value": -25
}
}
},
{
"name": "Mark_barChart",
"mark": {
"type": "bar",
"color": "#08534b",
"cornerRadiusTopRight": 5,
"cornerRadiusBottomRight": 5
},
"encoding": {
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0.3
},
"value": 1
}
}
},
{
"name": "Mark_textChart",
"mark": {
"type": "text",
"fontSize": 15,
"align": "left",
"color": "#fff",
"dx": 8
},
"encoding": {
"text": {
"value": {
"expr": "datum['__4__'] +' days'"
}
}
}
}
],
"title": {
"text": "Hiring Process Gantt Chart - 49 Days Overview",
"fontSize": 25,
"anchor": "middle",
"frame": "bounds",
"offset": 15
}
}