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.
7 answers
solution1
10 2013-01-11 19:31:14
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 )
solution2
7 2013-01-07 22:58:54
Give your body a class. Then scope your CSS leveraging that class.
<body class="my">..</body>
.my .google-visualization-table-table { /* blah */ }
solution3
4 2013-01-11 14:22:24
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.
solution4
4 2013-01-15 00:08:39
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.
solution5
4 2013-01-18 03:41:28
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.
solution6
3 2013-01-11 15:42:25
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;
}
solution7
3 2013-01-16 05:45:45
Easy since you have jQuery installed:
jQuery(document).ready(function ($) {
$('*[class*=google-visualization]').attr('class', function() {
return $(this).attr('class').replace('google', 'yahoo')
})
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.