Vizualizarea tip tabel cu Google


Aveţi de afişat nişte date într-un tabel? V-ar fi util ca cel care vede datele să poată marca linii diferite din tabel? Sau să poată să sorteze după ce coloană doreşte? Dar ce aţi spune şi despre nişte indicatori vizuali la unele celule? Dacă nu sunteţi foarte-foarte pretenţioşi, instrumentul de vizualizare tip tabel oferit de Google vă poate fi de ajutor (Google oferă desigur mai multe instrumente, ex: grafice, dar ne oprim exclusiv la tabele). Documentaţia despre vizualizările Google şi API-urile aferente o găsiţi aici. În particular cea despre vizualizarea tip tabel o găsiţi aici.

După cum vedeţi din codul de mai jos (evident, pentru sintaxă şi lămuriri trebuie parcursă şi documentaţia… dar nu e deloc lungă, produsul neavând tone de facilităţi) este relativ simplu să defineşti coloanele, să adaugi datele, ba chiar şi să specifici nişte culori care să marcheze ceva anume. De exemplu mai jos am pus un tabel fictiv al unor persoane, cu salariul, vârsta şi sexul lor. Am paginat la 10 persoane. La cele cu salariul între 1.000 şi 1.299 RON am marcat cu albastru celula, iar peste cu roşu. De asemenea există un mic cod care să semnaleze marcarea unor linii. Pentru ca să fie o aplicaţie practică desigur codul trebuie dus mai departe, dar e un început bun, cred eu. Pentru a vedea în acţiune codul de mai jos daţi click aici (sursa completă a exemplului e aici). Ţineţi apăsat CTRL pentru a marca mai multe linii. Şi nu uitaţi să daţi click şi pe capetele de tabel. Simpatic, nu? Cred că instrumentul Google merită reţinut. Aşteptăm şi alte facilităţi la el.

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["table"]});
    google.setOnLoadCallback(drawTable);
    function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Nume');
        data.addColumn('number', 'Salar');
        data.addColumn('boolean', 'Sex masculin');
        data.addColumn('number', 'Varsta');
        data.addColumn('string', 'Localitate');
        data.addRows(12);
        data.setCell(0, 0, 'Ioan');
        data.setCell(0, 1, 1100, '1.100 RON');
        data.setCell(0, 2, true);
        data.setCell(0, 3, 23, '23 de ani');
        data.setCell(0, 4, 'Brasov');
        ...
        data.setCell(11, 0, 'Elena');
        data.setCell(11, 1, 920, '920 RON');
        data.setCell(11, 2, false);
        data.setCell(11, 3, 31, '31 de ani');
        data.setCell(11, 4, 'Iasi');
 
        var formatter = new google.visualization.TableColorFormat();
        formatter.addRange(1000, 1299, 'white', '#3958ab');
        formatter.addRange(1300, 2000, 'white', '#d1130f');
        formatter.format(data, 1);
 
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true, page: "enable", pageSize: 10, allowHtml: true});

        google.visualization.events.addListener(table, 'select', function() {
            people="";
            for(i=0;i<table.getSelection().length;i++){
                var row = table.getSelection()[i].row;
                people += data.getValue(row, 0)+" ";
            }
            alert(people);
         });
}
</script>
</head>
<body>
<div id="table_div"></div>
</body>
</html>

Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

1 comentariu

  1. gxg spune:

    O funcţie foarte interesanta! Păcat ca nu au integrat-o si in Google Docs…


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *