Blog

Handige code voor je Google charts

20 oktober, 2015

Handige code voor je Google charts

Om snel grafieken en tabellen op je website te tonen kun je gebruik maken van de javascript library Google Charts. Op https://developers.google.com/chart/interactive/docs/quick_start kun je lezen hoe je deze library kunt inladen en gebruiken voor je eigen website. Hieronder vind je een aantal handige tips en code voorbeelden om deze grafieken en tabellen nog beter te maken. Om alles functies in actie te zien heb ik een kleine code voorbeeld gemaakt op jsfiddle. Zie https://jsfiddle.net/sivard/6t09jy69/ voor alle code.

Verwijderen van google chart table classes

Google charts levert een eigen styling bij zijn tabellen en grafieken. Vaak handig maar soms ook niet. Als je een tabel wilt tonen in de bootstrap styling kun je de volgende code in je functie zetten.

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

Toon euro bedragen in het juiste formaat

Met de NumberFormat methode kun je een geldbedrag in het juiste format (in dit geval de euro) weergeven.

// Load the Visualization API and the piechart package.
google.load('visualization', '1.1', {'packages':['corechart','table']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawStatusOverview);
function drawStatusOverview() {
    var data = new google.visualization.DataTable();
    //Add columns and set the type
    data.addColumn('string', 'Month');
    data.addColumn('number', 'Paid');
    data.addColumn('number', 'Closed');
    data.addColumn('number', 'Open');
    data.addRows( [ //add here your data ] );
    //set the euro format
    var formatter = new google.visualization.NumberFormat( {decimalSymbol: ',',groupingSymbol: '.', negativeColor: 'red', negativeParens: true, prefix: '\u20AC '} );
    //bind the format to the column
    formatter.format(data, 1);
    formatter.format(data, 2);
    formatter.format(data, 3);
    // set the table properties
    var dt = new google.visualization.ChartWrapper({ 'chartType': 'Table', 'dataTable': data, 'containerId': 'StatusOverview', 'options': { 'id' : 'StatusOverviewTable', 'width': '100%', 'showRowNumber' : false }, });
    //remove google classes and add the bootstrap classes
    google.visualization.events.addListener(dt, 'ready', function(){
        $(".google-visualization-table-table")
            .removeClass('google-visualization-table-table')
            .addClass('table table-bordered table-condensed table-striped');
    });
    //draw the table
    dt.draw();
}

Voeg een fixed footer toe die niet sorteert

Bij een tabel van Google Chart is het niet mogelijk om direct een footer aan een tabel toe te voegen. Dit is soms erg wenselijk als je een rij met totalen wilt tonen. Je kunt echter wel een rij toevoegen met totalen maar die wordt dan wel meegenomen in de sortering. Echter door slim gebruik te maken van classes en events binnen google charts kun je dit toch voor elkaar krijgen.

Geef een cell in de datarij van de totalen een classname.

[{v: 'Total',    p: {className:'TotalCell'}},94535.0723656,244753.7746666,768757.6113841, 1108046.4584163]

Maak een reset functie die een classname aan de rij toevoegd.

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

Maak een ready event aan voor de datatable en roep de reset functie aan.

google.visualization.events.addListener(StatusTable, 'ready', function(){
   resetStyling('StatusOverview');
});

Maak een sort event aan voor de datatable en zorg dat de laatste rij altijd als laatste blijft. Roep in dit event ook de reset functie aan aangezien de styling ook wordt gereset.

google.visualization.events.addListener(StatusTable,'sort', function(ev){
    //find the last row
    var    parentRow    =    $('#StatusOverview td.TotalCell').parent();
    //set the TotalRow row to the last row again.
    if (!parentRow.is(':last-child')){
        parentRow.siblings().last().after(parentRow);
    }
    //reset the styling of the table
    resetStyling('StatusOverview');
});