Tabelle dati e visualizzazioni dati

Questa pagina illustra la rappresentazione interna dei dati utilizzata dai grafici, le classi DataTable e DataView utilizzate per passare dati in un grafico e i vari modi per creare un'istanza e compilare un DataTable.

Contenuti

  1. Come sono rappresentati i dati in un grafico
  2. Quale schema di tabella utilizza il mio grafico?
  3. DataTables e DataView
  4. Creazione e compilazione di una tabella di dati
    1. Crea una nuova tabella di dati, quindi chiama addColumn()/addRows()/addRow()/setCell()
    2. arrayToDataTable()
    3. Inizializzatore letterale JavaScript
    4. Inviare una query sull'origine dati
  5. dataTableToCsv()
  6. Ulteriori informazioni

Come sono rappresentati i dati in un grafico

Tutti i grafici memorizzano i dati in una tabella. Di seguito è riportata una rappresentazione semplificata di una tabella di dati a due colonne compilata:

indice: 0
tipo: stringa
etichetta: 'Attività'

 indice: 1
tipo: numero
label: 'Ore al giorno'
'Lavoro' 11
"Mangiare" 2
"Tragitto giornaliero" 2
Guarda la TV 2
Sonno 7

I dati vengono archiviati in celle indicate come (riga, colonna), dove riga è un indice di riga in base zero e colonna è un indice di colonna in base zero o un ID univoco che puoi specificare.

Di seguito è riportato un elenco più completo degli elementi e delle proprietà della tabella supportati. Per ulteriori dettagli, consulta la sezione Formato del parametro letterale JavaScript del costruttore:

  • Tabella: un array di colonne e righe, oltre a una mappa facoltativa di coppie arbitrarie nome/valore che puoi assegnare. Al momento, le proprietà a livello di tabella non sono utilizzate dai grafici.
  • Colonne: ogni colonna supporta un tipo di dati obbligatorio, oltre a un'etichetta di stringa facoltativa, un ID, un pattern e una mappa di proprietà nome/valore arbitrarie. L'etichetta è una stringa facile da usare che può essere visualizzata nel grafico; l'ID è un identificatore facoltativo che può essere utilizzato al posto dell'indice di una colonna. Una colonna può essere indicata nel codice tramite un indice in base zero o l'ID facoltativo. Consulta l'DataTable.addColumn() per un elenco dei tipi di dati supportati.
  • Righe: una riga è un array di celle, oltre a una mappa facoltativa di coppie arbitrarie nome/valore che puoi assegnare.
  • Celle: ogni cella è un oggetto contenente un valore effettivo del tipo di colonna, più una versione facoltativa con formattazione in formato stringa del valore specificato. Ad esempio, a una colonna numerica potrebbe essere assegnato il valore 7 e il valore formattato "sette". Se viene fornito un valore formattato, un grafico utilizzerà il valore effettivo per i calcoli e il rendering, ma potrebbe mostrare il valore formattato ove appropriato, ad esempio se l'utente passa il mouse sopra un punto. Ogni cella ha anche una mappa facoltativa di coppie nome/valore arbitrarie.

Quale schema di tabella utilizza il mio grafico?

Grafici diversi utilizzano tabelle di formati diversi: ad esempio, un grafico a torta prevede una tabella a due colonne con una colonna di tipo stringa e una colonna numerica, in cui ogni riga descrive una fetta, mentre la prima colonna corrisponde all'etichetta della fetta e la seconda colonna al valore della fetta. Un grafico a dispersione, tuttavia, prevede una tabella composta da due colonne numeriche, in cui ogni riga rappresenta un punto e le due colonne corrispondono ai valori X e Y del punto. Leggi la documentazione del grafico per scoprire quale formato di dati richiede.

DataTables e DataView

Una tabella di dati del grafico è rappresentata in JavaScript da un oggetto DataTable o da un oggetto DataView. In alcuni casi, potresti vedere utilizzata una versione letterale JavaScript o JSON di una tabella di dati, ad esempio quando i dati vengono inviati su internet da un'origine dati di strumenti grafici o come possibile valore di input per una ChartWrapper.

