CODEWITHSUNDEEP
htmlcssgoogle-visualization
Blaze Phoenix
Blaze Phoenix

Reputation: 889

How do I center numbers in a table from Google Visualization API?

I am currently trying to help put together a website to display a lot of data from Google Sheets. In this I figured I would use the Google Visualization API to format the data so that I could show it in the way I would like. I have now found this incredibly frustrating.

What I would like to do is center a column of numbers, however all of the numbers will still right align when I center them using css.

The css is being applied like so: .center { text-align: center; } and I am applying the css as described by Google:

var cssClassNames = {
'headerRow': 'header-row',
'tableRow': 'table-row',
'oddTableRow': 'odd-table-row',
'selectedTableRow': 'selected-table-row',
'hoverTableRow': 'hover-table-row',
'headerCell': 'header-cell center',
'tableCell': 'table-cell',
'rowNumberCell': ''};

function loadGoogleDriveTable(elementID, documentKey, range, sheetID) {
    var query = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=' + documentKey + '&range=' + range + '&usp=drive_web&gid=' + sheetID + '#');
    query.send(function(response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }

        var options = { 'allowHtml': true, 'cssClassNames': cssClassNames };
        var data = response.getDataTable();
        var chart = new google.visualization.Table(document.getElementById(elementID));
        chart.draw(data, options);
    });
}

The tables load with all of the appropriate data, but don't change how they look.Here is a picture of what is happening.

Any help on this would be wonderful.

Upvotes: 0

Views: 3060

Answers (1)

juvian
juvian

Reputation: 16068

Well, this happens because even though your cell is displayed with your custom class, as its a number cell it also gives the cell a google-visualization-table-td-number class, which sets the text-align:right. To fix it, just change your style to ovewrite it: text-align: center !important;

Upvotes: 3

Related Questions