Google Charts API: Add Blank Row to Timeline?

Question

I'm trying to create a list of people who have worked today, with their start and end times. This is no problem for people who have records, but I can't figure out how to get Google's Timeline chart to print a name of someone and then no entries on graph.

Here is the documentation, but it says nothing about blank entries:

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

Here is a sample of my code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
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);
}
</script>

What do I need to do to add a row for Superman, even though he didn't work that day?

Answer 1

You can use Google Chart's Options to set the style of the series rendered by adding a Role column for Style (https://developers.google.com/chart/interactive/docs/roles).

E.g.

// 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]);

Working demo

Things to note:

• You should use a dummy date that exists within your actual date ranges being displayed, otherwise the Chart will be rendered to accommodate the specified date.
• Google charts column ordering is a bit fragile. Style seems to work in the example given in the working demo, but not other column orderings. It also needs the Name column present
• You probably want to also add a tooltip column and set it to not display to stop a tooltip appearing for data that doesn't really exist

I find the Style Role Column very useful and recommend it's usage over post render DOM manipulation. It's also the superior way of controlling the series colours as other documented approaches do not work for all situations. It's often refered to as the "undocumented style role" but it is in fact documented here https://developers.google.com/chart/interactive/docs/roles .

Answer 2

Adding to bugwheels94 Response (Because i cannot add a comment)

You can use the undocumented style role to add a color to each bar ( http://jsfiddle.net/re4qo6gs/ ) and use a certain color to make your "dummy" bars to remove.

modifying his code.

for(var i=0;i<elToRem.length;i++){ // now iterate JUST the elements to remove
  if (elToRem.getAttribute("fill") == "#YourDUMMYColor"){  
    elToRem[i].setAttribute("fill","none"); //make invisible all the rect element which has minimum width
    elToRem[i].setAttribute("stroke","none"); // Also remove the stroke added by the style.
};

Answer 3

There does not seem to be some built-in way to add null entries to Google Timelines.But still you can remove the rect element which are showing blank row by writing some extra code

Step 1 Add start date and end date with same date values for non-working employee so that blue rectangular box would have minimum width.

Step 2 Now since your rectangular box corresponding to non-working employee has minimum width. So you can add this code to disappear all rect element with minimum width

(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<el.length;i++){                           //looping over all the rect element of container
        var cwidth=parseInt(el[i].getAttribute("width"));//getting the width of ith element
        if(cwidth<width){                               //if current element width is less than previous width then this is min. width and ith element should be removed
            elToRem=[el[i]];
            width=cwidth;                               //setting the width with min width
        }
        else if(cwidth==width){                         //if current element width is equal to previous width then more that one element would be removed
            elToRem.push(el[i]);        
        }
    }
    for(var i=0;i<elToRem.length;i++) // now iterate JUST the elements to remove
        elToRem[i].setAttribute("fill","none"); //make invisible all the rect element which has minimum width
})();

NOTE :

Only use this code after making sure that there is some blank entry as it will always disappear rect element with minimum width no matter whether it represents blank entry or not

Working demo