CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapgoogle-visualization
Répás
Répás

Reputation: 1820

How to prevent loading google charts table css

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.

Upvotes: 11

Views: 6474

Answers (7)

nathaniel.camomot
nathaniel.camomot

Reputation: 280

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.

Upvotes: 4

dave
dave

Reputation: 4104

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.

Upvotes: 4

Francis Kim
Francis Kim

Reputation: 4285

Easy since you have jQuery installed:

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

Upvotes: 3

ScottS
ScottS

Reputation: 72261

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.

Upvotes: 4

Sherbrow
Sherbrow

Reputation: 17379

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 )

Upvotes: 10

Omega
Omega

Reputation: 3038

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;
 }

Upvotes: 3

Madbreaks
Madbreaks

Reputation: 19539

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

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

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

Upvotes: 7

Related Questions