Almost there... Help with Visual API Google sheet to HTML formatted with CSS class names

28 views
Skip to first unread message

Russ Ullrich

unread,
Jul 4, 2018, 8:55:32 AM7/4/18
to Google Visualization API
Fighting with formatting a Visual API Google sheet to HTML with CSS class names.

Here is the test html page.

Here is the code I'm fighting with.  You'll see I've tried numerous ways to format the table background to black with a larger white font.  Any help would be great.

---------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Announcement test</title>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

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

function drawTable() {
var allowHtml = true;
var cssClassNames = {
    'headerRow': 'Title_Table',
    'tableRow': 'Black_Table',
    'oddTableRow': '',
    'selectedTableRow': '',
    'hoverTableRow': '',
    'headerCell': '',
    'tableCell': '',
    'rowNumberCell': ''
};
      var query = new google.visualization.Query(
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }
//      setProperty(1, 1, *, {style: 'font-style:bold; font-size:22px;'});
      var data = response.getDataTable();
      var chart = new google.visualization.Table(document.getElementById('table_div'));
      chart.draw(data);
    }
</script>

<style type="text/css">
.Table_Format{
width: 800px; 
text-align:center; 
background-color:black;
color:white;
padding:20px;
}
.Title_Table {
font-size: x-large;
font-weight: bold;
color: #FFF;
background-color: #000;
}
.Black_Table{
font-size: large;
color: #FFF;
background-color: #000;
}
body,td,th {
font-size: large;
color: #FFF;
background-color: #000;
}
body {
background-color: #000;
}
</style>


</head>
<body>

<div id="table_div" class="Table_Format"></div>

</body>
</html> 

Ray Thomas

unread,
Jul 5, 2018, 11:07:16 AM7/5/18
to Google Visualization API
Unfortunately not all the CSS properties for all the charts are available through the API. So here's one solution.

Nearly all browsers have some sort of developer tools that let you inspect the CSS for every element on a page - see https://www.lifewire.com/web-browser-developer-tools-3988965 

Using the tools you can see that the table that is drawn has the CSS class name .google-visualization-table-table, and there are loads of others. Luckily someone has already done a lot of work and found most of them for the tables - https://formidableforms.com/help-desk/google-table-styling/

In your code, take out all the CSS, and replace it with what they've got on that page. By experimenting a little, you can change almost every aspect of the table, including the background colors (Hint: the lines containing .google-visualization-table-tr-even-nonstrict and .google-visualization-table-tr-odd-nonstrict). It's not the most elegant solution, but it does work.

There may be a simpler solution, but I couldn't quickly find it.
Reply all
Reply to author
Forward
0 new messages