11

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.

2
  • What do you mean it "kills your bootstrap css"?
    – Madbreaks
    Jan 7, 2013 at 22:52
  • Means its redefines my css classes, and I can not replace the table element's css scope. So unfortunately it's modifying everything because .google-visualization-table-table * {padding: 2px...etc.} and i can't redefine everything inside the table, because i'm using many html elements inside it, and yes, must be a method. :(
    – Répás
    Jan 7, 2013 at 22:56

7 Answers 7

10

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 )

4
  • True, but it you want to attach a pager, and use it the table will compile every time you paging. :(
    – Répás
    Jan 14, 2013 at 9:09
  • 1
    AFAIK, the styles are applied only when the library is compiling (BTW, the table is processed maybe, but not compiled), meaning that a small .removeClass() will not add much overhead and you can do both right next to each other.
    – Sherbrow
    Jan 14, 2013 at 18:26
  • 1
    @Répás I just tested in the playground and it works fine. You can try it with this code : pastebin.com/zgJ7uftZ
    – Sherbrow
    Jan 14, 2013 at 18:46
  • Neat. ?) Still waiting for an answer like Hello i'm Frank from google and you cried as loud everyone heard it the office and we decided to make a function/param to prevent loading of the css file. Since this is not going to happen you will have 50% of the bounty for this solution. Thanks.
    – Répás
    Jan 16, 2013 at 8:52
7

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

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

.my .google-visualization-table-table { /* blah */ }
5
  • 1
    I can modify it either forcing css to rewrite the Google's with !important flags. The problem I does not want to copy and paste my half (or entire) bootstrap css file under the .google-visualization-table-table scope :(
    – Répás
    Jan 7, 2013 at 23:02
  • I don't understand what that has to do with my answer. If you provide additional specificity (using the body class as I did in my answer, for example) your CSS will take precedence over Google's. Oh - and never use !important. :)
    – Madbreaks
    Jan 7, 2013 at 23:05
  • In my bootstrap.css I have .btn {padding: 4px 8px} and when I put a .btn to the table, the Google's CSS will override it with .stuff * {padding: 2px}. But the content inside the table is completly random, so I don't know what it will be. So i have to redefine the whole bootstrap.css inside the .stuff with your method haven't I? Btw i neither like important :)
    – Répás
    Jan 7, 2013 at 23:11
  • 2
    I'd suggest giving your body an id="myBody" (higher specificity than class) and scoping all your CSS rules (including rewriting all the bootstrap.css declarations). That would solve your problem in 20 minutes, inelegant though it is. Using a CSS language like SASS should simplify this annoying transformation. Jan 12, 2013 at 20:24
  • @RecursivelyIronic I generally avoid id selectors. And in this case, the additional specificity that id offers isn't needed. That said it's certainly not going to hurt anything.
    – Madbreaks
    Jan 14, 2013 at 19:40
4

My idea is still like some others here, to override the google through a more specific selector. I think with bootstrap, perhaps the easiest way to do that is something like this:

Set up an id on your html tag.

HTML

<html id="myHTML">All your html goes here</html>

Set up bootstrap to load all its selectors under that id.

LESS

#myHTML {
   font-size: 100%;
   @import: "yourpath/bootstrap.less";
   @import: "yourpath/anyOtherBootstrapFilesYouMightLoad.less";
   etc...
}

Note, the font-size: 100% is because the bootstrap.less has html { font-size: 100% } which you want to keep that functionality, but you will lose it if you don't replicate what is in the bootstrap call for html. See the CSS output below for further explanation.

Output

CSS (Brief sample output)

#myHTML {
    font-size: 100%;
}

#myHTML article, 
#myHTML aside, 
#myHTML details, 
#myHTML figcaption, 
#myHTML figure, 
#myHTML footer, 
#myHTML header, 
#myHTML hgroup, 
#myHTML nav, 
#myHTML section {
    display: block;
}

#myHTML html { 
/* this is from the base html call in bootstrap, but will never 
   select anything as it is basically like writing "html html" 
   for a selector, which is why we added the font-size to your 
   LESS code above 
*/
    font-size: 100%;
}

#myHTML .btn {
    etc...
}

By doing this, you can see how all straight classes, like .btn, end up having an id appended to them that is on your <html> tag. This gives the selector a higher specificity than google's .google-visualization-table-table *, as the id is higher than the * selector in precedence.

1
  • This The Very Nice method. Anyway I'm still looking for way to prevent the CSS loading. :) +1 for using LESS also. But in my oppinion just to reach all the elements by an ID selector makes everything a bit slower doesn't it? So preventing the CSS loading is still better than this way.
    – Répás
    Jan 16, 2013 at 8:48
4
+150

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.

2
  • Nice. And I agree with you, it's not a shame but should be an option for it, especially if using css with * which matches all the elements. :(
    – Répás
    Jan 14, 2013 at 9:11
  • Changed it so that in modern browsers the stylesheet isn't even loaded in the first place.
    – dave
    Jan 18, 2013 at 9:00
4

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.

3

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;
 }
1
  • Yep, as in the original post, i know this method. But i doesn't want to load that. :)
    – Répás
    Jan 14, 2013 at 9:10
3

Easy since you have jQuery installed:

jQuery(document).ready(function ($) {
  $('*[class*=google-visualization]').attr('class', function() {
    return $(this).attr('class').replace('google', 'yahoo')
  })
});
3
  • 1
    #1 in the starting post: 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. and also the question is for preventing the css not replacing the table's attributes.
    – Répás
    Jan 16, 2013 at 8:55
  • 1
    This will run every time the page is reloaded. And it replaces all your class names so Google's CSS will become redundant. Jan 16, 2013 at 22:48
  • 2
    It is also possible to bind this action to a click on pager. Jan 16, 2013 at 22:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.