Applying CSS to Google Visualization Table

Question

I have created a table in Google Visualization which uses the following code:

<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 cssClassNames = {
    'headerRow': 'headerRow',
    'tableRow': 'tableRow'};
var options = {'allowHtml': true, 'cssClassNames': cssClassNames, 'alternatingRowStyle': true};
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Username');
        data.addColumn('number', 'Won');
        data.addColumn('number', 'Lost');
        data.addColumn('number', 'Win/Loss Ratio');
        data.addColumn('number', 'Goals For');
        data.addColumn('number', 'Goals Against');
        data.addColumn('number', 'Score');
        data.addRows([
          ['Mike', 22, 13, 0.63, 65, 30, 600],
          ['Andy', 25, 10, 0.71, 60, 18, 630],
          ['Steve', 5, 20, 0.20, 10, 50, 475],
          ['Chris', 40, 10, 0.80, 120, 20, 670],
          ['Jake', 15, 15, 0.50, 70, 50, 525],
        ]);
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
      }
    </script>
  </head>

  <body>
    <div id='table_div'></div>
  </body>
</html>

I wish to be able to change the formatting of the header row and table rows using CSS, I can't figure out how to do this though. I have read through the Configuration Options but being a relative new comer to coding this hasn't helped and need it clearly explained step by step.

Specifically what do I add to the above code to tell the chart to use my custom CSS. And what would I put in my main? CSS stylesheet. Not sure whether it would be (for the header) #headerRow { } or .headerRow { }.

For your information this is being inserted through Wordpress via a custom field if that makes any difference.

If I haven't made myself clear enough in the question, please follow up. Cheers.

UPDATE: @asgallant - still not working when changing to headerCell and tableCell.

My current code is: HTML/Javascript:

<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 cssClassNames = {
    headerCell: 'headerCell',
    tableCell: 'tableCell'};
var options = {'allowHtml': true, 'cssClassNames': cssClassNames, 'alternatingRowStyle': true};
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Username',{style: 'background-color:red;'});
        data.addColumn('number', 'Won');
        data.addColumn('number', 'Lost');
        data.addColumn('number', 'Win/Loss Ratio');
        data.addColumn('number', 'Goals For');
        data.addColumn('number', 'Goals Against');
        data.addColumn('number', 'Score');
        data.addRows([
          ['Mike', 22, 13, 0.63, 65, 30, 600],
          ['Andy', 25, 10, 0.71, 60, 18, 630],
          ['Steve', 5, 20, 0.20, 10, 50, 475],
          ['Chris', 40, 10, 0.80, 120, 20, 670],
          ['Jake', 15, 15, 0.50, 70, 50, 525],
        ]);
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
      }
    </script>
  </head>

  <body>
    <div id='table_div'></div>
  </body>
</html>

CSS:

#table_div table {
    color: #000;
    margin-top: 10px;
}

.headerRow {
    color: #000;
}

The table_div allows me to edit the table as a whole, so the current CSS code has an effect but when I add background-color: #ff0000; for example, it has no effect. Same with .headerRow . The background is being taken from https://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css and doesn't want to be overrode.

Any idea why this could be?

If absolutely necessary I'd be happy to disable the Google CSS entirely and do it purely off my own CSS sheet.

If anyone is willing to discuss this please go to: enginehere.com/stream/291/… Will post the answer on here after. — PauloCot
Use a DOM inspector (like Chrome's or Firefox's) and you will likely see that the classes are being applied to the rows appropriately. If you are not seeing the CSS effects, then it is likely that the default CSS classes for the header cells and table cells are overriding your row CSS, so you should assign CSS classes to "headerCell" and "tableCell" as well. — asgallant
Yes that's exactly what's happening. The CSS effects I create are there but being overtaken (line through the css code). For example when I input background-color: #000; within the table header section it has no effect and is overrode by the default Google CSS which is some complicated gradient background with a section for each browser! How do you assign CSS classes to headerCell and tableCell? — PauloCot
Use the "headerCell" and "tableCell" suboptions under "cssClassNames", just like you used "headerRow" and "tableRow". — asgallant
@asgallant have replied by updating my question so could include current code. — PauloCot

Jason Brummett Jason Brummett · Accepted Answer · 2014-12-05T15:42:20

Once you create the CSS, I found this to be the key to getting it to work:

var cssClasses = {headerRow: 'tblHeaderClass',hoverTableRow: 'tblHighlightClass'};
var options = {showRowNumber: false, allowHTML: true, 'cssClassNames':cssClasses};

table.draw(data,options);

force the directive cssClassNames to string with "ticks" and be sure to use the object you declared to define whe CSS classes to use for the table element names exposed.

Applying CSS to Google Visualization Table

4 Answers