Timeline chart tooltips.

[Ray Thomas]

A timeline I created just lists a set of employees, when they they started, when they finished, and their length of service. I don't know the exact dates they started, so just want to use the years - not month and day. The best way to show that seems to be a custom tooltip.

The Google Sheet the data is in is at https://docs.google.com/spreadsheets/d/1HkdVxj-b8B4N4waRm092LMjKoBrnGRAMp4_hZVuD6kw/edit#gid=988755849 which contains the calculated tooltip text.

I thought that by adding dataCalcTooltips.setColumnProperties(2, {'type': 'string', 'role': 'tooltip', 'p': {'html': true}}); and tooltip: {isHtml: true} to the options, then it should display the text as HTML but it does not. Am I missing something? Can it be done using ths method?

The code can be seen at http://brisray.com/test/timeline.htm

It might not be possible, but I have another question, is there a way to control the height of the rows in the chart?

My code:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

 

<script type="text/javascript">

google.charts.load("current", {packages:["timeline"]});

google.charts.setOnLoadCallback(drawCalcTooltipsTimeline);

function drawCalcTooltipsTimeline() {

      var query = new google.visualization.Query(

          'https://docs.google.com/spreadsheets/d/1HkdVxj-b8B4N4waRm092LMjKoBrnGRAMp4_hZVuD6kw/gviz/tq?gid=988755849&headers=1');

      query.send(handleCalcTooltipsQueryResponse);

    }

    function handleCalcTooltipsQueryResponse(response) {

      if (response.isError()) {

        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

        return;

      }

      var options = {

      height: 600,

      tooltip: {isHtml: true}

      };

      var dataCalcTooltips = response.getDataTable();

//    set the 3rd column to the "tooltip" role

      dataCalcTooltips.setColumnProperties(2, {'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

      var chart = new google.visualization.Timeline(document.getElementById('timelineCalcTooltips_div'));

      chart.draw(dataCalcTooltips, options);

    }

</script>

<div id="timelineCalcTooltips_div"></div>

[Ray Thomas]

Until I can find a better method, what I did was to step through the datatable and create a new one with the columns set up in the tooltips help of the Timeline page - https://developers.google.com/chart/interactive/docs/gallery/timeline#customizing-tooltips. Now I know what I am doing I should be able to customize it a bit more by adding images of these people etc. There's a couple of things to try on the Tooltips page - https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#customizing-html-content

The simple sheet I used - https://docs.google.com/spreadsheets/d/1HkdVxj-b8B4N4waRm092LMjKoBrnGRAMp4_hZVuD6kw/edit#gid=275822376 

The half finished "production" page - https://www.indstate.edu/business/history/faculty 

A page of tests - https://www.indstate.edu/business/stuff/timelines - this will be deleted some time in the future.

The code I used:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">

var Faculty_Timeline = (function() {

    google.charts.load("current", {packages:["timeline"]});

    google.charts.setOnLoadCallback(drawNewTooltipsTimeline);

    function drawNewTooltipsTimeline() {

      var query = new google.visualization.Query(

          'https://docs.google.com/spreadsheets/d/1HkdVxj-b8B4N4waRm092LMjKoBrnGRAMp4_hZVuD6kw/gviz/tq?gid=275822376&headers=1');

      query.send(handleNewTooltipsQueryResponse);

    }

    function handleNewTooltipsQueryResponse(response) {

      if (response.isError()) {

        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

        return;

      }

      var options = {

      height: 400,

      tooltip: {isHtml: true},

      };

      var dataRaw = response.getDataTable();

      // Get the number of rows in the original datatable

      var rowsRaw = dataRaw.getNumberOfRows();

      // Create new datatable called dataNew

      var dataNew = new google.visualization.DataTable();

      // Add the new columns to dataNew

      dataNew.addColumn({ type: 'string', id: 'Faculty' });

      dataNew.addColumn({ type: 'string', id: 'bar label' });

      dataNew.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})

      dataNew.addColumn({ type: 'date', id: 'Start' });

      dataNew.addColumn({ type: 'date', id: 'End' });

      // Start stepping through the original datatable

      var i;

      var j;

      // for each row

      for (i=0;  i < rowsRaw; i++) {

           // Create a new row in dataNew

           dataNew.addRow();

           // for each new column (there are 5 of them). No need to do column 1 as that's null anyway

           for (j = 0; j < 5; j++){

                if (j==0) { dataNew.setValue(i, j, dataRaw.getValue(i,j)); }

               if (j==2) {  dataNew.setValue(i, j, "<p><b>" +  dataNew.getValue(i, 0) + "</b></p><p>Service: " + dataRaw.getValue(i,1) + " to " + dataRaw.getValue(i,2) + " (" + (dataRaw.getValue(i,2) - dataRaw.getValue(i,1)) + " years)</p>"); }

                if (j==3) { dataNew.setValue(i, j, new Date(dataRaw.getValue(i,1), 0, 0)); }

                if (j==4) { dataNew.setValue(i, j, new Date(dataRaw.getValue(i,2), 0, 0)); }

           }

      }

      // Destroy dataRaw table

     dataRaw = {};

      var chart = new google.visualization.Timeline(document.getElementById('timelineNewTooltips_div'));

      chart.draw(dataNew, options);

    }

})();

</script>

<style>div.google-visualization-tooltip { padding: 6px; width: 200px;}</style>

<div id="timelineNewTooltips_div"></div>