Skip to content
Vega-Lite y Deneb en Power BI: gráficas a la medida
Empieza gratis

Diagrama de Gantt en Power BI con Deneb

Dibuja el plan de apertura de una sucursal nueva como un Gantt: una barra por tarea, de su fecha de inicio a su fecha de fin.

2 partes · 2 y 8 min

Curso gratis. Tu Maestro, una IA, .

Café La Ceiba va a abrir su séptima sucursal, en León, y el plan de trabajo vive en una tabla con tres columnas: Tarea, Inicio y Fin. Power BI carece de un diagrama de Gantt nativo en su panel de visualizaciones, pero con Deneb y puedes construirlo en unas 15 líneas de aprovechando una estructura que ya conoces.

En la página anterior usaste los canales x y x2 con la marca rule para trazar una línea entre la meta y las ventas de cada sucursal. Un diagrama de Gantt aplica esa misma pareja de canales a la marca bar (lo que la documentación de Vega-Lite llama barras de rango o ranged bars). En una gráfica de barras común, cada barra nace en el cero y crece hasta su valor; en un Gantt, cada barra empieza en la fecha de inicio de la tarea y termina en su fecha de fin.

Para describir ese comportamiento dentro de encoding necesitas tres canales:

  • x: la fecha donde arranca la barra ("field": "Inicio"), con "type": "temporal". El tipo temporal le indica a Vega-Lite que el eje horizontal es una línea de tiempo continua, de modo que el largo de cada barra sea proporcional a los días que dura la tarea. Además te permite dar formato a las etiquetas del eje por mes con "axis": { "format": "%b" }. Si declararas las fechas como nominal, Vega-Lite trataría cada fecha como texto suelto y perderías la proporción del calendario.
  • x2: la fecha donde termina la barra ("field": "Fin"). Como x2 comparte el eje horizontal con x, hereda automáticamente el tipo temporal, así que basta con indicar el nombre del campo. Si omites x2, todas las barras saldrán desde el borde izquierdo del eje hasta la fecha de Inicio.
  • y: el nombre de la actividad ("field": "Tarea"), con "type": "nominal". Por omisión, un eje nominal acomoda los textos en orden alfabético, lo que pondría Capacitación hasta arriba y desordenaría el cronograma. Al agregar "sort": { "field": "Inicio" } dentro de y, las filas se ordenan de arriba abajo según el día en que arranca cada tarea.
Plan de apertura de Café La Ceiba León. Datos inventados para el curso.

Buen lugar para parar. Después: parte 2 de 2 · 8 min

Observa lo que revela la gráfica para una junta de seguimiento. Firma del local abre el calendario en marzo. Justo después arranca Remodelación, que se extiende desde marzo hasta junio: es la tarea más larga de todo el proyecto y se encima tanto con Compra de equipo (entre abril y mayo) como con Contratación (entre mayo y junio). Luego entra Capacitación en junio y el plan cierra con Inauguración en julio. Si la remodelación del local se retrasa una semana, se mueve en cadena todo lo que está debajo. Eso es lo que un Gantt te deja ver de un vistazo cuando las barras están ordenadas por fecha de arranque.

En tu reporte de Power BI, la tabla del plan tendría las columnas Tarea, Inicio y Fin; las pones en Values y tu especificación empieza como siempre con "data": { "name": "dataset" }. En esta página, como el plan es otra tabla distinta a la de ventas, la especificación trae sus filas adentro, en data.values. Todo lo demás (mark y encoding) es idéntico.

Un detalle de Power BI al configurar tus campos: revisa que la sea de una fila por tarea, poniendo Tarea en Values como columna, no como medida, y las fechas también como columnas. Si Power BI las resume (por ejemplo, tomando el primer Inicio), el resultado es el mismo mientras haya una sola fila por tarea.

Si tu plan tiene responsables o fases, pregúntale a tu Maestro cómo agruparlos en el Gantt.

Inténtalo

En el editor de abajo tienes el plan de apertura de León a medio armar. Como falta x2, todas las barras nacen al principio del eje, y como y carece de orden, las tareas aparecen por orden alfabético. Completa los dos pasos para arreglarlo.

Este Gantt está a medias: falta x2, así que todas las barras salen del inicio del eje, y las tareas están en orden alfabético. Agrega "x2": {"field": "Fin"} al encoding. Ordena las tareas por fecha de inicio con "sort": {"field": "Inicio"} en y. Terminaste cuando la firma del local queda arriba y la inauguración abajo, cada una en sus fechas.

Tu turno

Este Gantt está a medias: falta x2, así que todas las barras salen del inicio del eje, y las tareas están en orden alfabético.

  1. Agrega "x2": {"field": "Fin"} al encoding.
  2. Ordena las tareas por fecha de inicio con "sort": {"field": "Inicio"} en y.

Terminaste cuando la firma del local queda arriba y la inauguración abajo, cada una en sus fechas.

3

Arrastra un número subrayado o haz clic en una palabra para cambiarla (o Esc y Tab).

Cómo se traduce a Altair

Altair genera este mismo JSON: chart.to_json() lo imprime. "mark": "point" es alt.Chart(df).mark_point(). Cada canal de encoding es un argumento de .encode(), por ejemplo x=alt.X("campo:Q", scale=alt.Scale(type="log")) o color="campo:N". Cada entrada de transform es una llamada como .transform_filter("datum.year == 2007").

Ejecútalo tú

Cuando tu especificación queda lista, Firma del local aparece en el primer renglón en marzo, Inauguración queda hasta abajo en julio y cada barra ocupa únicamente el tramo entre su Inicio y su Fin.

Agrega una línea para hoy

Ya con tu Gantt armado, puedes agregarle una línea vertical para marcar la fecha de hoy. Es una segunda capa con "mark": "rule" y "x": {"datum": "2026-05-20", "type": "temporal"}. Recuerda que al usar layer lo compartido, como "data", va afuera:

JSON
{  "data": { "name": "dataset" },  "layer": [    {      "mark": { "type": "bar", "cornerRadius": 3 },      "encoding": {        "x": { "field": "Inicio", "type": "temporal", "title": null, "axis": { "format": "%b" } },        "x2": { "field": "Fin" },        "y": { "field": "Tarea", "type": "nominal", "title": null, "sort": { "field": "Inicio" } }      }    },    {      "mark": "rule",      "encoding": {        "x": { "datum": "2026-05-20", "type": "temporal" }      }    }  ]}
Gantt con una segunda capa que marca una fecha de corte con rule, listo para pegar en Deneb.

Una buena versión con esa línea vertical deja ver de un vistazo qué tareas ya deberían haber terminado (Firma del local y Compra de equipo, que quedan a la izquierda de la línea) y cuáles siguen en curso (Remodelación y Contratación, que la línea atraviesa). Si pruebas la segunda capa en el editor y algo falla, compártele tu JSON a tu Maestro.

Comprueba lo que sabes: Tu Gantt dibuja todas las barras desde el inicio del eje, aunque cada tarea empieza en una fecha distinta. ¿Qué falta?