Applying CSS to Google Visualization Table

css wordpress google-visualization css-tables

13,988

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.

13,988

Author by

Brian Tompsett - 汤莱恩

I am a lecturer of Computer Science at the University of Hull. I have worked in the software industry in the US and the UK. I have over 50 years software development experience, in writing compilers, operating system implementation and porting, networking protocol stacks, protocol analysers and software for arcane and unusual architectures. I am experienced at answering and solving students' programming and computer science questions. I teach the networking, compilers and security courses. My research areas include computer crime, forensics and security. I was the first timelord and created the tardis.

Updated on June 04, 2022

Comments

Brian Tompsett - 汤莱恩 about 2 years
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.
- Admin over 10 years
  
  If anyone is willing to discuss this please go to: enginehere.com/stream/291/… Will post the answer on here after.
- asgallant over 10 years
  
  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.
- Admin over 10 years
  
  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?
- asgallant over 10 years
  
  Use the "headerCell" and "tableCell" suboptions under "cssClassNames", just like you used "headerRow" and "tableRow".
- Admin over 10 years
  
  @asgallant have replied by updating my question so could include current code.
- asgallant over 10 years
  
  You want to use all of the classes, even if you don't apply styles to some of them. Just setting the cssClassNames.<table element> option removes the default google class from that type of element, which will allow your row styles to take over.
Admin over 10 years

It still reads the default google css ahead of this. Is there anyway to disable this? Or at least make part such as the header/table rows background colour changeable?
lux over 10 years

I'm looking at the code you posted and there is no reference to an external (custom) CSS file which you're referencing.
maverick over 9 years

You can change the CSS rules by ui:cssClass... Google Chart. Second option is to inspect the element and if you really need to override some rules, you can always set !important... But wouldn't recommend it. lol.
Richie Thomas over 5 years

This might well work here, but remember that !important is a blunt instrument and should be used extremely sparingly, if at all. Frequent use of this attribute throughout your CSS can lead to hard-to-debug issues, if an !important tag in one part of the codebase overrides another.
Cyriina Grimm over 5 years

True enough, but it seems OP has reached the "if all else fails" point, which is typically the point that I personally use this option.