Dummy rows for Google Charts Timelines?

Question

I'm looking for a way to add a dummy row to Google Charts Timelines . Here is what I'm trying to accomplish:

However, the dummy row should be transparent and should not have interactivity (no tooltip, no select event, etc.).

Here is my workaround:

This requires adding three more columns and you lose the tooltip generated by Charts. While this isn't an issue for me (as I will be customizing the tooltips), it may be for others. Furthermore, although the dummy row is transparent, there is still interactivity (as indicated by the empty tooltip I circled). The workaround for this is to add the following code immediately before chart.draw(dataTable) :

function onMouseOver(e) {
    var tooltips = document.getElementsByClassName('google-visualization-tooltip');

    for (var i = 0; i < tooltips.length; i++) {
        if (!tooltips[i].innerHTML) {
            tooltips[i].style.display = 'none';
        }
    }
}

function onReady() {
    google.visualization.events.addListener(chart, 'onmouseover', onMouseOver);
}

google.visualization.events.addListener(chart, 'ready', onReady);

While this is technically a solution to my problem, it's a hack at best. Is there no straightforward way to accomplish this with the API?

Answer 1

This is already a year old question, but maybe someone else will have the same problem. Your solution from second screen was very close. You need to set tooltip value on normal rows to null (will display standard tooltip) and empty string on dummy items (tooltip will be hidden). The style column must have opacity set to 0 on dummy rows to hide the bar. Below is rewritten and fixed code from your example.

google.charts.load('current', { packages: ['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    const container = document.getElementById('timeline');
    const chart = new google.visualization.Timeline(container);
    const dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', label: 'President', id: 'President' });
    dataTable.addColumn({ type: 'string', id: 'Empty label' });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'string', id: 'tooltip', role: 'tooltip', p: { html: true } });
    dataTable.addColumn({ type: 'date', label: 'Start', id: 'Start' });
    dataTable.addColumn({ type: 'date', label: 'End', id: 'End' });

    dataTable.addRows([
        ['A', '', 'opacity: 0', '', new Date('2018-06-05T00:00:00'), new Date('2018-06-05T00:00:00')],
        ['B', '', 'opacity: 0', '', new Date('2018-06-05T00:00:00'), new Date('2018-06-05T00:00:00')],
        ['C', '', 'opacity: 0', '', new Date('2018-06-05T00:00:00'), new Date('2018-06-05T00:00:00')],
        ['A', '', null, null, new Date('2018-06-05T01:00:00'), new Date('2018-06-05T02:00:00')],
        ['B', '', null, null, new Date('2018-06-05T01:00:00'), new Date('2018-06-05T02:00:00')],
        ['C', '', null, null, new Date('2018-06-05T01:00:00'), new Date('2018-06-05T02:00:00')],
    ]);
}

Answer 2

After tackling with this problem I prefer to use apexcharts package for timeline chart creating. This package has more flexible interface to control the charts, min and max values of axis, tooltips, etc.