CODEWITHSUNDEEP
javascripthtmlgoogle-visualizationtooltip
eyesonmywall
eyesonmywall

Reputation: 61

Google Calendar Chart HTML Tooltip displays HTML tags as string

<script type="text/javascript">
  google.charts.load("current", {{packages:["calendar"]}});
  google.charts.setOnLoadCallback(drawChart);

 function drawChart() {{
     var dataTable = new google.visualization.DataTable();
     dataTable.addColumn({{ type: 'date', id: 'Date' }});
     dataTable.addColumn({{ type: 'number', id: 'Captures' }});
     dataTable.addColumn({{'type': 'string', 'role': 'tooltip', 'p': {{'html': true}} }});
     dataTable.addRows([
        {fn:string-join($capture-dates, ",")}
      ]);

     var chart = new google.visualization.Calendar(document.getElementById('capture-dates-calendar'));

     var options = {{ 
        focusTarget: 'category',
        tooltip: {{isHtml: true}},
        trigger: 'both',
        colorAxis: {{ minValue: 1,  colors: ['#17649a', '#0b2e47'] }} 
     }};

     chart.draw(dataTable, options);
 }}
</script>

Above is the code I am using to create Google Calendar Charts in an XQuery application. All of the data is displaying correctly, but I wanted to add custom HTML to the calendar tooltips. Instead of parsing the HTML, the actual HTML tags are being displayed as a string.

Here's a screenshot of the Tooltip: https://www.flickr.com/gp/143914092@N07/M783C9

Here's how it looks in the console: [ new Date(2016,6,10),2,'<div><h3>Jul 10, 2016</h3><p>2 snapshots</p><ul><li><a href="http://wayback.archive-it.org/3507/20160710175703/https://twitter.com/HTI_HTIC/" target="_blank">17:57:03</a></li><li><a href="http://wayback.archive-it.org/3507/20160710135341/https://twitter.com/HTI_HTIC/" target="_blank">13:53:41</a></li></ul></div>'],

Does anyone know how to force tooltips to actually parse the HTML?

Upvotes: 1

Views: 964

Answers (2)

eyesonmywall
eyesonmywall

Reputation: 61

So, I was able to get this to work in a roundabout way. The solution was to replace the escaped HTML tags before they are returned in the HTML response. I'm not sure why this works, but it does.

Here is the code:

var scriptText = html.find("#capture-dates-calendar").text().replace(/&lt;/g, "<").replace(/&gt;/g, ">");
html.find("#capture-dates-calendar").text(scriptText);

Upvotes: 0

WhiteHat
WhiteHat

Reputation: 61222

you have an extra object {} wrapping everything...?

see following changes, working snippet... 

google.charts.load("current", {packages:["calendar"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
   var dataTable = new google.visualization.DataTable();
   dataTable.addColumn({ type: 'date', id: 'Date' });
   dataTable.addColumn({ type: 'number', id: 'Captures' });
   dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true} });
   dataTable.addRows([
      [new Date('01/01/2016'), 13, '<div>test 13</div>'],
      [new Date('01/02/2016'), 14, '<div>test 14</div>'],
      [new Date('01/03/2016'), 15, '<div>test 15</div>'],
   ]);

   var chart = new google.visualization.Calendar(document.getElementById('capture-dates-calendar'));

   var options = {
      focusTarget: 'category',
      tooltip: {isHtml: true},
      trigger: 'both',
      colorAxis: { minValue: 1,  colors: ['#17649a', '#0b2e47'] }
   };

   chart.draw(dataTable, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="capture-dates-calendar"></div>

Upvotes: 1

Related Questions