Sivard.nl
Van idee naar online oplossing
Sivard.nl
Van idee naar online oplossing
Sivard.nl
Van idee naar online oplossing
Sivard.nl
Van idee naar online oplossing

Handige code voor je Google charts

googlecharts 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.

  1. Geef een cell in de datarij van de totalen een classname.
    [{v: 'Total',    p: {className:'TotalCell'}},94535.0723656,244753.7746666,768757.6113841, 1108046.4584163]
  2. 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');  }
  3. Maak een ready event aan voor de datatable en roep de reset functie aan.
    google.visualization.events.addListener(StatusTable, 'ready', function(){     resetStyling('StatusOverview');  });
  4. 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');  });

     

 

Geplaatst in Blog, Google, Tools en links
Tags: , ,