Google Chart table with fixed footer

Create a google chart table with a footer which stays the same when sorting the data.

by Sivard Donkers

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://www.google.com/jsapi?fake=.js"></script>
<div class="container">
    <div id="ChartOverview">
        <div class="panel panel-primary">
            <div class="panel-heading">
                 <h3 class="panel-title">Overview by status</h3>

            </div>
            <div class="panel-body">
                <div id="StatusOverview"></div>
            </div>
        </div>
    </div>
</div>

CSS

.table .google-visualization-table-tr-odd, .table .google-visualization-table-tr-even {
    background-color: transparent;
}
#ChartOverview .table {
    margin-bottom: 0;
}
#ChartOverview .TotalRow {
    background-color: #e4e9f4;
}
#ChartOverview .TotalRow td {
    background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 100%);
    font-weight : 700;
}

JavaScript

// Load the Visualization API and the piechart package.

google.load('visualization', '1.1', {
    'packages': ['corechart', 'table']
});

//Declare formats
var formatterEuro = {
    decimalSymbol: ',',
    groupingSymbol: '.',
    negativeColor: 'red',
    negativeParens: true,
    prefix: '\u20AC '
};

var StatusTable;

//remove the google chart styling and add the bootstrap styling
//Also add the css class Totalrow
function resetStyling(id) {
    $('#' + id + ' table')
        .removeClass('google-visualization-table-table')
        .addClass('table table-bordered table-condensed table-striped table-hover');
    var parentRow = $('#' + id + ' td.TotalCell').parent();
    parentRow.addClass('TotalRow');
}

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawStatusOverview);

//function to set the table
function drawStatusOverview() {
    var data = new google.visualization.DataTable();

    //declare the columns
    data.addColumn('string', 'Month');
    data.addColumn('number', 'Paid');
    data.addColumn('number', 'Closed');
    data.addColumn('number', 'Open');
    data.addColumn('number', 'Total');

    //insert data here
    //don't forget to set the classname TotalCell to the last datarow!!!
    data.addRows(
    [
        ['01 January', 33664.1623484, 6754.679211, 20269.152451, 60687.9940104],
        ['02 February', 6894.7901695, 14026.975406, 31076.663498, 51998.4290735],
        ['03 March', 2314.6796105, 8888.0349325, 8571.290184, 19774.004727],
        ['04 April', 10171.8256945, 99042.2798356, 190723.2957312, 299937.4012613],
        ['05 May', 9212.3494167, 26528.891579, 72635.1342166, 108376.3752123],
        ['06 June', 12892.394701, 47555.2217235, 95529.3854462, 155977.0018707],
        ['07 July', 5851.81, 9128.2607485, 73953.3612021, 88933.4319506],
        ['08 August', 10690.472101, 25214.52797, 133623.1090245, 169528.1090955],
        ['09 September', 2381.05, 7614.9032605, 87363.838693,...