Un DataTable viene utilizzato per creare la tabella di dati originale. Una DataView è una pratica classe che fornisce una visualizzazione di sola lettura di un DataTable, con metodi per nascondere o riordinare righe o colonne rapidamente senza modificare i dati originali collegati. Ecco un breve confronto tra le due classi:

DataTable DataView
Lettura/scrittura Solo lettura
Può essere creato vuoto e poi compilato È un riferimento a un DataTable esistente. Non può essere compilato da zero; deve essere creata un'istanza con un riferimento a un elemento DataTable esistente.
I dati occupano spazio di archiviazione. I dati sono un riferimento a un DataTable esistente e non occupano spazio.
Può aggiungere/modificare/eliminare righe, colonne e dati; inoltre, tutte le modifiche sono permanenti. Può ordinare o filtrare le righe senza modificare i dati sottostanti. Le righe e le colonne possono essere nascoste e visualizzate ripetutamente.
Possono essere clonati Può restituire una versione DataTable della vista
Sono dati di origine; non contengono riferimenti Un riferimento in tempo reale a un DataTable; qualsiasi modifica apportata ai dati di DataTable viene applicata immediatamente nella vista.
Possono essere trasmesse in un grafico come origine dati. Possono essere trasmesse in un grafico come origine dati.
Non supporta le colonne calcolate Supporta colonne calcolate, ovvero colonne con un valore calcolato all'istante combinando o manipolando altre colonne.
Le righe o le colonne non vengono nascoste Può nascondere o mostrare le colonne selezionate

Creazione e compilazione di una tabella di dati

Esistono diversi modi per creare e compilare una tabella di dati:

Tabella dati vuota + addColumn()/addRows()/addRow()/setCell()

Passi:

  1. Crea un'istanza per una nuova DataTable
  2. Aggiungi colonne
  3. Aggiungi una o più righe, facoltativamente completate con dati. Puoi aggiungere righe vuote e compilarle in un secondo momento. Puoi anche aggiungere o rimuovere altre righe o modificare singolarmente i valori delle celle.

Vantaggi:

  • Puoi specificare il tipo di dati e l'etichetta di ogni colonna.
  • Ideale per generare la tabella nel browser e meno soggetta a errori di battitura rispetto al metodo letterale JSON.

Svantaggi:

  • Non è utile come creare una stringa letterale JSON da passare a un costruttore DataTable quando si genera la pagina in modo programmatico su un server web.
  • Dipende dalla velocità del browser e può essere più lento rispetto alle stringhe letterali JSON con tabelle più grandi (più di 1000 celle).

Esempi:

Ecco alcuni esempi di creazione della stessa tabella di dati utilizzando diverse varianti di questa tecnica:

// ------- Version 1------------
// Add rows + data at the same time
// -----------------------------
var data = new google.visualization.DataTable();

// Declare columns
data.addColumn('string', 'Employee Name');
data.addColumn('datetime', 'Hire Date');

// Add data.
data.addRows([
  ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values.
  ['Bob', new Date(2007,5,1)],                              // More typically this would be done using a
  ['Alice', new Date(2006,7,16)],                           // formatter.
  ['Frank', new Date(2007,11,28)],
  ['Floyd', new Date(2005,3,13)],
  ['Fritz', new Date(2011,6,1)]
]);



// ------- Version 2------------
// Add empty rows, then populate
// -----------------------------
var data = new google.visualization.DataTable();
  // Add columns
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date');

  // Add empty rows
  data.addRows(6);
  data.setCell(0, 0, 'Mike');
  data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
  data.setCell(1, 0, 'Bob');
  data.setCell(1, 1, new Date(2007, 5, 1));
  data.setCell(2, 0, 'Alice');
  data.setCell(2, 1, new Date(2006, 7, 16));
  data.setCell(3, 0, 'Frank');
  data.setCell(3, 1, new Date(2007, 11, 28));
  data.setCell(4, 0, 'Floyd');
  data.setCell(4, 1, new Date(2005, 3, 13));
  data.setCell(5, 0, 'Fritz');
  data.setCell(5, 1, new Date(2007, 9, 2));

