Hi People

So Im trying to set up a google timeline 
<https://developers.google.com/chart/interactive/docs/gallery/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 
<http://visuals.swimminghippo.co.uk/ifs/templates/company_dashboard.html>

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 

-- 
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/e1f2ae3b-a89e-4698-ab50-6e8530890e73%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to