This code works perfectly except for a small formatting issue I can't find an easy way to fix. The google spreadsheet as the datasource has newline in the columns. However, in the table it looks as if they are simply formatted by spaces. I've tried using the allowHthml option in the data table (after converting the newlines to
tags) but that then removes all formatting and makes the table look terrible. I've also tried the "Formatter" class but that seems more driven to concatenation of fields and also lives by the same no-html rule.

Anyone know of something i'm missing here that can get the newline to show properly in the table without breaking the formatting. I want to simply add the newlines into the fields so they display properly.

You can copy/paste this right into jsLint and it will run and show you what i'm talking about.

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


function drawVisualization() {

  var opts = {dataType:'jsonp'};

  var query = new google.visualization.Query('https://docs.google.com/spreadsheet/pub?key=0AiEVKSSB6IaqdDZBTGJqV0lLZEV3YS0teXZkOWR4M3c&output=html', opts);

  query.setQuery("select * ");

  // Send the query with a callback function.
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {  
  // Create and populate the data table.
  var data = response.getDataTable();

    // Create and draw the visualization.
  visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(data, null);
}
google.setOnLoadCallback(drawVisualization);

​

• google-sheets
• google-visualization
• google-spreadsheet-api

This may be a bit of a hacky solution but how about using a JavaScript method to replace all line breaks in a string with <br /> tags? I also added a small amount of CSS so that the new table has bottom vertical alignment (like the original Spreadsheet would have).

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

function drawVisualization() {
  var opts = {dataType:'jsonp'};
  var query = new google.visualization.Query('https://docs.google.com/spreadsheet/pub?key=0AiEVKSSB6IaqdDZBTGJqV0lLZEV3YS0teXZkOWR4M3c&output=html', opts);

  query.setQuery("select * ");

  // Send the query with a callback function.
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  // Create and populate the data table.
  var data = new google.visualization.DataTable(
        response.getDataTable().toJSON().split("\\n").join("<br />"));

  var opts = {'allowHtml': true};

  // Create and draw the visualization.
  visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(data, opts);
}

google.setOnLoadCallback(drawVisualization);

</script>

<style type="text/css">
.google-visualization-table-td{
    vertical-align: bottom;
}
</style>
<div id="table"></div>