API de Google Charts: ¿Agregar fila en blanco a la línea de tiempo?

Estoy tratando de crear una lista de personas que han trabajado hoy, con sus tiempos de inicio y finalización. Esto no es un problema para las personas que tienen registros, pero no puedo averiguar cómo obtener el gráfico de la línea de tiempo de Google para imprimir un nombre de alguien y luego no hay entradas en el gráfico.

Aquí está la documentación, pero no dice nada sobre las entradas en blanco:

https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline#BarsOneRow

Aquí hay una muestra de mi código:

  google.load("visualization", "1", {packages:["timeline"]}); google.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('timeline'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Employee' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Spiderman', new Date(2015, 04, 07, 04, 43, 49), new Date(2015, 04, 07, 06, 45, 05), ], [ 'Iron Man', new Date(2015, 04, 07, 04, 40, 53), new Date(2015, 04, 07, 08, 45, 47), ], [ 'Spiderman', new Date(2015, 04, 07, 09, 10, 19), new Date(2015, 04, 07, 13, 22, 02), ], ]); var options = { timeline: { singleColor: '#00f', colorByRowLabel: true, groupByRowLabel: true, }, backgroundColor: '#ffffff' }; chart.draw(dataTable, options); }  

¿Qué debo hacer para agregar una fila para Superman, a pesar de que no trabajó ese día?

No parece haber alguna forma integrada de agregar entradas nulas a las líneas de tiempo de Google. Pero todavía puede eliminar el elemento rect que muestra una fila en blanco escribiendo algún código adicional

Paso 1 Agregue la fecha de inicio y la fecha de finalización con los mismos valores de fecha para el empleado que no trabaja para que la caja rectangular azul tenga un ancho mínimo.

Paso 2 Ahora, ya que su caja rectangular correspondiente al empleado que no trabaja tiene un ancho mínimo. Así que puedes agregar este código para desaparecer todos los elementos rect con un ancho mínimo.

 (function(){ //anonymous self calling function to prevent variable name conficts var el=container.getElementsByTagName("rect"); //get all the descendant rect element inside the container var width=100000000; //set a large initial value to width var elToRem=[]; //element would be added to this array for removal for(var i=0;i 

NOTA :

Solo use este código después de asegurarse de que haya alguna entrada en blanco, ya que siempre desaparecerá el elemento rect con el ancho mínimo, sin importar si representa una entrada en blanco o no

Demo de trabajo

Agregando a la respuesta de bugwheels94 (porque no puedo agregar un comentario)

Puede usar el rol de estilo no documentado para agregar un color a cada barra ( http://jsfiddle.net/re4qo6gs/ ) y usar un color determinado para hacer que sus barras “ficticias” se eliminen.

modificando su codigo

 for(var i=0;i 

Puede usar las Opciones de Google Chart para establecer el estilo de la serie renderizada agregando una columna de Función para Estilo ( https://developers.google.com/chart/interactive/docs/roles ).

P.ej

 // original column definitions... // be sure to configure columns correctly (see comments below) dataTable.addColumn({ type: 'string', role: 'style' }); // ... // after adding other rows // ... // create a style option to set opacity to 0 let blankStyle = "opacity: 0"; // use some default date for date columns let defaultDate = someDefaultDate; dataTable.addRow(['Superman', blankDate, blankDate, blankStyle]); 

Demo de trabajo

Cosas a tener en cuenta:

  • Debe usar una fecha ficticia que exista dentro de los rangos de fechas reales que se muestran, de lo contrario, el Gráfico se procesará para adaptarse a la fecha especificada.
  • El orden de las columnas de Google charts es un poco frágil. El estilo parece funcionar en el ejemplo dado en la demostración de trabajo, pero no en otros ordenamientos de columnas. También necesita la columna Nombre presente
  • Es probable que también desee agregar una columna de información sobre herramientas y configurarlo para que no se muestre para detener la aparición de información sobre herramientas para datos que realmente no existen

Me parece que la columna de roles de estilo es muy útil y recomiendo su uso en la manipulación de DOM posterior a la renderización. También es la forma superior de controlar los colores de la serie, ya que otros enfoques documentados no funcionan para todas las situaciones. A menudo se lo denomina “rol de estilo no documentado”, pero de hecho está documentado aquí https://developers.google.com/chart/interactive/docs/roles .