Google Timeline Chart ( Add hyperlink to tooltip and make the tooltip stay open on click)

[alex parker]

Hi People

So Im trying to set up a google timeline showing the duration of tasks acording to a date, I have my tasks added and a working timeline but in need is so when I click on the bars the tooltip show with a hyperlink what i can click and html text in it, I have the html bit working and technically I can add a link but it is not clickable and the tooltip doesn't stay on clic, Is this possible?

Here is what I have already CLICK HERE

My Code

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


google.load("visualization", "1.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: 'Task' });
        dataTable.addColumn({ type: 'string', id: 'Info' });
        dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
         
[ 'Ensure a signed copy of the Direct Debit Mandate (DDM) has been returned to the Legal & General',  'info', '<div class="task_description"><h4>Title</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex neque, sagittis vel sodales eu, porttitor sit amet nulla. Aenean ut pellentesque neque. Mauris quis interdum erat. Suspendisse potenti. Integer tempor justo eu arcu scelerisque rutrum.<a href="#">Description goes here</a><p></div>', new Date(2015, 10, 13), new Date(2015, 10, 26) ],
 [ 'Comfirm whether you intent topostpone auto enrollment',  'info', '<div class="task_description"><h4>Title</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex neque, sagittis vel sodales eu, porttitor sit amet nulla. Aenean ut pellentesque neque. Mauris quis interdum erat. Suspendisse potenti. Integer tempor justo eu arcu scelerisque rutrum.<a href="#">Description goes here</a><p></div>', new Date(2015, 10, 13), new Date(2015, 10, 26) ],
 [ 'Set the pension sheme upwithinyour payroll software and if applicable, the auto enrollment functionallity / module', 'info', '<div class="task_description"><h4>Title</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex neque, sagittis vel sodales eu, porttitor sit amet nulla. Aenean ut pellentesque neque. Mauris quis interdum erat. Suspendisse potenti. Integer tempor justo eu arcu scelerisque rutrum.<a href="#">Description goes here</a><p></div>', new Date(2015, 10, 13), new Date(2015, 10, 26) ],
 [ 'Start your auto communications campaign',  'info', '<div class="task_description"><h4>Title</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex neque, sagittis vel sodales eu, porttitor sit amet nulla. Aenean ut pellentesque neque. Mauris quis interdum erat. Suspendisse potenti. Integer tempor justo eu arcu scelerisque rutrum.<a href="#">Description goes here</a><p></div>', new Date(2015, 10, 13), new Date(2015, 10, 26) ],
    [ 'Implement 2 month postponement period', 'info', '<div class="task_description"><h4>Title</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex neque, sagittis vel sodales eu, porttitor sit amet nulla. Aenean ut pellentesque neque. Mauris quis interdum erat. Suspendisse potenti. Integer tempor justo eu arcu scelerisque rutrum.<a href="#">Description goes here</a><p></div>', new Date(2015, 10, 26), new Date(2015, 11, 26) ],
 [ 'Issue postponement comunication', 'info', '<div class="task_description"><h4>Title</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex neque, sagittis vel sodales eu, porttitor sit amet nulla. Aenean ut pellentesque neque. Mauris quis interdum erat. Suspendisse potenti. Integer tempor justo eu arcu scelerisque rutrum.<a href="#">Description goes here</a><p></div>', new Date(2015, 10, 26), new Date(2015, 11, 10) ],
    [ 'Register your new pension with The Pension Regulator', 'info', '<div class="task_description"><h4>Title</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex neque, sagittis vel sodales eu, porttitor sit amet nulla. Aenean ut pellentesque neque. Mauris quis interdum erat. Suspendisse potenti. Integer tempor justo eu arcu scelerisque rutrum.<a href="#">Description goes here</a><p></div>', new Date(2015, 10, 26), new Date(2016, 0, 2) ],
 [ 'Ongoing scheme administrator', 'info', '<div class="task_description"><h4>Title</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex neque, sagittis vel sodales eu, porttitor sit amet nulla. Aenean ut pellentesque neque. Mauris quis interdum erat. Suspendisse potenti. Integer tempor justo eu arcu scelerisque rutrum.<a href="#">Description goes here</a><p></div>', new Date(2016, 0, 2), new Date(2016, 2, 10) ],
 
 
  ]);
         
           var options = {
    hAxis: { format: "dd/MM/yyyy" },
    tooltip: {isHtml: true},
    avoidOverlappingGridLines: true,
 timeline: {
            groupByRowLabel: true,
            rowLabelStyle: {
                fontSize: 8,
                color: '#333333',
                width:'800px',
            },
            barLabelStyle: {
                fontName: 'Roboto Condensed',
                fontSize: 10
            },
 
 
        }
 
  };


  chart.draw(dataTable, options);
         
      }

</script>




       <div id="timeline" style="height: 800px">
       
        </div>

Any help would me much appreciated 

[Andres Soto]

Can we get a response here?