Custom tooltips for Timeline chart

521 views
Skip to first unread message

Sergey Zinovkin

unread,
Sep 25, 2020, 9:31:10 AM9/25/20
to Google Visualization API
Hello i am trying to make custom tooltips for my timeline.  As described here

But it is not working. Maybe  somebody can tell me what i am doing wrong?

<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(drawChart);
  function drawChart() {

    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'As' });
    dataTable.addColumn({ type: 'string', id: 'Os' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addColumn({ type: 'string', role: 'tooltip' });
    
    dataTable.addRows([
      [ '1. A', ' ', new Date(2014, 3, 9, 5, 18,8), new Date(2023, 1, 21, 7,45,0),'sdfsdf' ],
      [ '1. A', '  ', new Date(2023, 1, 21, 7,45,0), new Date(2031, 12, 3, 10,11,52), 'sdfs' ],
      [ '2. B', '   ', new Date(2020, 3, 25, 5, 18,8), new Date(2020, 8, 30, 7,45,0),'sssss' ],
      [ '2. B', '    ', new Date(2020, 8, 30, 7,45,0), new Date(2021, 2, 5, 10,11,52), 'aaaaa' ],
      [ '3. C', '   ', new Date(2020, 4, 5, 5, 18,8), new Date(2020, 9, 11, 7,45,0), 'sdfsdf'],
      [ '3. C', '    ', new Date(2020, 9, 11, 7,45,0), new Date(2021, 2, 17, 10,11,52), 'qqqqqq' ],
      [ '4. D', '   ', new Date(2021, 1, 10, 5, 18,8), new Date(2021, 2, 3, 7,45,0), 'sssssssss' ],
      [ '4. D', '    ', new Date(2021, 2, 3, 7,45,0), new Date(2021, 2, 27, 10,11,52),'zzzzzzz' ]
      
    ]);

    var options = {
        tooltip: {isHtml: true},
        legend: 'none',
        height: 375
      };

    chart.draw(dataTable, options);
  }
</script>

<div id="example3.1"></div>

Daniel LaLiberte

unread,
Sep 25, 2020, 11:41:23 AM9/25/20
to Google Visualization API
The tooltip column for the Timeline chart should be column 2 (starting with 0).   See:  https://developers.google.com/chart/interactive/docs/gallery/timeline#data-format

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/97d4fec8-7bc7-451d-8a5a-57d2600ae111n%40googlegroups.com.


--

Sergey Zinovkin

unread,
Sep 28, 2020, 3:40:32 AM9/28/20
to Google Visualization API
Thank you very much, i thought column type was based on its "role" and not on its position in array!
Thanks again!!

пятница, 25 сентября 2020 г. в 18:41:23 UTC+3, Daniel LaLiberte:
Reply all
Reply to author
Forward
0 new messages