Hi People I have my google chart set up CLICK HERE <http://visuals.swimminghippo.co.uk/ifs/templates/company_dashboard.html>, I am trying to show the dates of when some tasks must me completed, I have some quit long tasks as my labels which get cut short and I don't want this to happen. Is there a way to make the width of the label wider or overflow the text on to a second line?
Here is what I have: <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 Ideas? \ -- 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/24475dba-7f6c-43c4-a834-6a01a976e306%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
