Hi, all. With the help of a Google Chart extraordinaire <https://groups.google.com/forum/#!topic/google-visualization-api/q-HhAICRjVE> and this forum, I'm using divs to show extra information when a user selects a datapoint in a ComboChart: http://jsfiddle.net/gregpearl/wm0utaok/
Instead, I would like to place the div info inside the chart's tooltips. Is this possible? Essentially, I'm looking to add tooltip columns to my DataTable, but my attempts to leverage the setColumnProperty() have been unsuccessful, because I must manipulate the data first (i.e. embed URLs in strings). I also wonder if I must use a chart wrapper as dmeehl mentions here <http://stackoverflow.com/questions/11118920/google-charts-full-html-in-tooltips?rq=1>, because I would like to present the divs in the tooltips more or less how they are formatted in the fiddle—i.e. *Name <http://www.example1.com> * Title. Below is my complete code; any insight would be greatly appreciated! (PS: I've posted an identical question in the StackOverflow.com forum <http://stackoverflow.com/questions/27086351/google-combochart-tooltips-using-divs> but have yet to receive a response. I'd be happy to update that thread, though, if anyone here knows whether this is possible. Cheers!) <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi";></script> <script type="text/javascript"> google.load("visualization", "1", { packages: ["corechart"] }); google.setOnLoadCallback(drawChart); function drawChart() { var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1ldjYVUXuT-G9hwP6swIeIgDx-GjxGyKgOEX4RU33NeM/gviz/tq?gid=0'); query.setQuery('select A,B,C,D,E,F,G'); query.send(handleQueryResponse); } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); var view = new google.visualization.DataView(data); view.setColumns([0, 1, 2, 3]); var options = { chartArea: { left: 42, right: 40, top: 20, width: "100%", height: "85%" }, pointSize: 5, curveType: 'function', axisTitlesPosition: 'out', colors: ['blue', 'red', 'green'], hAxis: { title: 'Week Beginning...', gridlines: { color: '#FFFFFF' } }, vAxis: { title: 'No. of Emails', format: '#,###', gridlines: { color: '#FFFFFF' }, viewWindow: { max: '20', min: '0' } }, tooltip: { isHtml: true }, seriesType: 'line', series: { 2: { type: 'area' } }, legend: { position: 'top' }, }; var chart = new google.visualization.ComboChart( document.getElementById('chart_div')); chart.draw(view, options); var selectHandler = function(e) { var row = chart.getSelection()[0].row; var titles = data.getValue(row, 4).split('\n'); var urls = data.getValue(row, 5).split('\n'); var linksDiv = document.getElementById('firsttooltip_div'); linksDiv.innerHTML = ""; for (var i = 0; i < titles.length; i++) { var link = document.createElement('a'); link.textContent = titles[i]; link.setAttribute("href", urls[i] || 'javascript:void(0)'); link.style.display = "block"; linksDiv.appendChild(link); } var secondtooltipDiv = document.getElementById('secondtooltip_div'); secondtooltipDiv.innerHTML = ""; var secondlines = data.getValue(chart.getSelection()[0].row, 6).split('\n'); for (var i = 0; i < secondlines.length; i++) { var secondlineDiv = document.createElement('div'); secondlineDiv.textContent = secondlines[i]; secondtooltipDiv.appendChild(secondlineDiv); } } google.visualization.events.addListener(chart, 'select', selectHandler); } </script> </head> <body> <table> <tr> <td style="font-weight:bold; font-size:larger">Email Habits</td> <td style="font-weight:bold; font-size:larger">Contacts</td> <td style="font-weight:bold; font-size:larger">Titles</td> </tr> <td style="vertical-align: top; align: center"> <div id="chart_div" style="width: 550px; height: 500px"></div> </td> <td style="vertical-align: top;align: left; white-space=nowrap; font-weight:bold; font-size:smaller"> <div id="firsttooltip_div"></div> </td> <td style="vertical-align: top;align: left; white-space=nowrap; font-size:smaller"> <div id="secondtooltip_div"></div> </td> </tr> </table> </body> </html> -- 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. For more options, visit https://groups.google.com/d/optout.
