How to prevent loading google charts table css

Question

Every time I use Google Charts' Table the google loader loads a http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css which always and almost kills my bootstrap css, and i't pretty annoying at 2AM. :)
Note: I can't modify the table.css file.

Do you know any method that can prevent the loading of the CSS file?

Thanks for the help.

PS: Yep, I've tried with JS, but the table recompiles on switching page, so i should replace the table's classname every time on paged.

Answer 1

As seen in the Google Chart Table API Docs, you can override the CSS classes used by setting the cssClassNames option :

Use this property to assign custom CSS to specific elements of your table

Check the doc via the above link to see a full description of each property supported by cssClassNames.

---

Very simply, based on the Google Playground Table example, if you override all the properties, the table will be (almost) free of Google CSS.

You can try it by copying the following code in the playground example :

// Create and draw the visualization.
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
  cssClassNames: {
    headerRow: 'someclass',
    tableRow: 'someclass',
    oddTableRow: 'someclass',
    selectedTableRow: 'someclass',
    hoverTableRow: 'someclass',
    headerCell: 'someclass',
    tableCell: 'someclass',
    rowNumberCell: 'someclass'
  }
});

This should let the Twitter Bootstrap CSS alone.

---

The CSS loaded still changes a few things, but seems to go away if you simply remove the class google-visualization-table-table. You should do that after each .draw() call.

var className = 'google-visualization-table-table';
$('.'+className).removeClass(className);

---

Update : if you are using the page option, you can use this snippet to remove the class when paging :

visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
    page: 'enable',
    pageSize: 2,
    cssClassNames: {
      /* ... */
    }
  });

google.visualization.events.addListener(visualization , 'page',
   function(event) {
       var className = 'google-visualization-table-table';
       $('.'+className).removeClass(className);
   });

Don't forget to call the .removeClass() on initialization too (you should make a function, like there : http://pastebin.com/zgJ7uftZ )

Answer 2

This should solve your problem I believe: Link

Taken from the link:

Add a prefix to your css class names

 var cssClassNames = {
     'tableCell': 'myTable myBorder'};

and then change your css decelerations like this:

.myTable.myBorder {
 border: 1px solid #6699FF;
 font-size:11px;
 color:#226180;
 padding:135px;
 margin:135px;
 }

Answer 3

I only see two possibilities there. Either change all of your CSS-Selectors to something with a higher specifity or use Javascript to remove the Stylesheets you don't want to load.

Changing the CSS-Selectors is no problem if you use a CSS-Preprocessor. You could even just use it this one time to change alle the selectors.

With Javascript you would need a point where you can hang an event listener which removes the stylesheet. This point has to be right after the stylesheet is added.

If you have no such point you would have to overwrite document.createElement (which is a bad practice in general).

This worked for me. Due to IE<9s lack of addEventListener and indexOf for arrays it doesn't work there. But after you fix that it should work there as well:

(function () {
    var createElement = document.createElement,
        stylesheetBlacklist = [
            'http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css'
        ];
    document.createElement = function (tagname) {
        var e = createElement.apply(this, arguments);
        if (tagname === 'link') {
            if (e.__defineSetter__) {
                var setAttr = e.setAttribute;
                e.__defineSetter__('src', function (val) {
                    e.setAttribute('src', val);
                });
                e.setAttribute = function (attrName, attrVal) {
                    if (attrName !== 'src' || stylesheetBlacklist.indexOf(attrVal) === -1) {
                        setAttr.call(e, attrName, attrVal);
                    }
                }
            } else {
                e.addEventListener('load', function () {
                    if (stylesheetBlacklist.indexOf(this.src) > -1) {
                        this.parentNode.removeChild(this);
                    }
                });
            }
        }
        return e;
    }
}());

Of course this won't prevent any stylesheets from being @imported inside a style element. So it really is more a dirty hack than a solution …

It is a shame that Googles API offers a "nocss" option but doesn't support it in the visualization module.

EDIT: If the browser supports defineSetter it no longer even loads the stylesheet.

Answer 4

Give your body a class. Then scope your CSS leveraging that class.

<body class="my">..</body>

.my .google-visualization-table-table { /* blah */ }

Answer 5

What if you just get a copy of the js of what google api loads and place it inside in your server, as in the table.js in below example, and comment the google api call.

// google.load('visualization', '1', {packages:['table']});

Inside it find the string '/table/table.css' and replace it with '/table/../core/tooltip.css'

This way, the table.css is never loaded.

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript' src='table.js'></script>
  </head>
  <body>
    <div id='table_div'></div>
    <script type='text/javascript'>
      //      google.load('visualization', '1', {packages:['table']});
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {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});

    </script>
  </body>
</html>

I'm not really sure if this violates anything and it's a very hacky solution. Obviously, there are consequences to this.

Answer 6

Easy since you have jQuery installed:

jQuery(document).ready(function ($) {
  $('*[class*=google-visualization]').attr('class', function() {
    return $(this).attr('class').replace('google', 'yahoo')
  })
});