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> <style type='text/css'> .header-css { font-weight: bold; font-size: 11px; font-style: italic; color: #0047b6; border: 3px solid gold; height: 12px; } .border-css { border: 3px solid lightblue; } </style> <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> -- 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 https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/7d5181c5-55d2-46b4-a1c2-3682fa958b7b%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
