CODEWITHSUNDEEP
jquerycsschartstwitter-bootstrap-3google-visualization
mpsbhat
mpsbhat

Reputation: 2773

Changing the class name of Google visualization table chart

Here is a sample Google visualization table chart which is drawn as, 

  table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'dataTable': data,
        'containerId': 'table',
        'options': {
            'width': '100%',
            'showRowNumber' : true
        },
    });
    table.draw();

The above Google visualization table chart has a default class name google-visualization-table-table and this link explains how to customize its individual styles. But how can I change the table's class name itself using jquery to Twitter Bootstrap style? so that, I can customize whole table style using that class name. I tried something like 

$(document).ready(function(){
  $(".google-visualization-table-table").attr('class', 'table');
  $("table").addClass( 'table-bordered table-condensed table-striped' );
});

But it doesn't worked for me.

Upvotes: 0

Views: 3471

Answers (1)

dtyler
dtyler

Reputation: 1428

I updated the fiddle you provided - see http://jsfiddle.net/8Z75X/2/ for the working demo

Basically, table.draw(); is happening in the background, so the jquery scripts run and there's no element to change the class of.

Instead, I added a ready listener, and ran the jQuery script then, rather than in the document.ready block.

google.visualization.events.addListener(table, 'ready', function(){
    $(".google-visualization-table-table").attr('class', 'table');
    $("table").addClass( 'table-bordered table-condensed table-striped' );
    });

PS - you may want to try out removeClass instead, and chain your method calls - might be a bit faster

$(".google-visualization-table-table")
    .removeClass('google-visualization-table-table')
    .addClass('table table-bordered table-condensed table-striped');

Should work just as well, but will only affect this table, not other tables in your page

Update

Here is a new version which also removes all the child classes of the table. Its not very efficient to iterate over all the nodes and check each class to see if it starts with 'google-visualization', but I can't think of another way without a full list of all the classes to remove, and calling $() on each item anyway. http://jsfiddle.net/8Z75X/5/

It also has an extra jQuery call to reset the fixed width that google sets

.css("width", "");

Just mentioning ... this seems to be a lot of work to go through to reset Google's plugin back towards native html/js - is there a specific function you're looking for? There are plenty of lighter plugins for table sort or filtering, or just pure js/jquery to add rows to a table ...

Upvotes: 2

Related Questions