arrayToDataTable()

Questa funzione helper crea e compila un DataTable utilizzando una singola chiamata.

Vantaggi:

  • Codice eseguito nel browser molto semplice e leggibile.
  • Puoi specificare esplicitamente il tipo di dati di ogni colonna o lasciare che Google Graph determini il tipo di dati dai dati trasmessi.
    • Per specificare esplicitamente il tipo di dati di una colonna, specifica un oggetto nella riga di intestazione con la proprietà type.
    • Per consentire ai grafici di Google di dedurre il tipo, utilizza una stringa per l'etichetta della colonna.

Esempi:

var data = google.visualization.arrayToDataTable([
       ['Employee Name', 'Salary'],
       ['Mike', {v:22500, f:'22,500'}], // Format as "22,500".
       ['Bob', 35000],
       ['Alice', 44000],
       ['Frank', 27000],
       ['Floyd', 92000],
       ['Fritz', 18500]
      ],
      false); // 'false' means that the first row contains labels, not data.


var data = google.visualization.arrayToDataTable([
       [ {label: 'Year', id: 'year'},
         {label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type.
         {label: 'Expenses', id: 'Expenses', type: 'number'} ],
       ['2014', 1000, 400],
       ['2015', 1170, 460],
       ['2016', 660, 1120],
       ['2017', 1030, 540]]);

Inizializzatore letterale JavaScript

Puoi passare un oggetto letterale JavaScript al costruttore della tabella, definendo lo schema della tabella e anche i dati facoltativi.

Vantaggi:

  • Utile quando generi dati sul tuo server web.
  • Elabora più velocemente di altri metodi per tabelle di grandi dimensioni (oltre 1000 celle)

Svantaggi:

  • La sintassi è difficile da usare e soggetta a errori di battitura.
  • Codice non molto leggibile.
  • Temperamente simile, ma non identico, a JSON.

Esempio:

var data = new google.visualization.DataTable(
   {
     cols: [{id: 'task', label: 'Employee Name', type: 'string'},
            {id: 'startDate', label: 'Start Date', type: 'date'}],
     rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]},
            {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]},
            {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]},
            {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]},
            {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]},
            {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]}
           ]
   }
)

Invio di una query sull'origine dati

Quando invii una query a un'origine dati di Chart Tools, una risposta corretta è un'istanza DataTable. Questa DataTable restituita può essere copiata, modificata o copiata in un DataView come per qualsiasi altra DataTable.

function drawVisualization() {
    var query = new google.visualization.Query(
        'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');

    // Apply query language statement.
    query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    
    // Send the query with a callback function.
    query.send(handleQueryResponse);
  }

  function handleQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    var data = response.getDataTable();
    visualization = new google.visualization.LineChart(document.getElementById('visualization'));
    visualization.draw(data, {legend: 'bottom'});
  }

dataTableToCsv()

La funzione di supporto google.visualization.dataTableToCsv(dati) restituisce una stringa CSV con i dati della tabella dati.

L'input a questa funzione può essere una tabella o una visualizzazione.

Utilizza i valori formattati delle celle. Le etichette di colonna vengono ignorate.

I caratteri speciali come "," e "\n" vengono sottoposti a escape utilizzando le regole di escape standard in formato CSV.

Il seguente codice verrà visualizzato

Ramanujan,1729
Gauss,5050

nella console JavaScript del browser:

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
   google.charts.load("current", {packages:['corechart']});
   google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Name', 'Number'],
        ['Ramanujan', 1729],
        ['Gauss', 5050]
      ]);
    var csv = google.visualization.dataTableToCsv(data);
    console.log(csv);
  }
  </script>
  </head>
</html>

Ulteriori informazioni