Tooltip error issue on timeline chart
95 views
Skip to first unread message
K. Anthony
Oct 13, 2015, 10:36:27 AM10/13/15
to Google Visualization API
I am trying to build a timeline chart with a dashboard that will allow people to zoom in on some of the smaller sections and see them more clearly. However, at certain ranges, a "one or more participants failed to draw" error shows up. It seems to be related to the tooltip not being displayed. Each item has a tooltip, so I'm not sure why this is happening. I tried restricting the ranges, and that stops the errors but negates the benefit of the dashboard. Can anyone help?
<!DOCTYPE html><meta charset="utf-8"> <head> <title>LeaP Pharmacy Student Path Data</title> <style> div.google-visualization-tooltip { font-size: 0.9em; padding: 10px; width: 200px; } </style> <script type="text/javascript" src="https://www.google.com/jsapi"></script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="dashboard"> <div id="chart" style="position: relative; width: 985px; height: 200px;"></div> <div>Select a time range to zoom in.</div> <div id="control"></div> </div> <div id="junk_div" style="display: none;"></div><script type="text/javascript"> google.load('visualization', '1', { packages: ['corechart', 'table', 'gauge', 'controls'] }); google.setOnLoadCallback(drawVisualization);
function drawVisualization() { var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({ 'controlType': 'ChartRangeFilter', 'containerId': 'control', 'options': { 'filterColumnIndex': 3, 'ui': {
// SET MIN RANGE //'minRangeSize': (60 * 60 * 1000),
'chartType': 'TimeLine', 'chartOptions': { 'width': 900, 'height': 70, 'chartArea': { width: '100%', height: '80%' }, 'hAxis': { 'baselineColor': 'none' } }, 'chartView': { 'columns': [3, 4] } } }, }); google.visualization.events.addListener(control, 'error', onError); function onError(id, message) { console.log('error: ' + id + ' - ' + message); }
var chart = new google.visualization.ChartWrapper({ 'chartType': 'Timeline', 'containerId': 'chart', 'options': { 'width': 985, 'height': 600, 'chartArea': { width: '100%', height: '80%' }, }, 'view': { 'columns': [0, 1, 2, 3, 4] }
});
var data = new google.visualization.DataTable(); data.addColumn({ type: 'string', id: 'Student' }); data.addColumn({ type: 'string', id: 'Event Type' }); data.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true}}); data.addColumn({ type: 'datetime', id: 'Start' }); data.addColumn({ type: 'datetime', id: 'End' }); data.addRows([ [ 'Student 571', 'Pretest', 'Student 571 began Biological Chemistry Learning Path Pretest', new Date(2015,08,10,18,52,02), new Date(2015,08,10,18,52,27) ], [ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,18,52,27), new Date(2015,08,10,18,52,32) ], [ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 water', new Date(2015,08,10,18,52,32), new Date(2015,08,10,18,52,33) ], [ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,18,52,33), new Date(2015,08,10,18,52,40) ], [ 'Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,18,52,40), new Date(2015,08,10,18,52,55) ], [ 'Student 571', 'Learning Path', 'Student 571 viewed Amino Acids videos', new Date(2015,08,10,18,52,55), new Date(2015,08,10,19,01,48) ], [ 'Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,19,01,48), new Date(2015,08,10,19,01,49) ], [ 'Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,19,01,49), new Date(2015,08,10,19,02,13) ], [ 'Student 571', 'Learning Path', 'Student 571 viewed Video: Bio102 Water', new Date(2015,08,10,19,02,13), new Date(2015,08,10,19,02,42) ], [ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,19,02,42), new Date(2015,08,10,19,03,02) ], [ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,19,03,02), new Date(2015,08,10,19,16,08) ], [ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,16,08), new Date(2015,08,10,19,16,11) ], [ 'Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,19,16,11), new Date(2015,08,10,19,16,18) ], [ 'Student 571', 'Learning Path', 'Student 571 viewed Biological Buffers Website 3 (animation)', new Date(2015,08,10,19,16,18), new Date(2015,08,10,19,16,42) ], [ 'Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,19,16,42), new Date(2015,08,10,19,16,48) ], [ 'Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,19,16,48), new Date(2015,08,10,19,16,53) ], [ 'Student 571', 'Supplemental Info', 'Student 571 viewed Nucleic Acids Websites', new Date(2015,08,10,19,16,53), new Date(2015,08,10,19,16,54) ], [ 'Student 571', 'Supplemental Info', 'Student 571 watched Video: The Properties of Water', new Date(2015,08,10,19,16,54), new Date(2015,08,10,19,16,55) ], [ 'Student 571', 'Supplemental Info', 'Student 571 viewed Lipids Websites', new Date(2015,08,10,19,16,55), new Date(2015,08,10,19,16,57) ], [ 'Student 571', 'Supplemental Info', 'Student 571 viewed Complex Carbohydrates Are Formed by Linkage of Monosaccharides - Biochemistry - NCBI Bookshelf', new Date(2015,08,10,19,16,57), new Date(2015,08,10,19,17,03) ], [ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,17,03), new Date(2015,08,10,19,18,27) ], [ 'Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question correctly', new Date(2015,08,10,19,18,27), new Date(2015,08,10,19,18,59) ], [ 'Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question incorrectly', new Date(2015,08,10,19,18,59), new Date(2015,08,10,19,19,21) ], [ 'Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question correctly', new Date(2015,08,10,19,19,21), new Date(2015,08,10,19,19,27) ], [ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,27), new Date(2015,08,10,19,19,43) ], [ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,43), new Date(2015,08,10,19,19,56) ], [ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,19,56), new Date(2015,08,10,19,19,57) ], [ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,57), new Date(2015,08,10,19,20,33) ], [ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,20,33), new Date(2015,08,10,19,21,00) ], [ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,21,00), new Date(2015,08,10,19,21,02) ], [ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,21,02), new Date(2015,08,10,19,21,50) ], [ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,21,50), new Date(2015,08,10,19,22,14) ], [ 'Student 571', 'Questions', 'Student 571 answered Properties of Water question correctly', new Date(2015,08,10,19,22,14), new Date(2015,08,10,19,30,32) ], [ 'Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,19,30,32), new Date(2015,08,10,20,21,16) ], [ 'Student 571', 'Learning Path', 'Student 571 viewed Biological Buffers Website 3 (animation)', new Date(2015,08,10,20,21,16), new Date(2015,08,10,20,22,01) ], [ 'Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,20,22,01), new Date(2015,08,10,20,23,58) ], [ 'Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,20,23,58), new Date(2015,08,10,20,24,35) ], [ 'Student 571', 'Supplemental Info', 'Student 571 viewed Nucleic Acids Websites', new Date(2015,08,10,20,24,35), new Date(2015,08,10,20,33,34) ], [ 'Student 571', 'Supplemental Info', 'Student 571 watched Video: The Properties of Water', new Date(2015,08,10,20,33,34), new Date(2015,08,10,20,33,53) ], [ 'Student 571', 'Supplemental Info', 'Student 571 viewed Lipids Websites', new Date(2015,08,10,20,33,53), new Date(2015,08,10,20,43,43) ], [ 'Student 571', 'Supplemental Info', 'Student 571 viewed Complex Carbohydrates Are Formed by Linkage of Monosaccharides - Biochemistry - NCBI Bookshelf', new Date(2015,08, 10,20,43,43), new Date(2015,08, 10,20,53,28) ], [ 'Student 571', 'Test Me', 'Student 571 scored 81% on Biological Chemistry Learning Path assessment', new Date(2015,08,10,20,53,28), new Date(2015,08,10,20,54,36) ] ]);
var options = { tooltip: {isHtml: true} }; dashboard.bind(control, chart); dashboard.draw(data); }
</script> </body>
</html>
Sergey Grabkovsky
Oct 13, 2015, 11:18:18 AM10/13/15
to Google Visualization API
Hi,
It appears this error only occurs when you try to draw the Timeline chart without any data. It's not pretty, but you could work around this by wrapping the chart in a simple wrapper that checks whether the DataTable is empty, and only redraws when it's not. Here's an example of this: http://jsfiddle.net/aptpLtxd/
--
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 post to this group, send email to google-visua...@googlegroups.com.
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/19e7cf5a-d31f-4a21-9c46-e03966fb974d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
K. Anthony
Oct 14, 2015, 10:07:44 AM10/14/15
to Google Visualization API
Brilliant! Thanks so much!
Reply all
Reply to author
Forward
0 new messages