I am using Google Developer Chart called Timeline to create some charts. I was able to render a basic version of the charts successfully, but I want to customize the onmouseover event to display certain block information. I haven't been able to find any examples of how to customize this functionality though.

Currently, my table code looks like this:

<script type="text/javascript" src="={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script>

<script language="Javascript" type="text/javascript">

  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: 'RowLabel' });
    dataTable.addColumn({ type: 'string', id: 'BlockLabel' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
    ["SAT 2B", "Task 1", new Date(2015,01,01), new Date(2015,01,02)],
    ["SAT 2B", "Task 1", new Date("2015-03-10 05:10:39.010000"), new Date("2015-03-15 05:10:39.010000")],
    ["SAT 2C", "Task 1", new Date("2015-04-10 05:10:39.010000"), new Date("2015-04-15 05:10:39.010000")],
    ]);

    var formatter = new google.visualization.DateFormat({pattern:'yyyy/DDD-HH:mm:ss'});

    formatter.format(dataTable,2);
    formatter.format(dataTable,3);

    var options = {
        timeline: { colorByRowLabel: true }
      };


    chart.draw(dataTable,options);
  }

    </script>
    <div>
        <h4><p class="text-center">A Timeline</p></h4>
        <div id="timeline" style="width: 95%;"></div>
    </div>

I want to be able to display the BlockLabel, Start, and End date when the user mouses over a given block in the timeline. Can anyone help me out with how to do that? The timeline code is described here.

I am using Google Developer Chart called Timeline to create some charts. I was able to render a basic version of the charts successfully, but I want to customize the onmouseover event to display certain block information. I haven't been able to find any examples of how to customize this functionality though.

Currently, my table code looks like this:

<script type="text/javascript" src="https://www.google./jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script>

<script language="Javascript" type="text/javascript">

  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: 'RowLabel' });
    dataTable.addColumn({ type: 'string', id: 'BlockLabel' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
    ["SAT 2B", "Task 1", new Date(2015,01,01), new Date(2015,01,02)],
    ["SAT 2B", "Task 1", new Date("2015-03-10 05:10:39.010000"), new Date("2015-03-15 05:10:39.010000")],
    ["SAT 2C", "Task 1", new Date("2015-04-10 05:10:39.010000"), new Date("2015-04-15 05:10:39.010000")],
    ]);

    var formatter = new google.visualization.DateFormat({pattern:'yyyy/DDD-HH:mm:ss'});

    formatter.format(dataTable,2);
    formatter.format(dataTable,3);

    var options = {
        timeline: { colorByRowLabel: true }
      };


    chart.draw(dataTable,options);
  }

    </script>
    <div>
        <h4><p class="text-center">A Timeline</p></h4>
        <div id="timeline" style="width: 95%;"></div>
    </div>

I want to be able to display the BlockLabel, Start, and End date when the user mouses over a given block in the timeline. Can anyone help me out with how to do that? The timeline code is described here.

• javascript
• google-visualization

1 Answer 1

In order to customize Google Chart tooltip the column with tooltip role is intended, but it seems Timeline chart does not support it.

The following example shows how to override tooltip content once you hover over data element:

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: 'RowLabel' });
    dataTable.addColumn({ type: 'string', id: 'BlockLabel' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
    ["SAT 2B", "Task 1", new Date(2015, 01, 01), new Date(2015, 01, 02)],
    ["SAT 2B", "Task 1", new Date("2015-03-10 05:10:39.010000"), new Date("2015-03-15 05:10:39.010000")],
    ["SAT 2C", "Task 1", new Date("2015-04-10 05:10:39.010000"), new Date("2015-04-15 05:10:39.010000")]
    ]);

    var formatter = new google.visualization.DateFormat({ pattern: 'yyyy/DDD-HH:mm:ss' });

    formatter.format(dataTable, 2);
    formatter.format(dataTable, 3);

    var options = {
        timeline: { colorByRowLabel: true }
    };


    chart.draw(dataTable, options);

    google.visualization.events.addListener(chart, 'onmouseover', function(e) {
        setTooltipContent(dataTable,e.row);
    });
}


function setTooltipContent(dataTable,row) {
    if (row != null) {
        var content = '<div class="custom-tooltip" ><h1>' + dataTable.getValue(row, 0) + '</h1><div>' + dataTable.getValue(row, 1) + '</div></div>'; //generate tooltip content
        var tooltip = document.getElementsByClassName("google-visualization-tooltip")[0];
        tooltip.innerHTML = content;
    }
}

div.google-visualization-tooltip {
    width: auto;
    height:auto;
    background-color: #ccccff;
    color: #000000;
    text-align: center;
    vertical-align: middle;
}

 <script type="text/javascript" src="https://www.google./jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script>
 <div>
    <h4><p class="text-center">A Timeline</p></h4>
    <div id="timeline" style="width: 95%;"></div>
 </div>

JSFiddle