google visualization table allowHtml option not working on google sites

Question

Hello I am very new to everything I am attempting to do here, I will try to be as detailed as possible with my problem.

I am trying to have html render in a google visualization table using google-apps-script on google-sites. As a test case I have taken this exact example from the google visualization docs and tried it on my page but the html is not working, it is only being displayed as text.

On my page I have an apps-script gadget inserted that calls htmlService like so...

function doGet() {
  return HtmlService.createHtmlOutputFromFile('testTable');
}

In testTable.html I have copied this exact code from the documentation except that i have set allowHtml to true in the table options, and added some html bold tags around two of the table entries to test if the html is rendering properly. Like this..

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["table"]});
      google.setOnLoadCallback(drawTable);

      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['<b>Mike</b>',  {v: 10000, f: '$10,000'}, true],
          ['<b>Jim</b>',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: true, allowHtml: true});
      }
    </script>
  </head>
  <body>
    <div id="table_div"></div>
  </body>
</html>

I have done this same example in JSFiddle and it does render the bold html tags properly. Is there something I need to do differently to make allowHtml work on my google site?

Do you want only those cells to be in Bold or every cells to be in Bold? — rpm, Dec 09 '14 at 23:09
Either or... It's not necessarily the bold that I'm after, I'm just trying to get the allowHtml option to work, and I am using the bold tags as a test case. Eventually I will want to do more with html inside the cell, I just need to get it working. — claybar, Dec 09 '14 at 23:12
This should be working as it's working in jsfiddle. It seems to me a bug. You can report it [here](https://developers.google.com/apps-script/support#bugs). — rpm, Dec 09 '14 at 23:54
I think you need to use: `setColumns(columnIndexes)` // converts the value into inches. `view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]);` [Google Documentation](https://developers.google.com/chart/interactive/docs/reference#DataView_setColumns) — Alan Wells, Dec 09 '14 at 23:55
I think there is a problem with Caja sanatizing the code. I'm using code from documentation, and getting an error in browser console. `TypeError: Can't add property loader, object is not extensible` — Alan Wells, Dec 10 '14 at 00:22
I think you're right.... I was afraid thats what it was. Seems odd that google visualizations would have problems running in google sites. I guess I will report it as a bug and hope it gets fixed some day. — claybar, Dec 10 '14 at 00:36

score 1 · Accepted Answer · answered Dec 11 '14 at 01:56

I found a work around that solved my problem. Instead of displaying the table with a google-apps script inserted directly on the page I put my code in an .xml file hosted on my Google Drive then inserted it as a gadget on my page.

Here is the same table from above only in gadget (.xml) form, which now displays the HTML properly on the Google Site page.

<?xml version = "1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title = "Test Table">
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
      <div id="table_div"></div>
      <script type="text/javascript" src="https://www.google.com/jsapi"></script>
      <script type="text/javascript">
        google.load("visualization", "1", {packages:["table"]});
        google.setOnLoadCallback(drawTable);

        function drawTable() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Name');
          data.addColumn('number', 'Salary');
          data.addColumn('boolean', 'Full Time Employee');
          data.addRows([
            ['<b>Mike</b>',  {v: 10000, f: '$10,000'}, true],
            ['<b>Jim</b>',   {v:8000,   f: '$8,000'},  false],
            ['Alice', {v: 12500, f: '$12,500'}, true],
            ['Bob',   {v: 7000,  f: '$7,000'},  true]
          ]);

          var table = new google.visualization.Table(document.getElementById('table_div'));

          table.draw(data, {showRowNumber: true, allowHtml: true});
      }
    </script>
    ]]> 
  </Content>
</Module>

score 0 · Answer 2 · edited May 23 '17 at 12:12

Check out this post here on StackOverflow:

google visualization not working with appscript html service

Here is the documentation for how to add a visualization table to a Google Site.

Embed Visualizations on Google Sites

I'd try adding visualization table without using Apps Script.

I think there is a problem with Caja sanatizing the code when trying to add the visualization table with Apps Script. I'm using code from documentation examples and getting errors in the browsers console.

I added an Apps Script to my Site with some changes, and got this.

HTML in Sites

Is this what you want?

I used your exact HTML but different doGet() function:

function doGet(){
  return HtmlService.createTemplateFromFile('testTable')
    .evaluate() // evaluate MUST come before setting the NATIVE mode
    .setSandboxMode(HtmlService.SandboxMode.NATIVE);
};

I added the Apps Script by editing the page, choosing the INSERT menu, choosing Apps Script, and selecting an Apps Script from a list that I had created that is attached to Sites.

Thanks for checking it out. Actually what I'm hoping for is that the names which I have added "" tags to (Mike and Jim in the table) would actually display as rendered html in the table. So in this case the desired result is that "Mike" and "Jim" are in bold print, instead of just showing the tags in the table. — claybar, Dec 09 '14 at 23:03
Oh... Yah, I see that now. :) Okay, maybe I'll check it out some more. — Alan Wells, Dec 09 '14 at 23:08

google visualization table allowHtml option not working on google sites

2 Answers2