Riferimento dell'API di visualizzazione Google

In questa pagina sono elencati gli oggetti esposti dall'API di visualizzazione Google e i metodi standard esposti da tutte le visualizzazioni.

Nota: lo spazio dei nomi dell'API Google Preview è google.visualization.*

1. Classe DataTable
2. Classe DataView
3. Classe wrapper wrapper
4. Classe Editor di grafici
5. Metodi di manipolazione dei dati
   1. gruppo()
   2. join()
6. Formatori
   1. Formato Freccia
   2. Formato a barre
   3. FormatoColore
   4. Formato data
   5. NumeroFormato
   6. FormatoPattern
7. Corso GadgetHelper
8. Classi di query
   1. Query
   2. Risposta alle query
9. Classe di visualizzazione dell'errore
10. Eventi
    1. google.visualization.events.add listener()
    2. google.visualization.events.addOneTime listener()
    3. google.visualization.events.remove listener()
    4. google.visualization.events.removeAll listeners()
    5. google.visualization.events.trigger()
11. Metodi di visualizzazione e proprietà standard
    1. Costruttore
    2. draw()
    3. getAction()
    4. getSelection()
    5. removeAction()
    6. setAction()
    7. setSelection()
12. Metodi statici assortiti
    1. matriceDataData()
    2. drawChart()
    3. drawToolbar()

Nota sugli array

Alcuni browser non gestiscono correttamente le virgole finali negli array JavaScript, quindi non utilizzarle. È possibile utilizzare valori vuoti al centro dell'array. Quindi, ad esempio:

data = ['a','b','c', ,]; // BAD
data = ['a','b','c'];   // OK
data = ['a','b', ,'d']; // Also OK. The third value is undefined.

Classe DataTable

Rappresenta una tabella di valori bidimensionale e modificabile. Per creare una copia di sola lettura di un DataTable (filtrato facoltativamente per visualizzare valori, righe o colonne specifiche), crea una DataView.

A ogni colonna viene assegnato un tipo di dati, oltre a diverse proprietà facoltative tra cui un ID, un'etichetta e una stringa di pattern.

Inoltre, puoi assegnare proprietà personalizzate (coppie di nome/valore) a qualsiasi cella, riga, colonna o l'intera tabella. Alcune visualizzazioni supportano specifiche proprietà personalizzate; ad esempio, la visualizzazione tabella supporta una proprietà cella denominata "style", che ti consente di assegnare una stringa di stile CSS incorporata alla cella della tabella visualizzata. Una visualizzazione deve descrivere nella relativa documentazione le proprietà personalizzate supportate.

Vedi anche: QueryResponse.getDataTable

Costruttore

Sintassi

DataTable(opt_data, opt_version)

dati_opt

[Facoltativo] Dati utilizzati per inizializzare la tabella. Può essere il file JSON restituito chiamando DataTable.toJSON() su una tabella compilata o un oggetto JavaScript contenente i dati utilizzati per inizializzare la tabella. La struttura dell'oggetto letterale JavaScript è descritta qui. Se questo parametro non viene fornito, verrà restituita una nuova tabella di dati vuota.

versione_opt

[Facoltativo] Un valore numerico che specifica la versione del protocollo del cavo utilizzato. Questo viene utilizzato solo dagli implementatori della sorgente dati degli strumenti di creazione di grafici. La versione corrente è la 0.6.

Dettagli

L'oggetto DataTable viene utilizzato per conservare i dati trasmessi in una visualizzazione. DataTable è una tabella bidimensionale di base. Tutti i dati in ogni colonna devono avere lo stesso tipo di dati. Ogni colonna ha un descrittore che ne include il tipo di dati, un'etichetta per quella colonna (che potrebbe essere visualizzata da una visualizzazione) e un ID, che può essere utilizzato per fare riferimento a una colonna specifica (in alternativa all'uso degli indici delle colonne). L'oggetto DataTable supporta anche una mappa delle proprietà arbitrarie assegnate a un valore specifico, una riga, una colonna o l'intero DataTable. Le visualizzazioni possono utilizzare queste funzionalità per supportare funzionalità aggiuntive; ad esempio, la visualizzazione Tabella utilizza proprietà personalizzate per consentirti di assegnare nomi o stili di classe arbitrari a singole celle.

Ogni cella nella tabella contiene un valore. Le celle possono avere un valore nullo o un valore del tipo specificato dalla relativa colonna. Le celle possono facoltativamente contenere una versione "formattata" dei dati, ovvero una versione stringa dei dati, formattata per la visualizzazione in base a una visualizzazione. Una visualizzazione può (ma non è obbligatoria) per utilizzare la versione formattata per la visualizzazione, ma utilizzerà sempre i dati stessi per qualsiasi ordinamento o calcolo effettuato (ad esempio per determinare dove posizionare un punto su un grafico). Un esempio potrebbe essere assegnare i valori "bassa" "media" e "alta" come valori formattati ai valori numerici delle celle di 1, 2 e 3.

Per aggiungere righe di dati dopo aver chiamato il costruttore, puoi chiamare addRow() per una singola riga o addRows() per più righe. Puoi aggiungere colonne anche chiamando i metodi addColumn(). Esistono anche metodi di rimozione per righe e colonne ma, anziché rimuovere righe o colonne, valuta la possibilità di creare una DataView che sia una vista selettiva di DataTable.

Se modifichi i valori in un DataTable dopo che sono stati passati al metodo draw() di una visualizzazione, le modifiche non cambieranno immediatamente il grafico. Devi chiamare di nuovo draw() per riflettere le modifiche.

Nota: Google Tables non esegue alcuna convalida sulle tabelle dati. In caso contrario, il rendering dei grafici sarebbe più lento. Se fornisci un numero in cui la colonna prevede una stringa o viceversa, Google Tables farà del suo meglio per interpretare il valore in modo logico, ma non segnala gli errori.

Esempi

L'esempio seguente mostra l'istanza e l'inserimento di un DataTable con una stringa letterale, con gli stessi dati mostrati nell'esempio JavaScript sopra:

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
    }, 0.6);

L'esempio seguente crea un nuovo elemento DataTable vuoto e lo completa manualmente con gli stessi dati riportati sopra:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);

Devo creare la mia tabella DataTable in JavaScript o una notazione letterale dell'oggetto?

Puoi creare un DataTable chiamando il costruttore senza parametri, quindi aggiungendo valori chiamando i metodi addColumn()/addRows() elencati di seguito oppure trasmettendo un oggetto letterale JavaScript compilato per inizializzarlo. Entrambi i metodi sono descritti di seguito. Quale dovresti utilizzare?

• Creare e completare una tabella in JavaScript chiamando addColumn(), addRow() e addRows() è un codice molto leggibile. Questo metodo è utile quando devi inserire il codice a mano. È più lento rispetto all'uso della notazione letterale dell'oggetto (descritto di seguito), ma probabilmente nelle tabelle più piccole (ad esempio 1000 celle) non noterai molte differenze.
• La dichiarazione diretta dell'oggetto DataTable che utilizza la notazione letterale degli oggetti è notevolmente più veloce nelle tabelle di grandi dimensioni. Tuttavia, può essere necessaria una sintassi complessa per usarla correttamente; utilizzala se puoi generare la sintassi letterale dell'oggetto nel codice, il che riduce la possibilità di errori.

 

Metodi

Metodo	Valore restituito	Descrizione
addColumn(type, opt_label, opt_id) OPPURE addColumn(description_object)	Numero	Aggiunge una nuova colonna alla tabella dati e restituisce l'indice della nuova colonna. A tutte le celle della nuova colonna viene assegnato un valore null. Questo metodo ha due firme: La prima firma ha i seguenti parametri: type: una stringa con il tipo di dati dei valori della colonna. Il tipo può essere uno dei seguenti: 'string', 'number', 'boolean', 'date', 'datetime', e 'timeofday'. opt_label - [Facoltativo] Una stringa con l'etichetta della colonna. In genere, l'etichetta della colonna viene visualizzata come parte della visualizzazione, ad esempio sotto forma di intestazione di colonna in una tabella o come etichetta della legenda in un grafico a torta. Se non viene specificato alcun valore, viene assegnata una stringa vuota. opt_id: [facoltativo] una stringa con un identificatore univoco per la colonna. Se non viene specificato alcun valore, viene assegnata una stringa vuota. La seconda firma ha un singolo parametro oggetto con i seguenti membri: type: una stringa che descrive il tipo di dati della colonna. Stessi valori di type sopra. label - [Facoltativo, stringa] Un'etichetta per la colonna. id - [Facoltativo, stringa] Un ID per la colonna. role - [Facoltativo, stringa] Un ruolo per la colonna. pattern - [Facoltativo, stringa] Un formato numerico (o una data) che specifica come visualizzare il valore della colonna. Vedi anche: getColumnId, getColumnLabel, getColumnType, insertColumn, getColumnRole
addRow(opt_cellArray)	Numero	Aggiunge una nuova riga alla tabella dei dati e restituisce l'indice della nuova riga. opt_cellArray [facoltativo] Un oggetto riga, con notazione JavaScript, che specifica i dati per la nuova riga. Se questo parametro non è incluso, questo metodo aggiungerà semplicemente una nuova riga vuota alla fine della tabella. Questo parametro è un array di valori di celle: se vuoi specificare solo un valore di una cella, fornisci semplicemente il valore della cella (ad es. 55 o "hello'); se vuoi specificare un valore formattato e/o le proprietà per la cella, utilizza un oggetto cella (ad es. {v:55, f:'Cinquantacinque'}). Puoi combinare semplici valori e oggetti di cella nella stessa chiamata di metodo. Utilizza null o una voce di un array vuota per una cella vuota. Esempi: data.addRow(); // Add an empty row data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value. // Add a row with two cells, the second with a formatted value. data.addRow(['Hermione', {v: new Date(1999,0,1), f: 'January First, Nineteen ninety-nine'} ]); data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined. data.addRow(['Col1Val', , 'Col3Val']); // Same as previous.
addRows(numOrArray)	Numero	Aggiunge nuove righe alla tabella dati e restituisce l'indice dell'ultima riga aggiunta. Puoi chiamare questo metodo per creare nuove righe vuote o con i dati utilizzati per completare le righe, come descritto di seguito. numOrArray: un numero o un array: Numero: un numero che specifica quante righe nuove e non compilate aggiungere. Array: un array di oggetti row utilizzati per compilare un insieme di nuove righe. Ogni riga è un oggetto come descritto in addRow(). Utilizza null o una voce di array vuota per una cella vuota. Esempio: data.addRows([ ['Ivan', new Date(1977,2,28)], ['Igor', new Date(1962,7,5)], ['Felix', new Date(1983,11,17)], ['Bob', null] // No date set for Bob. ]); Vedi anche: insertRows
clone()	Tabella dati	Restituisce un clone della tabella dati. Il risultato è una copia completa della tabella dati, ad eccezione delle proprietà della cella, delle proprietà delle righe, delle proprietà della tabella e delle proprietà delle colonne, che sono copie superficiali; ciò significa che le proprietà non Primetive vengono copiate per riferimento, ma le proprietà primitive vengono copiate per valore.
getColumnId(columnIndex)	Stringa	Restituisce l'identificatore di una determinata colonna specificata dall'indice della colonna nella tabella sottostante. Per le tabelle di dati recuperate dalle query, l'identificatore di colonna viene impostato dall'origine dati e può essere utilizzato come riferimento per le colonne quando utilizzi il linguaggio di query. Vedi anche: Query.setQuery
getColumnIndex(columnIdentifier)	Stringa, numero	Restituisce l'indice di una determinata colonna specificata dall'indice, dall'ID o dall'etichetta della colonna, se esiste in questa tabella, altrimenti -1. Quando columnIdentifier è una stringa, viene utilizzata per trovare la colonna in base all'ID e poi all'etichetta. Vedi anche: getColumnId, getColumnLabel
getColumnLabel(columnIndex)	Stringa	Restituisce l'etichetta di una determinata colonna specificata dall'indice della colonna nella tabella sottostante. In genere, l'etichetta della colonna viene visualizzata come parte della visualizzazione. Ad esempio, l'etichetta di colonna può essere visualizzata come intestazione di colonna in una tabella o come etichetta della legenda in un grafico a torta. Per le tabelle di dati recuperate dalle query, l'etichetta della colonna viene impostata dall'origine dati o dalla clausola label del linguaggio di query. Vedi anche: setColumnLabel
getColumnPattern(columnIndex)	Stringa	Restituisce il pattern di formattazione utilizzato per formattare i valori della colonna specificata. columnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns(). Per le tabelle di dati recuperate dalle query, il pattern a colonne viene impostato dall'origine dati o dalla clausola format del linguaggio della query. Un esempio di pattern è '#,##0.00'. Per ulteriori informazioni sui pattern, consulta la pagina Riferimento linguaggio di query.
getColumnProperties(columnIndex)	Oggetto	Restituisce una mappa di tutte le proprietà per la colonna specificata. Tieni presente che l'oggetto delle proprietà viene restituito per riferimento, quindi se modifichi i valori nell'oggetto recuperato, li modifichi in DataTable. columnIndex è l'indice numerico della colonna per cui recuperare le proprietà.
getColumnProperty(columnIndex, name)	Automatica	Restituisce il valore di una proprietà denominata oppure null se non è impostata alcuna proprietà per la colonna specificata. Il tipo di reso varia a seconda della proprietà. columnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns(). name è il nome della proprietà, come stringa. Vedi anche: setColumnProperty setColumnProperties
getColumnRange(columnIndex)	Oggetto	Restituisce i valori minimi e massimi dei valori in una colonna specificata. L'oggetto restituito ha le proprietà min e max. Se l'intervallo non ha valori, min e max conterranno null. columnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns().
getColumnRole(columnIndex)	Stringa	Restituisce il ruolo della colonna specificata.
getColumnType(columnIndex)	Stringa	Restituisce il tipo di una determinata colonna specificata dall'indice della colonna. columnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns(). Il tipo di colonna restituito può essere uno dei seguenti: 'string', 'number', 'boolean', 'date', 'datetime', e 'timeofday'
getDistinctValues(columnIndex)	Array di oggetti	Restituisce i valori unici in una determinata colonna, in ordine crescente. columnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns(). Il tipo degli oggetti restituiti è uguale a quello restituito dal metodo getValue.
getFilteredRows(filters)	Array di oggetti	Restituisce gli indici delle righe per le righe che corrispondono a tutti i filtri specificati. Gli indici vengono restituiti in ordine crescente. L'output di questo metodo può essere utilizzato come input in DataView.setRows() per modificare l'insieme di righe visualizzate in una visualizzazione. filters: un array di oggetti che descrivono un valore di cella accettabile. Questo metodo restituisce un indice di riga se corrisponde a tutti i filtri specificati. Ogni filtro è un oggetto con una proprietà column numerica che specifica l'indice della colonna nella riga da valutare, più uno dei seguenti: Una proprietà value con un valore che deve corrispondere esattamente alla cella nella colonna specificata. Il valore deve essere dello stesso tipo della colonna oppure Una o entrambe le seguenti proprietà, lo stesso tipo della colonna filtrata: minValue: un valore minimo per la cella. Il valore della cella nella colonna specificata deve essere maggiore o uguale a questo valore. maxValue: un valore massimo per la cella. Il valore della cella nella colonna specificata deve essere inferiore o uguale a questo valore. Un valore nullo o non definito per minValue (o maxValue) indica che il limite inferiore (o superiore) dell'intervallo non verrà applicato. Un'altra proprietà facoltativa, test, specifica una funzione da combinare con il filtro per valore o intervallo. La funzione viene chiamata con il valore di cella, gli indici di riga e colonna e la tabella di dati. Dovrebbe essere restituito false se la riga deve essere esclusa dal risultato. Esempio: getFilteredRows([{column: 3, value: 42}, {column: 2, minValue: 'bar', maxValue: 'foo'}, {column: 1, test: (value, rowId, columnId, datatable) => { return value == "baz"; }}]) restituisce un array contenente, in ordine crescente, gli indici di tutte le righe per cui la quarta colonna (indice di colonna 3) è esattamente 42, e la terza colonna (indice di colonna 2) è compresa tra "bar" e "foo" (inclusi).
getFormattedValue(rowIndex, columnIndex)	Stringa	Restituisce il valore formattato della cella agli indici di riga e colonna specificati. rowIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di righe restituite dal metodo getNumberOfRows(). ColumnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns(). Per scoprire di più sulla formattazione dei valori delle colonne, consulta il riferimento per il linguaggio di query. Vedi anche: setFormattedValue
getNumberOfColumns()	Numero	Restituisce il numero di colonne nella tabella.
getNumberOfRows()	Numero	Restituisce il numero di righe nella tabella.
getProperties(rowIndex, columnIndex)	Oggetto	Restituisce una mappa di tutte le proprietà per la cella specificata. Tieni presente che l'oggetto delle proprietà viene restituito per riferimento, quindi se modifichi i valori nell'oggetto recuperato, li modifichi in DataTable. rowIndex è l'indice della riga della cella. columnIndex è l'indice della colonna della cella.
getProperty(rowIndex, columnIndex, name)	Automatica	Restituisce il valore di una proprietà denominata o null se nessuna di queste proprietà è impostata per la cella specificata. Il tipo di reso varia a seconda della proprietà. rowIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di righe restituite dal metodo getNumberOfRows(). columnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns(). name è una stringa con il nome della proprietà. Vedi anche: setCell setProperties setProperty
getRowProperties(rowIndex)	Oggetto	Restituisce una mappa di tutte le proprietà per la riga specificata. Tieni presente che l'oggetto delle proprietà viene restituito per riferimento, quindi se modifichi i valori nell'oggetto recuperato, li modifichi in DataTable. rowIndex è l'indice della riga per cui vuoi recuperare le proprietà.
getRowProperty(rowIndex, name)	Automatica	Restituisce il valore di una proprietà denominata o null se non è impostata alcuna proprietà per la riga specificata. Il tipo di reso varia a seconda della proprietà. rowIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di righe restituite dal metodo getNumberOfRows(). name è una stringa con il nome della proprietà. Vedi anche: setRowProperty setRowProperties
getSortedRows(sortColumns)	Array di numeri	Restituisce una versione ordinata della tabella senza modificare l'ordine dei dati sottostanti. Per ordinare definitivamente i dati sottostanti, chiama sort(). Puoi specificare l'ordinamento in diversi modi, a seconda del tipo trasmesso al parametro sortColumns: Un singolo numero specifica l'indice della colonna in base alla quale ordinare. L'ordinamento sarà in ordine crescente. Esempio: sortColumns(3) ordina in base alla quarta colonna, in ordine crescente. Un singolo oggetto che contiene il numero di indice della colonna da ordinare e una proprietà booleana facoltativa desc. Se il criterio desc è impostato su true, la colonna specifica viene ordinata in ordine decrescente; in caso contrario, l'ordinamento è in ordine crescente. Esempi: sortColumns({column: 3}) ordina in base alla quarta colonna, in ordine crescente; sortColumns({column: 3, desc: true}) ordina in base alla quarta colonna, in ordine decrescente. Una matrice dei numeri degli indici di colonna in base ai quali ordinare. Il primo numero è la colonna principale in base alla quale ordinare, il secondo è il secondo e così via. Ciò significa che quando due valori nella prima colonna sono uguali, vengono confrontati i valori nella colonna successiva e così via. Esempio: sortColumns([3, 1, 6]) verrà ordinato prima in base alla quarta colonna (in ordine crescente), poi in base alla seconda (in ordine crescente) e infine alla settima colonna (in ordine crescente). Un array di oggetti, ciascuno con il numero dell'indice della colonna da ordinare, e una proprietà booleana facoltativa desc. Se il criterio desc è impostato su true, la colonna specifica viene ordinata in ordine decrescente (il valore predefinito è in ordine crescente). Il primo è la colonna principale in base alla quale ordinare, il secondo è il secondo e così via. Ciò significa che quando due valori nella prima colonna sono uguali, vengono confrontati i valori nella colonna successiva e così via. Esempio: sortColumn([{column: 3}, {column: 1, desc: true}, {column: 6, desc: true}]) ordina prima la quarta colonna (in ordine crescente), poi la colonna 2 in ordine decrescente e infine la colonna 7 in ordine decrescente. Il valore restituito è un array di numeri, ognuno dei quali è un indice di una riga DataTable. L'iterazione delle righe DataTable in base all'ordine dell'array restituito restituirà righe ordinate in base al valore sortColumns specificato. L'output può essere utilizzato come input per DataView.setRows() per modificare rapidamente l'insieme di righe visualizzate in una visualizzazione. Tieni presente che l'ordinamento è garantito e che è stabile: questo significa che se ordini valori uguali a due righe, lo stesso ordinamento restituirà le righe nello stesso ordine ogni volta. Vedi anche: ordinamento Esempio: per eseguire l'iterazione delle righe ordinate dalla terza colonna, utilizza: var rowInds = data.getSortedRows([{column: 2}]); for (var i = 0; i < rowInds.length; i++) { var v = data.getValue(rowInds[i], 2); }
getTableProperties	Oggetto	Restituisce una mappa di tutte le proprietà per la tabella.
getTableProperty(name)	Automatica	Restituisce il valore di una proprietà denominata oppure null se non è impostata alcuna proprietà per la tabella. Il tipo di reso varia a seconda della proprietà. name è una stringa con il nome della proprietà. Vedi anche: setTableProperties setTableProperty
getValue(rowIndex, columnIndex)	Oggetto	Restituisce il valore della cella agli indici di riga e colonna specificati. rowIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di righe restituite dal metodo getNumberOfRows(). columnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns(). Il tipo di valore restituito dipende dal tipo di colonna (vedi getColumnType): Se il tipo di colonna è "stringa", il valore è una stringa. Se il tipo di colonna è "number", il valore è un numero. Se il tipo di colonna è "booleano", il valore è booleano. Se il tipo di colonna è "date" o "timestamp", il valore è un oggetto Date. Se il tipo di colonna è "timeofday", il valore è un array di quattro numeri: [ora, minuto, secondo, millisecondi]. Se il valore della cella è null, restituisce null.
insertColumn(columnIndex, type [,label [,id]])	Nessuno	Inserisce una nuova colonna alla tabella dei dati, in corrispondenza dell'indice specifico. Tutte le colonne esistenti corrispondenti o successive all'indice specificato vengono spostate in un indice più alto. columnIndex è un numero con l'indice richiesto della nuova colonna. type deve essere una stringa con il tipo di dati dei valori della colonna. Il tipo può essere uno dei seguenti: 'string', 'number', 'boolean', 'date', 'datetime', e 'timeofday'. label deve essere una stringa con l'etichetta della colonna. L'etichetta di colonna viene in genere visualizzata come parte della visualizzazione, ad esempio come intestazione di colonna in una tabella o come etichetta della legenda in un grafico a torta. Se non viene specificato alcun valore, viene assegnata una stringa vuota. id deve essere una stringa con un identificatore univoco per la colonna. Se non viene specificato alcun valore, viene assegnata una stringa vuota. Vedi anche: addColumn
insertRows(rowIndex, numberOrArray)	Nessuno	Inserisci il numero di righe specificato nell'indice delle righe specificato. rowIndex è il numero di indice in cui inserire le nuove righe. Verranno aggiunte le righe, a partire dal numero di indice specificato. numberOrArray è un numero di nuove righe vuote da aggiungere o un array di una o più righe completate da aggiungere all'indice. Consulta la pagina addRows() per la sintassi per aggiungere un array di oggetti di riga. Vedi anche: addRows
removeColumn(columnIndex)	Nessuno	Rimuove la colonna all'indice specificato. columnIndex deve essere un numero con un indice di colonna valido. Vedi anche: removeColumn
removeColumns(columnIndex, numberOfColumns)	Nessuno	Rimuove il numero specificato di colonne dalla colonna all'indice specificato. numberOfColumns indica il numero di colonne da rimuovere. columnIndex deve essere un numero con un indice di colonna valido. Vedi anche: removeColumn
removeRow(rowIndex)	Nessuno	Rimuove la riga all'indice specificato. rowIndex deve essere un numero con un indice di riga valido. Vedi anche: removeRows
removeRows(rowIndex, numberOfRows)	Nessuno	Rimuove il numero di righe specificato a partire dalla riga corrispondente all'indice specificato. numberOfRows è il numero di righe da rimuovere. rowIndex deve essere un numero con un indice di riga valido. Vedi anche: removeRow
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])	Nessuno	Imposta il valore, il valore formattato e/o le proprietà di una cella. rowIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di righe restituite dal metodo getNumberOfRows(). columnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns(). value [Facoltativo] è il valore assegnato alla cella specificata. Per evitare di sovrascrivere questo valore, imposta questo parametro su undefined. Per cancellare questo valore, impostalo su null. Il tipo di valore dipende dal tipo di colonna (vedi getColumnType()): Se il tipo di colonna è "stringa", il valore deve essere una stringa. Se il tipo di colonna è "number", il valore deve essere un numero. Se il tipo di colonna è "booleano", il valore deve essere booleano. Se il tipo di colonna è "date" o "timestamp", il valore deve essere un oggetto Date. Se il tipo di colonna è "timeofday", il valore deve essere una matrice di quattro numeri: [ora, minuto, secondo, millisecondi]. formattedValue [Facoltativo] è una stringa con il valore formattato come stringa. Per evitare di sovrascrivere questo valore, imposta questo parametro su undefined; per cancellare questo valore e per fare in modo che l'API applichi la formattazione predefinita a value secondo le esigenze, imposta questo valore su null; imposta un valore formattato in modo esplicito su una stringa vuota. Il valore formattato viene in genere utilizzato dalle visualizzazioni per mostrare le etichette dei valori. Ad esempio, il valore formattato può apparire come testo dell'etichetta all'interno di un grafico a torta. properties [Facoltativo] è Object (una mappa nome/valore) con proprietà aggiuntive per questa cella. Per evitare di sovrascrivere questo valore, imposta questo parametro su undefined. Per cancellare questo valore, impostalo su null. Alcune visualizzazioni supportano le proprietà di riga, colonna o cella per modificarne il comportamento o la visualizzazione; consulta la documentazione della visualizzazione per scoprire quali proprietà sono supportate. Vedi anche: setValue(), setFormattedValue(), setProperty(), setProperties().
setColumnLabel(columnIndex, label)	Nessuno	Imposta l'etichetta di una colonna. columnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns(). label è una stringa con l'etichetta da assegnare alla colonna. L'etichetta della colonna viene generalmente visualizzata come parte della visualizzazione. Ad esempio, l'etichetta di colonna può essere visualizzata come intestazione di colonna in una tabella o come etichetta della legenda in un grafico a torta. Vedi anche: getColumnLabel
setColumnProperty(columnIndex, name, value)	Nessuno	Imposta una proprietà a colonna singola. Alcune visualizzazioni supportano le proprietà di riga, colonna o cella per modificarne la visualizzazione o il comportamento; consulta la documentazione della visualizzazione per scoprire quali proprietà sono supportate. columnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns(). name è una stringa con il nome della proprietà. value è un valore di qualsiasi tipo da assegnare alla proprietà con nome della colonna specificata. Vedi anche:setColumnProperties getColumnProperty
setColumnProperties(columnIndex, properties)	Nessuno	Imposta più proprietà di colonna. Alcune visualizzazioni supportano le proprietà di riga, colonna o cella per modificarne la visualizzazione o il comportamento; consulta la documentazione della visualizzazione per scoprire quali proprietà sono supportate. columnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns(). properties è un elemento Object (mappa nome/valore) con proprietà aggiuntive per questa colonna. Se null è specificato, tutte le proprietà aggiuntive della colonna verranno rimosse. Vedi anche: setColumnProperty getColumnProperty
setFormattedValue(rowIndex, columnIndex, formattedValue)	Nessuno	Imposta il valore formattato di una cella. rowIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di righe restituite dal metodo getNumberOfRows(). columnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns(). formattedValue è una stringa con il valore formattato per la visualizzazione. Per cancellare questo valore e fare in modo che l'API applichi la formattazione predefinita al valore della cella, se necessario, imposta formatValue null; per impostare esplicitamente un valore vuoto, impostalo su una stringa vuota. Vedi anche: getFormattedValue
setProperty(rowIndex, columnIndex, name, value)	Nessuno	Imposta una proprietà di cella. Alcune visualizzazioni supportano le proprietà di riga, colonna o cella per modificare il loro comportamento o visualizzazione; consulta la documentazione della visualizzazione per vedere quali proprietà sono supportate. rowIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di righe restituite dal metodo getNumberOfRows(). columnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns(). name è una stringa con il nome della proprietà. value è un valore di qualsiasi tipo da assegnare alla proprietà con nome della cella specificata. Vedi anche: setCell setProperties getProperty
setProperties(rowIndex, columnIndex, properties)	Nessuno	Imposta più proprietà di cella. Alcune visualizzazioni supportano le proprietà di riga, colonna o cella per modificarne la visualizzazione o il comportamento; consulta la documentazione della visualizzazione per scoprire quali proprietà sono supportate. rowIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di righe restituite dal metodo getNumberOfRows(). columnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns(). properties è una Object (mappa nome/valore) con proprietà aggiuntive per questa cella. Se null è specificato, tutte le proprietà aggiuntive della cella verranno rimosse. Vedi anche: setCell setProperty getProperty
setRowProperty(rowIndex, name, value)	Nessuno	Imposta una proprietà di riga. Alcune visualizzazioni supportano le proprietà di riga, colonna o cella per modificare il loro comportamento o visualizzazione; consulta la documentazione della visualizzazione per vedere quali proprietà sono supportate. rowIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di righe restituite dal metodo getNumberOfRows(). name è una stringa con il nome della proprietà. value è un valore di qualsiasi tipo da assegnare alla proprietà con nome della riga specificata. Vedi anche: setRowProperties getRowProperty
setRowProperties(rowIndex, properties)	Nessuno	Imposta più proprietà riga. Alcune visualizzazioni supportano le proprietà di riga, colonna o cella per modificarne la visualizzazione o il comportamento; consulta la documentazione di visualizzazione per vedere quali proprietà sono supportate. rowIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di righe restituite dal metodo getNumberOfRows(). properties è un elemento Object (mappa nome/valore) con proprietà aggiuntive per questa riga. Se null è specificato, tutte le proprietà aggiuntive della riga verranno rimosse. Vedi anche: setRowProperty getRowProperty
setTableProperty(name, value)	Nessuno	Imposta una sola proprietà della tabella. Alcune visualizzazioni supportano le proprietà di tabella, riga, colonna o cella per modificarne la visualizzazione o il comportamento; consulta la documentazione della visualizzazione per scoprire quali proprietà sono supportate. name è una stringa con il nome della proprietà. value è un valore di qualsiasi tipo da assegnare alla proprietà con nome della tabella. Vedi anche: setTableProperties getTableProperty
setTableProperties(properties)	Nessuno	Imposta più proprietà della tabella. Alcune visualizzazioni supportano le proprietà di tabella, riga, colonna o cella per modificarne la visualizzazione o il comportamento; consulta la documentazione della visualizzazione per scoprire quali proprietà sono supportate. properties è un Object (mappa nome/valore) con proprietà aggiuntive per la tabella. Se null è specificato, tutte le proprietà aggiuntive della tabella verranno rimosse. Vedi anche: setTableProperty getTableProperty
setValue(rowIndex, columnIndex, value)	Nessuno	Imposta il valore di una cella. Oltre a sovrascrivere il valore esistente della cella, questo metodo cancellerà anche eventuali valori e proprietà formattati per la cella. rowIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di righe restituite dal metodo getNumberOfRows(). columnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns(). Questo metodo non consente di impostare un valore formattato per questa cella; a tale scopo, chiama setFormattedValue(). value è il valore assegnato alla cella specificata. Il tipo di valore restituito dipende dal tipo di colonna (vedi getColumnType): Se il tipo di colonna è "stringa", il valore deve essere una stringa. Se il tipo di colonna è "number", il valore deve essere un numero. Se il tipo di colonna è "booleano", il valore deve essere booleano. Se il tipo di colonna è "date" o "timestamp", il valore deve essere un oggetto Date. Se il tipo di colonna è "timeofday", il valore deve essere una matrice di quattro numeri: [ora, minuto, secondo, millisecondi]. Per qualsiasi tipo di colonna, il valore può essere impostato su null. Vedi anche: setCell, setFormattedValue, setProperty e setProperties
sort(sortColumns)	Nessuno	Ordina le righe in base alle colonne di ordinamento specificate. DataTable viene modificato da questo metodo. Consulta getSortedRows() per una descrizione dei dettagli dell'ordinamento. Questo metodo non restituisce i dati ordinati. Vedi anche: getOrdinaedRows Esempio: per ordinare i dati in base alla terza colonna e poi alla seconda colonna, utilizza: data.sort([{column: 2}, {column: 1}]);
toJSON()	Stringa	Restituisce una rappresentazione JSON di DataTable che può essere passato nel costruttore DataTable. Ad esempio: {"cols":[{"id":"Col1","label":"","type":"date"}], "rows":[ {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]}, {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]} ] }

Formato del parametro data letterale JavaScript del costruttore

Puoi inizializzare un DataTable passando un oggetto letterale della stringa JavaScript nel parametro data. Chiameremo questo oggetto l'oggetto data. Puoi programmare questo oggetto manualmente, secondo la descrizione riportata di seguito, oppure puoi utilizzare una libreria Python di supporto se sai come utilizzare Python e il tuo sito può utilizzarlo. Tuttavia, se vuoi costruire l'oggetto manualmente, questa sezione descriverà la sintassi.

Innanzitutto, mostriamo un esempio di un oggetto JavaScript semplice che descrive una tabella con tre righe e tre colonne (tipi di stringa, numero e data):

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ],
  p: {foo: 'hello', bar: 'world!'}
}

Ora descriviamo la sintassi:

L'oggetto data è costituito da due proprietà di primo livello obbligatorie, cols e rows, e da una proprietà p facoltativa che è una mappa di valori arbitrari.

Nota: tutti i nomi delle proprietà e le costanti stringa mostrate sono sensibili alle maiuscole. Inoltre, le proprietà descritte come contenenti un valore stringa devono includere il valore tra virgolette. Ad esempio, se vuoi specificare la proprietà type come numero, viene espressa in questo modo: type: 'number', ma il valore in sé, in formato numerico, viene espresso in questo modo: v: 42

Proprietà cols

cols è un array di oggetti che descrivono l'ID e il tipo di ogni colonna. Ogni proprietà è un oggetto con le seguenti proprietà (sensibili alle maiuscole):

• type [Obbligatorio] Tipo di dati relativi alla colonna. Supporta i seguenti valori di stringa (ad esempio, la proprietà v: descritta in seguito):
  • 'boolean': valore booleano JavaScript ("true' o 'false'). Valore di esempio: v:'true'
  • 'number' - Valore del numero JavaScript. Valori di esempio: v:7, v:3.14 e v:-55
  • 'string' - valore stringa JavaScript. Valore di esempio: v:'hello'
  • 'date' - Oggetto data JavaScript (mese in base zero), con l'ora troncata. Valore di esempio: v:new Date(2008, 0, 15)
  • 'timestamp': l'oggetto JavaScript che include l'ora. Valore di esempio: v:new Date(2008, 0, 15, 14, 30, 45)
  • 'timeofday': array di tre numeri e un quarto facoltativo, che rappresenta l'ora (0 indica la mezzanotte), i minuti, i secondi e i millisecondi facoltativi. Valori di esempio: v:[8, 15, 0], v: [6, 12, 1, 144]
• id [Facoltativo] ID stringa della colonna. Deve essere univoco nella tabella. Utilizza caratteri alfanumerici di base in modo che la pagina host non richieda caratteri di escape complessi per accedere alla colonna in JavaScript. Fai attenzione a non scegliere una parola chiave JavaScript. Esempio: id:'col_1'
• label [Facoltativo] Valore della stringa mostrato per alcune visualizzazioni di questa colonna. Esempio: label:'Height'
• pattern [Facoltativo] Pattern stringa utilizzato da un'origine dati per formattare i valori delle colonne numeriche, relative alla data o all'ora. Solo a scopo di riferimento; probabilmente non dovrai leggere il pattern e non è necessario che esista. Il client di visualizzazione Google non utilizza questo valore (legge il valore formattato della cella). Se DataTable proviene da un'origine dati in risposta a una query con una clausola format, il pattern specificato in tale clausola verrà probabilmente restituito in questo valore. Gli standard di pattern consigliati sono l'ICU DecimalFormat e SimpleDateFormat .
• p [Facoltativo] Un oggetto che è una mappa dei valori personalizzati applicati alla cella. Questi valori possono essere di qualsiasi tipo JavaScript. Se la tua visualizzazione supporta le proprietà a livello di cella, le descriverà; in caso contrario, questa proprietà verrà ignorata. Esempio: p:{style: 'border: 1px solid green;'}.

Esempio di cols

cols: [{id: 'A', label: 'NEW A', type: 'string'},
       {id: 'B', label: 'B-label', type: 'number'},
       {id: 'C', label: 'C-label', type: 'date'}]

rows Proprietà

La proprietà rows contiene un array di oggetti di riga.

Ogni oggetto riga ha una proprietà obbligatoria denominata c, che è un array di celle nella riga. Ha anche una proprietà p facoltativa che definisce una mappa di valori personalizzati arbitrari da assegnare all'intera riga. Se la tua visualizzazione supporta le proprietà a livello di riga, le descriverà; in caso contrario, questa proprietà verrà ignorata.

Oggetti cella

Ogni cella nella tabella è descritta da un oggetto con le seguenti proprietà:

• v [Facoltativo] Il valore della cella. Il tipo di dati deve corrispondere al tipo di dati della colonna. Se la cella è null, la proprietà v deve essere null, ma può avere comunque proprietà f e p.
• f [Facoltativo] Una versione della stringa del valore v, formattata per la visualizzazione. In genere i valori corrisponderanno, anche se non è necessario, quindi se specifichi Date(2008, 0, 1) per v, devi specificare "1 gennaio 2008" o una stringa di questo tipo per questa proprietà. Questo valore non viene confrontato con il valore v. La visualizzazione non utilizzerà questo valore per il calcolo, ma solo come etichetta per la visualizzazione. Se omessa, la versione della stringa v verrà generata automaticamente utilizzando il formattatore predefinito. I valori f possono essere modificati utilizzando il tuo formatore oppure impostati con setFormattedValue() o setCell() oppure recuperati con getFormattedValue().
• p [Facoltativo] Un oggetto che è una mappa dei valori personalizzati applicati alla cella. Questi valori possono essere di qualsiasi tipo JavaScript. Se la tua visualizzazione supporta le proprietà a livello di cella, le descriverà. Queste proprietà possono essere recuperate con i metodi getProperty() e getProperties(). Esempio: p:{style: 'border: 1px solid green;'}.

Le celle nella matrice di righe devono essere nello stesso ordine delle descrizioni delle colonne in cols. Per indicare una cella nulla, puoi specificare null, lasciare vuoto uno spazio per una cella in un array o omettere i membri dell'array finale. Quindi, per indicare una riga con null per le prime due celle, puoi specificare [ , , {cell_val}] o [null, null, {cell_val}].

Di seguito è riportato un oggetto tabella di esempio con tre colonne riempite con tre righe di dati:

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ]
}

Proprietà p

La proprietà p a livello di tabella è una mappa dei valori personalizzati applicati all'intero DataTable. Questi valori possono essere di qualsiasi tipo JavaScript. Se la tua visualizzazione supporta le proprietà a livello di dati, le descriverà; in caso contrario, questa proprietà sarà disponibile per l'uso con l'applicazione. Esempio: p:{className: 'myDataTable'}.

Classe DataView

Una visualizzazione di sola lettura di una DataTable sottostante. Un DataView consente di selezionare solo un sottoinsieme delle colonne e/o delle righe. Inoltre, consente di riordinare le colonne/righe e di duplicare le colonne/righe.

Una visualizzazione è una finestra in tempo reale sul DataTable sottostante, non un'istantanea statica dei dati. Tuttavia, devi comunque prestare attenzione quando modifichi la struttura della tabella stessa, come descritto qui:

• L'aggiunta o la rimozione di colonne dalla tabella sottostante non verrà applicata dalla vista e potrebbe causare un comportamento imprevisto nella vista. Per raccogliere queste modifiche, dovrai creare un nuovo DataView da DataTable.
• L'aggiunta o la rimozione di righe dalla tabella sottostante è sicura e le modifiche verranno propagate immediatamente alla visualizzazione (ma devi chiamare draw() su tutte le visualizzazioni dopo questa modifica per vedere la nuova riga impostata). Tieni presente che se la vista ha filtrato le righe chiamando uno dei metodi setRows() or hideRows() e aggiungi o rimuovi righe dalla tabella sottostante, il comportamento non è previsto; devi creare un nuovo DataView per riflettere la nuova tabella.
• La modifica dei valori delle celle nelle celle esistenti è sicura e le modifiche vengono immediatamente propagate a DataView (ma dopo questa modifica devi chiamare draw() per visualizzare i nuovi valori delle celle).

È anche possibile creare un DataView da un altro DataView. Ogni volta che viene menzionata una tabella o una vista sottostante, viene fatto riferimento al livello immediatamente inferiore a questo livello. In altre parole, si riferisce all'oggetto di dati utilizzato per creare questo DataView.

DataView supporta anche le colonne calcolate, ovvero il cui valore viene calcolato in tempo reale utilizzando una funzione da te fornita. Ad esempio, puoi includere una colonna che sia la somma di due colonne precedenti o una colonna che calcoli e mostri il trimestre di una data di un'altra colonna. Per ulteriori dettagli, consulta setColumns().

Quando modifichi un elemento DataView nascondendo o mostrando righe o colonne, la visualizzazione non avrà effetto finché non richiami draw() nella visualizzazione.

Puoi combinare DataView.getFilteredRows() con DataView.setRows() per creare un DataView con un sottoinsieme di dati interessante, come mostrato qui:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
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));

// Create a view that shows everyone hired since 2007.
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}]));
var table = new google.visualization.Table(document.getElementById('test_dataview'));
table.draw(view, {sortColumn: 1});

Costruttori

Puoi creare una nuova istanza DataView in due modi:

Costruttore 1

var myView = new google.visualization.DataView(data)

data

Un DataTable o un DataView utilizzato per inizializzare la visualizzazione. Per impostazione predefinita, la visualizzazione contiene tutte le colonne e le righe nella tabella o nella vista dati sottostante, nell'ordine originale. Per nascondere o mostrare righe o colonne in questa visualizzazione, chiama i metodi set...() o hide...() appropriati.

Vedi anche:

setColonne(), hideColumn(), setRows(), hideRows().

 

Costruttore 2

Questo costruttore crea un nuovo elemento DataView assegnando un elemento DataView serializzato a un elemento DataTable. Consente di ricreare il DataView che hai serializzato utilizzando DataView.toJSON().

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)

dati

L'oggetto DataTable che hai utilizzato per creare la risorsa DataView, per cui hai chiamato DataView.toJSON(). Se questa tabella è diversa dalla tabella originale, otterrai risultati imprevedibili.

visualizzaAsJson

La stringa JSON restituita da DataView.toJSON(). Questa è una descrizione delle righe da mostrare o nascondere dalla tabella dati data.

Metodi

Metodo	Valore restituito	Descrizione
getColumnId getColumnLabel getColumnPattern getColumnProperty getColumnRange getColumnType getDistinctValues getFilteredRows getFormattedValue getNumberOfColumns getNumberOfRows getProperty getProperties getRowProperty getSortedRows getTableProperty getValue	Vedi le descrizioni in DataTable.	Come i metodi DataTable equivalenti, ad eccezione del fatto che gli indici di riga/colonna fanno riferimento all'indice nella vista e non nella tabella/visualizzazione sottostante.
getTableColumnIndex(viewColumnIndex)	Numero	Restituisce l'indice nella tabella (o nella vista) sottostante di una determinata colonna specificata dal suo indice in questa visualizzazione. viewColumnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns(). Restituisce -1 se si tratta di una colonna generata. Esempio: se setColumns([3, 1, 4]) era stato chiamato in precedenza, getTableColumnIndex(2) restituirà 4.
getTableRowIndex(viewRowIndex)	Numero	Restituisce l'indice nella tabella (o nella vista) sottostante di una determinata riga specificata dal suo indice in questa visualizzazione. viewRowIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di righe restituite dal metodo getNumberOfRows(). Esempio: se setRows([3, 1, 4]) era stato chiamato in precedenza, getTableRowIndex(2) restituirà 4.
getViewColumnIndex(tableColumnIndex)	Numero	Restituisce l'indice in questa visualizzazione che viene mappato a una determinata colonna specificata dal suo indice nella tabella (o visualizzazione) sottostante. Se esiste più di un indice di questo tipo, restituisce il primo (il più piccolo). Se questo indice non esiste (la colonna specificata non è nella vista), restituisce -1. tableColumnIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di colonne restituite dal metodo getNumberOfColumns() della tabella/visualizzazione sottostante. Esempio: se setColumns([3, 1, 4]) era stato chiamato in precedenza, getViewColumnIndex(4) restituirà 2.
getViewColumns()	Array di numeri	Restituisce le colonne in questa visualizzazione in ordine, Ciò significa che se chiami setColumns con un array e poi chiami getViewColumns() dovresti ottenere un array identico.
getViewRowIndex(tableRowIndex)	Numero	Restituisce l'indice in questa visualizzazione che viene mappato a una determinata riga specificata dal suo indice nella tabella (o visualizzazione) sottostante. Se esiste più di un indice di questo tipo, restituisce il primo (il più piccolo). Se questo indice non esiste (la riga specificata non è presente nella vista), restituisce -1. tableRowIndex deve essere un numero maggiore o uguale a zero e inferiore al numero di righe restituite dal metodo getNumberOfRows() della tabella/visualizzazione sottostante. Esempio: se setRows([3, 1, 4]) era stato chiamato in precedenza, getViewRowIndex(4) restituirà 2.
getViewRows()	Array di numeri	Restituisce le righe in questa visualizzazione, in ordine. Ciò significa che se chiami setRows con un array e poi chiami getViewRows() dovresti ottenere un array identico.
hideColumns(columnIndexes)	Nessuno	Nasconde le colonne specificate dalla visualizzazione corrente. columnIndexes è un array di numeri che rappresentano gli indici delle colonne da nascondere. Questi indici sono i numeri dell'indice nella tabella/visualizzazione sottostante. I numeri in columnIndexes non devono essere in ordine (ovvero, [3,4,1] va bene). Quando continui a eseguire l'iterazione, le colonne rimanenti ne mantengono l'ordine. L'inserimento di un numero di indice per una colonna già nascosta non è un errore, ma inserisce un indice che non esiste nella tabella/visualizzazione sottostante genera un errore. Per mostrare le colonne, chiama setColumns(). Esempio: se hai una tabella con 10 colonne, chiami setColumns([2,7,1,7,9]) e poi hideColumns([7,9]), le colonne nella vista saranno [2,1].
hideRows(min, max)	Nessuno	Nasconde tutte le righe con indici compresi tra min e max (inclusi) dalla visualizzazione corrente. Questa è una sintassi pratica per hideRows(rowIndexes) sopra. Ad esempio, hideRows(5, 10) equivale a hideRows([5, 6, 7, 8, 9, 10]).
hideRows(rowIndexes)	Nessuno	Nasconde le righe specificate dalla visualizzazione corrente. rowIndexes è un array di numeri che rappresentano gli indici delle righe da nascondere. Questi indici sono i numeri dell'indice nella tabella/visualizzazione sottostante. Non è necessario che i numeri in rowIndexes siano in ordine (ovvero, [3,4,1] va bene). L'ordine di indicizzazione delle righe rimanenti viene mantenuto. L'inserimento di un numero di indice per una riga già nascosta non è un errore, ma l'inserimento di un indice che non esiste nella tabella/visualizzazione sottostante genererà un errore. Per mostrare di nuovo le righe, chiama setRows(). Esempio: se hai una tabella con 10 righe, chiami setRows([2,7,1,7,9]) e poi hideRows([7,9]), le righe nella vista saranno [2,1].
setColumns(columnIndexes)	Nessuno	Specifica le colonne visibili in questa visualizzazione. Le colonne non specificate verranno nascoste. Si tratta di un array di indici di colonne nella tabella/visualizzazione sottostante o in colonne calcolate. Se non chiami questo metodo, l'impostazione predefinita è visualizzare tutte le colonne. L'array può anche contenere duplicati, per mostrare la stessa colonna più volte. Le colonne verranno mostrate nell'ordine specificato. columnIndexes: un array di numeri e/o oggetti (possono essere misti): I numeri specificano l'indice della colonna di dati di origine da includere nella visualizzazione. I dati non vengono modificati. Se devi definire esplicitamente un ruolo o più proprietà di colonna, specifica un oggetto con una proprietà sourceColumn. Gli oggetti specificano una colonna calcolata. Una colonna calcolata crea un valore all'istante per ogni riga e lo aggiunge alla visualizzazione. L'oggetto deve avere le seguenti proprietà: calc [funzione] - Una funzione che verrà chiamata per ogni riga della colonna per calcolare un valore per quella cella. La firma della funzione è func(dataTable, row), dove dataTable è l'origine DataTable e row è l'indice della riga dei dati di origine. La funzione deve restituire un singolo valore del tipo specificato da type. type [string]. Il tipo JavaScript del valore restituito dalla funzione calc. label [Facoltativo, string]. Un'etichetta facoltativa da assegnare a questa colonna generata. Se non specificata, la colonna di visualizzazione non avrà un'etichetta. id [Facoltativo, string]: un ID facoltativo da assegnare a questa colonna generata. sourceColumn - [Facoltativo, numero] La colonna di origine da utilizzare come valore; se specificato, non specificare la proprietà calc o type. È simile al trasferimento di un numero anziché a un oggetto, ma consente di specificare un ruolo e delle proprietà per la nuova colonna. properties [Facoltativo, oggetto]: un oggetto contenente eventuali proprietà arbitrarie da assegnare a questa colonna. Se non specificata, la colonna di visualizzazione non avrà proprietà. role [Facoltativo, string] - Un ruolo da assegnare a questa colonna. Se non specificato, il ruolo esistente non verrà importato. Esempi: // Show some columns directly from the underlying data. // Shows column 3 twice. view.setColumns([3, 4, 3, 2]); // Underlying table has a column specifying a value in centimeters. // The view imports this directly, and creates a calculated column // that converts the value into inches. view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]); function cmToInches(dataTable, rowNum){ return Math.floor(dataTable.getValue(rowNum, 1) / 2.54); }
setRows(min, max)	Nessuno	Imposta le righe in questa vista in modo che siano tutti gli indici (nella tabella/visualizzazione sottostante) che si trovano tra min e max (inclusi). Di seguito è riportata una sintassi di convenienza per setRows(rowIndexes). Ad esempio, setRows(5, 10) equivale a setRows([5, 6, 7, 8, 9, 10]).
setRows(rowIndexes)	Nessuno	Imposta le righe visibili in questa visualizzazione, in base ai numeri dell'indice della tabella/visualizzazione sottostante. rowIndexes deve essere un array di numeri di indice che specifica quali righe mostrare nella visualizzazione. L'array specifica l'ordine in cui mostrare le righe e le righe possono essere duplicate. Tieni presente che verranno mostrate solo le righe specificate in rowIndexes; questo metodo cancella tutte le altre righe dalla visualizzazione. L'array può anche contenere duplicati, duplicando di fatto la riga specificata in questa visualizzazione (ad esempio, setRows([3, 4, 3, 2]) farà sì che la riga 3 venga visualizzata due volte in questa visualizzazione). L'array fornisce quindi una mappatura delle righe dalla tabella/visualizzazione sottostante a questa visualizzazione. Puoi utilizzare getFilteredRows() o getSortedRows() per generare un input per questo metodo. Esempio: per creare una vista con le righe tre e zero di una tabella/visualizzazione sottostante: view.setRows([3, 0])
toDataTable()	Tabella dati	Restituisce un oggetto DataTable completato con le righe e le colonne visibili di DataView.
toJSON()	string	Restituisce una rappresentazione stringa di questo elemento DataView. Questa stringa non contiene i dati effettivi; contiene solo le impostazioni specifiche di DataView, come le righe e le colonne visibili. Puoi archiviare questa stringa e trasmetterla al DataView.fromJSON() costruttore statico per ricrearla. Non sono incluse le colonne generate.

Classe Wrapper

Una classe ChartWrapper viene utilizzata per il wrapping del grafico e la gestione di tutte le query di caricamento, disegno e origine dati per il grafico. La classe espone i metodi di convenienza per impostare i valori sul grafico e tracciarlo. Questa classe semplifica la lettura da un'origine dati, poiché non è necessario creare un gestore di callback di query. Puoi anche utilizzarlo per salvare facilmente un grafico per riutilizzarlo.

Un altro vantaggio dell'utilizzo di ChartWrapper è che puoi ridurre il numero di caricamenti delle librerie tramite il caricamento dinamico. Inoltre, non è necessario caricare i pacchetti in modo esplicito perché ChartWrapper gestirà la ricerca e il caricamento dei pacchetti nel grafico per tuo conto. Vedi gli esempi di seguito per i dettagli.

Tuttavia, ChartWrapper attualmente propaga solo un sottoinsieme di eventi generati dai grafici: seleziona, pronto ed errore. Gli altri eventi non vengono trasmessi tramite l'istanza di ChartWrapper. Per ottenere altri eventi, devi chiamare getChart() e iscriverti agli eventi direttamente dall'handle del grafico, come mostrato di seguito:

var wrapper;
function drawVisualization() {

  // Draw a column chart
  wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'visualization'
  });

  // Never called.
  google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler);

  // Must wait for the ready event in order to
  // request the chart and subscribe to 'onmouseover'.
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  wrapper.draw();

  // Never called
  function uselessHandler() {
    alert("I am never called!");
  }

  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  // Called
  function usefulHandler() {
    alert("Mouseover event!");
  }
}

Costruttore

ChartWrapper(opt_spec)

spec_opt

[Facoltativo] - Un oggetto JSON che definisce il grafico o una versione della stringa serializzata dell'oggetto. Il formato di questo oggetto è mostrato nella documentazione di drawChart(). Se non specificato, devi impostare tutte le proprietà appropriate utilizzando i metodi set... esposti dall'oggetto.

Metodi

ChartWrapper espone i seguenti metodi aggiuntivi:

Metodo	Tipo restituito	Descrizione
draw(opt_container_ref)	Nessuno	Disegna il grafico. Per mostrare le modifiche, devi richiamare questo metodo dopo ogni modifica apportata al grafico o ai dati. opt_container_ref [Facoltativo] - Un riferimento a un elemento container valido nella pagina. Se specificato, il grafico verrà tracciato lì. In caso contrario, il grafico verrà disegnato nell'elemento con ID specificato da containerId.
toJSON()	Stringa	Restituisce una versione stringa della rappresentazione JSON del grafico.
clone()	Wrapper wrapper	Restituisce una copia approfondita del wrapper grafico.
getDataSourceUrl()	Stringa	Se il grafico riceve i dati da un'origine dati, restituisce l'URL per questa origine dati. In caso contrario, restituisce null.
getDataTable()	google.visualization.DataTable	Se il grafico riceve i dati da un elemento DataTable definito localmente, restituirà un riferimento all'elemento DataTable del grafico. Se questo grafico riceve i dati da un'origine dati, restituirà un valore nullo. Le modifiche apportate all'oggetto restituito verranno applicate al grafico alla successiva chiamata a ChartWrapper.draw().
getChartType()	Stringa	Il nome della classe del grafico con wrapping. Se si tratta di un grafico di Google, il nome non sarà qualificato con google.visualization. Ad esempio, se si trattasse di un grafico a mappa ad albero, restituirebbe "Treemap" anziché "google.visualization.treemap".
getChartName()	Stringa	Restituisce il nome del grafico assegnato da setChartName().
getChart()	Riferimento per gli oggetti del grafico	Restituisce un riferimento al grafico creato da questo ChartWrapper, ad esempio un google.visualization.BarChart o un google.visualization.ColumnChart . Verrà restituito un valore nullo dopo aver chiamato draw() nell'oggetto ChartWrapper e genera un evento pronto. I metodi richiamati sull'oggetto restituito verranno riportati nella pagina.
getContainerId()	Stringa	L'ID dell'elemento contenitore DOM del grafico.
getQuery()	Stringa	La stringa di query per questo grafico, se ne ha una ed esegue query su un'origine dati.
getRefreshInterval()	Numero	Qualsiasi intervallo di aggiornamento del grafico, se esegue una query su un'origine dati. Nessuno indica nessun aggiornamento.
getOption(key, opt_default_val)	Qualsiasi tipo	Restituisce il valore specificato per l'opzione del grafico chiave - Il nome dell'opzione di recupero. Potrebbe essere un nome qualificato, ad esempio 'vAxis.title'. opt_default_value [Facoltativo] - Se il valore specificato non è definito o è nullo, verrà restituito questo valore.
getOptions()	Oggetto	Restituisce l'oggetto options per questo grafico.
getView()	Oggetto O Array	Restituisce l'oggetto inizializzatore DataView, nello stesso formato di dataview.toJSON(), o in un array di tali oggetti.
setDataSourceUrl(url)	Nessuno	Imposta l'URL di un'origine dati da utilizzare per questo grafico. Se imposti anche una tabella di dati per questo oggetto, l'URL dell'origine dati verrà ignorato.
setDataTable(table)	Nessuno	Imposta la tabella dati per il grafico. Passa uno dei seguenti valori: null; un oggetto DataTable; una rappresentazione JSON di un DataTable; oppure un array che segue la sintassi di arrayToDataTable().
setChartType(type)	Nessuno	Imposta il tipo di grafico. Inserisci il nome della classe del grafico con wrapping. Se questo è un grafico Google, non deve essere qualificato con google.visualization. Quindi, ad esempio, per un grafico a torta, passa in "PieChart".
setChartName(name)	Nessuno	Imposta un nome arbitrario per il grafico. Non viene mostrato in nessun punto del grafico, a meno che un grafico personalizzato non sia esplicitamente progettato per utilizzarlo.
setContainerId(id)	Nessuno	Imposta l'ID dell'elemento DOM contenitore per il grafico.
setQuery(query_string)	Nessuno	Imposta una stringa di query, se questo grafico esegue una query su un'origine dati. Se specifichi questo valore devi anche impostare l'URL dell'origine dati.
setRefreshInterval(interval)	Nessuno	Imposta l'intervallo di aggiornamento per questo grafico, se esegue una query su un'origine dati. Se specifichi questo valore, devi anche impostare un URL di origine dati. Nessuno indica nessun aggiornamento.
setOption(key, value)	Nessuno	Imposta un singolo valore di opzione del grafico, dove chiave è il nome dell'opzione e valore è il valore. Per annullare l'impostazione di un'opzione, inserisci null per il valore. Tieni presente che key potrebbe essere un nome qualificato, ad esempio 'vAxis.title'.
setOptions(options_obj)	Nessuno	Imposta un oggetto con opzioni complete per un grafico.
setView(view_spec)	Nessuno	Imposta un oggetto di inizializzazione di DataView, che funge da filtro sui dati sottostanti. Il wrapper grafico deve avere dati sottostanti di una tabella dati o di un'origine dati a cui applicare questa visualizzazione. Puoi trasmettere una stringa oppure un oggetto inizializzatore DataView, come quello restituito da dataview.toJSON(). Puoi anche trasferire un array di oggetti di inizializzazione di DataView, nel qual caso il primo DataView nell'array viene applicato ai dati sottostanti per creare una nuova tabella di dati e il secondo DataView viene applicato alla tabella di dati risultante dall'applicazione del primo DataView e così via.

Eventi

L'oggetto ChartWrapper genera i seguenti eventi. Tieni presente che devi chiamare ChartWrapper.draw() prima che vengano organizzati eventi.

Nome	Descrizione	Proprietà
error	Attivato quando si verifica un errore durante il tentativo di rendering del grafico.	ID, messaggio
ready	Il grafico è pronto per le chiamate ai metodi esterni. Se vuoi interagire con il grafico e chiamare i metodi dopo averlo disegnato, devi configurare un listener per questo evento prima di chiamare il metodo draw e chiamarlo solo dopo che è stato attivato l'evento.	Nessuno
select	Attivato quando l'utente fa clic su una barra o una legenda. Quando viene selezionato un elemento del grafico, viene selezionata la cella corrispondente nella tabella dati; quando viene selezionata una legenda, viene selezionata la colonna corrispondente nella tabella dati. Per sapere cosa è stato selezionato, chiama il numero ChartWrapper.getChart(). getSelection(). Questo viene avviato solo quando il tipo di grafico sottostante genera un evento di selezione.	Nessuno

Esempio

I due snippet riportati di seguito creano un grafico a linee equivalente. Il primo esempio utilizza la notazione letterale JSON per definire il grafico, mentre il secondo utilizza i metodi ChartWrapper per impostare questi valori.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<!--
  One script tag loads all the required libraries!
-->
<script type="text/javascript"
      src='https://www.gstatic.com/charts/loader.js'></script>
<script>
  google.charts.load('current);
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'containerId':'visualization',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
       });
     wrap.draw();
  }
</script>
</head>
<body>
  <div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>

Stesso grafico, che ora utilizza metodi di configurazione:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries!
-->
<script type="text/javascript"
    src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript">
  google.charts.load('current');
  google.charts.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'});
    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>

Classe Editor di grafici

La classe ChartEditor viene utilizzata per aprire una finestra di dialogo in-page che consente a un utente di personalizzare una visualizzazione all'istante.

Per utilizzare ChartEditor:

1. Carica il pacchetto charteditor. In google.charts.load(), carica il pacchetto "Charteditor". Non è necessario caricare i pacchetti per il tipo di grafico visualizzato nell'editor, perché quest'ultimo caricherà qualsiasi pacchetto per conto tuo.
2. Crea un oggetto ChartWrapper che definisca il grafico che l'utente può personalizzare. Questo grafico verrà visualizzato nella finestra di dialogo e l'utente utilizzerà l'editor per riprogettarlo, modificare i tipi di grafici o persino modificare i dati di origine.
3. Crea una nuova istanza di ChartEditor e registrati per ascoltare l'evento "ok". Questo evento viene visualizzato quando l'utente fa clic sul pulsante "OK" nella finestra di dialogo. Quando la ricevi, devi chiamare ChartEditor.getChartWrapper() per recuperare il grafico modificato dall'utente.
4. Chiama ChartEditor.openDialog() e trasmetti ChartWrapper. Viene visualizzata la finestra di dialogo. I pulsanti di dialogo consentono all'utente di chiudere l'editor. L'istanza ChartEditor è disponibile finché rientra nell'ambito; non viene eliminata automaticamente dopo la chiusura della finestra di dialogo da parte dell'utente.
5. Per aggiornare il grafico nel codice, chiama setChartWrapper().

Metodi

Metodo	Valore restituito	Descrizione
openDialog(chartWrapper, opt_options)	null	Apre l'editor del grafico come finestra di dialogo incorporata nella pagina. La funzione restituisce immediatamente, senza attendere la chiusura della finestra di dialogo. Se non perdi l'ambito dell'istanza, puoi chiamare di nuovo openDialog() per riaprire la finestra di dialogo, anche se dovrai passare di nuovo un oggetto ChartWrapper. ChartWrapper. Un oggetto ChartWrapper che definisce il grafico iniziale da visualizzare nella finestra. Il grafico deve avere un DataTable completato o essere collegato a un'origine dati valida. Questo wrapper viene copiato internamente nell'editor del grafico, quindi eventuali modifiche apportate successivamente all'handle di ChartWrapper non verranno applicate nella copia dell'editor. opt_options - [Facoltativo] Un oggetto contenente eventuali opzioni per l'editor del grafico. Consulta la tabella delle opzioni di seguito.
getChartWrapper()	ChartWrapper	Restituisce un ChartWrapper che rappresenta il grafico, con le modifiche utente.
setChartWrapper(chartWrapper)	null	Utilizza questo metodo per aggiornare il grafico visualizzato nell'editor. ChartWrapper. Un oggetto ChartWrapper che rappresenta il nuovo grafico da visualizzare. Il grafico deve avere un DataTable completato o essere connesso a un'origine dati valida.
closeDialog()	null	Chiude la finestra di dialogo dell'editor dei grafici.

Opzioni

L'editor del grafico supporta le seguenti opzioni:

Nome	Tipo	Predefinito	Descrizione
dataSourceInput	Punto di manipolazione dell'elemento o "urlbox"	null	Utilizzalo per consentire all'utente di specificare un'origine dati per il grafico. Questa proprietà può essere uno dei due valori: 'urlbox': mostra l'URL dell'origine dati del grafico nella finestra di dialogo di una casella di testo modificabile. L'utente può modificare questa impostazione e il grafico verrà riprogettato in base alla nuova origine dati. Elemento DOM: consente di fornire un elemento HTML personalizzato da utilizzare per selezionare un'origine dati. Passa l'handle a un elemento HTML, creato in codice o copiato dalla pagina. Questo elemento verrà visualizzato nella finestra di dialogo. Utilizza questa modalità per consentire all'utente di scegliere l'origine dati del grafico. Ad esempio, crea una casella di riepilogo contenente diversi URL di origini dati o nomi semplici che l'utente può scegliere. L'elemento deve implementare un gestore di selezione e utilizzarlo per modificare l'origine dati del grafico: ad esempio, modificare il DataTable sottostante o il campo dataSourceUrl del grafico.

Eventi

L'editor grafici genera i seguenti eventi:

Nome	Descrizione	Proprietà
ok	Attivato quando l'utente fa clic sul pulsante "OK" nella finestra di dialogo. Dopo aver ricevuto questo metodo, devi chiamare getChartWrapper() per recuperare il grafico configurato dall'utente.	Nessuno
cancel	Attivato quando l'utente fa clic sul pulsante "Annulla" nella finestra di dialogo.	Nessuno

Esempio

Il codice di esempio riportato di seguito apre una finestra di dialogo dell'editor di grafico con un grafico a linee completato. Se l'utente fa clic su "OK", il grafico modificato verrà salvato nel campo <div> specificato nella pagina.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
    Google Visualization API Sample
  </title>
  <script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['charteditor']});
  </script>
  <script type="text/javascript">
    google.charts.setOnLoadCallback(loadEditor);
    var chartEditor = null;

    function loadEditor() {
      // Create the chart to edit.
      var wrapper = new google.visualization.ChartWrapper({
         'chartType':'LineChart',
         'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         'query':'SELECT A,D WHERE D > 100 ORDER BY D',
         'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
    }

  </script>
</head>
<body>
  <div id="vis_div" style="height: 400px; width: 600px;"></div>
</body>
</html>

Metodi di manipolazione dei dati

Lo spazio dei nomi google.visualization.data contiene metodi statici per eseguire operazioni simili a SQL su oggetti DataTable, ad esempio per unirli o raggrupparli per valore di colonna.

Lo spazio dei nomi google.visualization.data espone i seguenti metodi:

Metodo	Descrizione
google.visualization.data.group	Esegue un'azione SQL GROUP BY per restituire una tabella raggruppata per valori nelle colonne specificate.
google.visualization.data.join	Unisce due tabelle di dati in una o più colonne chiave.

group()

Recupera un oggetto DataTable completato ed esegue un'operazione GROUP BY di tipo SQL, restituendo una tabella con righe raggruppate in base ai valori delle colonne specificati. Tieni presente che questo non modifica l'input DataTable.

La tabella restituita include una riga per ogni combinazione di valori nelle colonne chiave specificate. Ogni riga include le colonne chiave, oltre a una colonna con un valore di colonna aggregato per tutte le righe che corrispondono alla combinazione di chiavi (ad esempio, una somma o un conteggio di tutti i valori nella colonna specificata).

Lo spazio dei nomi google.visualization.data include diversi valori di aggregazione utili (ad esempio, sum e count), ma puoi definirne uno personalizzato (ad esempio, standardDeviation o secondHighest). Le istruzioni su come definire il tuo aggregatore sono fornite dopo la descrizione del metodo.

Sintassi

google.visualization.data.group(data_table, keys, columns)

tabella_dati

L'input DataTable. Non verrà modificato chiamando il numero group().

chiavi

Un array di numeri e/o oggetti che specificano a quali colonne raggruppare. La tabella dei risultati include ogni colonna in questo array, nonché ogni colonna nelle colonne. Se un numero, si tratta di un indice di colonna dell'input DataTable per cui raggruppare. Se un oggetto include una funzione che può modificare la colonna specificata, ad esempio aggiungi un valore al suo interno. L'oggetto deve avere le seguenti proprietà:

• colonna - Un numero che è un indice di colonna da dt a cui applicare la trasformazione.
• modifier: una funzione che accetta un valore (il valore della cella in quella colonna per ogni riga) e restituisce il valore modificato. Questa funzione viene utilizzata per modificare il valore della colonna per supportare il raggruppamento: ad esempio, chiamando una funzione quale Quarter che calcola un trimestre da una colonna della data, in modo che l'API possa raggruppare le righe per trimestre. Il valore calcolato viene visualizzato nelle colonne chiave della tabella restituita. Questa funzione può essere dichiarata in linea all'interno dell'oggetto oppure può essere definita altrove nel tuo codice (deve rientrare nell'ambito della chiamata). L'API fornisce una semplice funzione di modifica; qui trovi le istruzioni su come creare le tue funzioni più utili. Devi conoscere il tipo di dati che questa funzione può accettare e chiamare solo le colonne di quel tipo. Devi anche conoscere il tipo di ritorno di questa funzione e dichiararla nella proprietà type descritta di seguito.
• tipo - Il tipo restituito dalla funzione modifier. Deve essere un nome tipo di stringa JavaScript, ad esempio "numero" o "booleano".
• label - [Facoltativo] Un'etichetta della stringa per assegnare questa colonna nella colonna DataTable restituita.
• id: [facoltativo] un ID stringa per assegnare questa colonna nella DataTable.

Esempi: [0], [0,2], [0,{column:1, modifier:myPlusOneFunc, type:'number'},2]

colonne

[Facoltativo] Consente di specificare le colonne da includere nella tabella di output, oltre alle colonne chiave. Poiché tutte le righe nel gruppo di righe sono compresse in una singola riga di output, devi determinare quale valore visualizzare per quel gruppo di righe. Ad esempio, potresti scegliere di mostrare il valore della colonna della prima riga dell'insieme o una media di tutte le righe del gruppo. colonne è un array di oggetti con le seguenti proprietà:

• colonna: un numero che specifica l'indice della colonna da visualizzare.
• aggregazione: una funzione che accetta un array di tutti i valori di questa colonna in questo gruppo di righe e restituisce un singolo valore da visualizzare nella riga dei risultati. Il valore restituito deve essere del tipo specificato dalla proprietà type dell'oggetto. Di seguito sono riportati i dettagli sulla creazione della tua funzione di aggregazione. Devi sapere quali tipi di dati sono accettati dal metodo e chiamarli solo nelle colonne di tipo appropriato. L'API fornisce diverse utili funzioni di aggregazione. Consulta la sezione Funzionalità di aggregazione fornite di seguito per un elenco oppure Creare una funzione di aggregazione per scoprire come scrivere la tua funzione di aggregazione.
• tipo - Il tipo restituito della funzione di aggregazione. Deve essere un nome di tipo stringa JavaScript, ad esempio "numero" o "booleano".
• label - [Facoltativo] Un'etichetta della stringa da applicare a questa colonna nella tabella restituita.
• id: [facoltativo] un ID stringa da applicare a questa colonna nella tabella restituita.

Valore restituito

Un DataTable con una colonna per ogni colonna elencata in chiavi e una colonna per ogni colonna elencata in colonne. La tabella viene ordinata per righe chiave, da sinistra a destra.

Esempio

// This call will group the table by column 0 values.
// It will also show column 3, which will be a sum of
// values in that column for that row group.
var result = google.visualization.data.group(
  dt,
  [0],
  [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

*Input table*
1  'john'  'doe'            10
1  'jane'  'doe'           100
3  'jill'  'jones'          50
3  'jack'  'jones'          75
5  'al'    'weisenheimer'  500

*Output table*
1  110
3  125
5  500

Funzioni di modifica fornite

L'API fornisce le seguenti funzioni di modifica che puoi trasmettere nelle chiavi. modifier per personalizzare il comportamento di raggruppamento.

Funzione	Tipo di array di input	Tipo restituito	Descrizione
google.visualization.data.month	Data	number	Data una data, restituirà il valore del mese in base zero (0, 1, 2 e così via).

Funzioni di aggregazione fornite

L'API fornisce le seguenti funzioni di aggregazione che puoi trasmettere nelle colonne. aggregazione.

Funzione	Tipo di array di input	Tipo restituito	Descrizione
google.visualization.data.avg	number	number	Il valore medio della matrice trasmessa.
google.visualization.data.count	qualsiasi tipo	number	Il numero di righe nel gruppo. Vengono conteggiati valori nulli e duplicati.
google.visualization.data.max	numero, stringa, data	numero, stringa, data, null	Il valore massimo nell'array. Per le stringhe, questo è il primo elemento in un elenco in ordine alfabetico; per i valori della data è la data più recente. I valori null vengono ignorati. Restituisce null se non esiste un limite massimo.
google.visualization.data.min	numero, stringa, data	numero, stringa, data, null	Il valore minimo nell'array. Per le stringhe, questo è l'ultimo elemento di un elenco in ordine alfabetico; per i valori della data è la prima data. I valori null vengono ignorati. Restituisce null se non è presente un minimo.
google.visualization.data.sum	number	number	La somma di tutti i valori nell'array.

Crea una funzione modificatore

Puoi creare una funzione di modifica per eseguire semplici valori di trasformazione chiave prima che la funzione group() raggruppi le righe. Questa funzione prende un singolo valore di cella, esegue un'azione su di esso (ad esempio, aggiunge 1 al valore) e lo restituisce. I tipi di input e di ritorno non devono essere dello stesso tipo, ma il chiamante deve conoscere i tipi di input e output. Di seguito è riportato un esempio di funzione che accetta una data e restituisce il trimestre:

// Input type: Date
// Return type: number (1-4)
function getQuarter(someDate) {
  return Math.floor(someDate.getMonth()/3) + 1;
}

Crea una funzione di aggregazione

Puoi creare una funzione di aggregazione che accetti un insieme di valori di colonna in un gruppo di righe e restituisca un singolo numero, ad esempio restituisce un conteggio o una media di valori. Ecco un'implementazione della funzione di aggregazione dei conteggi fornita, che restituisce un conteggio di quante righe sono presenti nel gruppo di righe:

// Input type: Array of any type
// Return type: number
function count(values) {
  return values.length;
}

join()

Questo metodo unisce due tabelle di dati (oggetti DataTable o DataView) in una singola tabella dei risultati, in modo simile a un'istruzione SQL JOIN. Specifica una o più coppie di colonne (key) tra le due tabelle e la tabella di output include le righe in base a un metodo di join specificato: solo le righe in cui entrambe le chiavi corrispondono, tutte le righe di una tabella o tutte le righe di entrambe le tabelle, indipendentemente dal fatto che la corrispondenza corrisponda alle chiavi. La tabella dei risultati include solo le colonne chiave, oltre a eventuali colonne aggiuntive specificate. Tieni presente che dt2 non può avere chiavi duplicate, ma dt1 può farlo. Il termine "chiave" indica la combinazione di tutti i valori delle colonne della chiave, non di uno specifico valore della colonna della chiave; quindi, se una riga ha valori di cella A | B | C e colonne 0 e 1 sono colonne chiave, la chiave per questa riga è AB.

Sintassi

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);

dt1

Un DataTable completato per partecipare con dt2.

D2

Un DataTable completato per la partecipazione con dt1. Questa tabella non può avere più chiavi identiche (dove una chiave è una combinazione di valori di colonna chiave).

joinMethod

Una stringa che specifica il tipo di unione. Se dt1 ha più righe che corrispondono a una riga dt2, la tabella di output includerà tutte le righe dt1 corrispondenti. Scegli uno dei seguenti valori:

• "completa". La tabella di output include tutte le righe di entrambe le tabelle, indipendentemente dal fatto che le chiavi corrispondano. Le righe senza corrispondenza avranno voci di cella nulle, mentre le righe con corrispondenze.
• "inner": l'unione completa filtrata in modo da includere solo le righe in cui le chiavi corrispondono.
• "left": la tabella di output include tutte le righe di dt1, a prescindere dalla presenza o meno di righe corrispondenti da dt2.
• "right": la tabella di output include tutte le righe di dt2, indipendentemente dal fatto che ci siano righe corrispondenti da dt1.

chiavi

Un array di colonne chiave da confrontare da entrambe le tabelle. Ogni coppia è una matrice di due elementi, la prima è una chiave in dt1, la seconda in dt2. Questo array può specificare colonne in base all'indice, all'ID o all'etichetta, consulta getColumnIndex.
Le colonne devono essere dello stesso tipo in entrambe le tabelle. Tutte le chiavi specificate devono corrispondere a la regola indicata da joinMethod per includere una riga della tabella. Le colonne principali sono sempre incluse nella tabella di output. Solo dt1, la tabella a sinistra, può includere chiavi duplicate; le chiavi in dt2 devono essere univoche. Il termine "chiave" indica un insieme univoco di colonne chiave, non i singoli valori delle colonne. Ad esempio, se le colonne chiave erano A e B, la seguente tabella avrebbe solo valori chiave univoci (e potrebbe quindi essere utilizzata come dt2):

R	B
Gianna	Rosso
Gianna	Blu
Fred	Rosso

Esempio: [[0,0], [2,1]] confronta i valori della prima colonna di entrambe le tabelle e della terza colonna di dt1 con la seconda colonna di dt2.

Colonne dt1

Un array di colonne da dt1 da includere nella tabella di output, oltre alle colonne chiave di dt1. Questo array può specificare colonne in base all'indice, all'ID o all'etichetta, consulta getColumnIndex.

Colonne dt2

Un array di colonne di dt2 da includere nella tabella di output, oltre alle colonne chiave di dt2. Questo array può specificare colonne in base all'indice, all'ID o all'etichetta, consulta getColumnIndex.

Valore restituito

Un DataTable con le colonne principali, dt1Colonne e dt2Colonne. Questa tabella è ordinata in base alle colonne delle chiavi, da sinistra a destra. Quando joinMethod è "inner", tutte le celle della chiave devono essere compilate. Per gli altri metodi di join, se non viene trovata alcuna chiave corrispondente, la tabella avrà un valore null per qualsiasi cella della chiave senza corrispondenza.

Esempi

*Tables*
dt1                        dt2
bob  | 111 | red           bob   | 111 | point
bob  | 111 | green         ellyn | 222 | square
bob  | 333 | orange        jane  | 555 | circle
fred | 555 | blue          jane  | 777 | triangle
jane | 777 | yellow        fred  | 666 | dodecahedron
* Note that right table has duplicate Jane entries, but the key we will use is
* columns 0 and 1. The left table has duplicate key values, but that is
* allowed.

*Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red    | point
bob  | 111 | green  | point
jane | 777 | yellow | triangle
* Note that both rows from dt1 are included and matched to
* the equivalent dt2 row.


*Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red    | point
bob   | 111 | green  | point
bob   | 333 | orange | null
ellyn | 222 | null | square
fred  | 555 | blue   | null
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle


*Left join*  google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red | point
bob  | 111 | green | point
bob  | 333 | orange | null
fred | 555 | blue | null
jane | 777 | yellow | triangle


*Right join*  google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red | point
bob   | 111 | green | point
ellyn | 222 | null | square
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle

Formatori

L'API Google Preview fornisce strumenti di formattazione che possono essere utilizzati per riformattare i dati in una visualizzazione. Questi formati modificano il valore formattato della colonna specificata in tutte le righe. Tieni presente che:

• I formatori modificano solo i valori formattati, non i valori sottostanti. Ad esempio, il valore visualizzato sarebbe "1000 $", ma il valore sottostante sarebbe ancora "1000".
• I formatori interessano una sola colonna alla volta; per riformattare più colonne, applica un formatore a ogni colonna che vuoi modificare.
• Se utilizzi anche formati di formattazione definiti dall'utente, alcuni formati di visualizzazione di Google sostituiscono quelli di tutti gli utenti.

La formattazione effettiva applicata ai dati deriva dalle impostazioni internazionali con cui è stata caricata l'API. Per maggiori dettagli, consulta la pagina relativa al caricamento di grafici con impostazioni internazionali specifiche .

Importante: i formatori possono essere utilizzati solo con un DataTable; non possono essere utilizzati con un DataView (gli oggetti DataView sono di sola lettura).

Ecco i passaggi generali per l'utilizzo di un formatore:

1. Recupera l'oggetto DataTable completato.
2. Per ogni colonna che vuoi riformattare:
   1. Crea un oggetto che specifichi tutte le opzioni per il formatore. Si tratta di un oggetto JavaScript di base con un insieme di proprietà e valori. Consulta la documentazione del formatore per sapere quali proprietà sono supportate. (Facoltativo) Puoi passare un oggetto di notazione letterale dell'oggetto specificando le opzioni.
   2. Crea il tuo formattatore, trasmettendo l'oggetto delle opzioni.
   3. Chiama formatter.format(table, colIndex), trasmettendo il valore DataTable e il numero di colonne (basato su zero) dei dati da riformattare. Tieni presente che puoi applicare un singolo formatore a ciascuna colonna; l'applicazione di un secondo formatore sovrascriverà semplicemente gli effetti della prima.
      Importante: molti formati richiedono la visualizzazione di una formattazione speciale per i tag HTML; se la visualizzazione supporta un'opzione allowHtml, devi impostarla su true.

Ecco un esempio di modifica dei valori di data formattati di una colonna di data per utilizzare un formato data lungo ("1° gennaio 2009"):

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(3);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
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));

// Create a formatter.
// This example uses object literal notation to define the options.
var formatter = new google.visualization.DateFormat({formatType: 'long'});

// Reformat our data.
formatter.format(data, 1);

// Draw our data
var table = new google.visualization.Table(document.getElementById('dateformat_div'));
table.draw(data, {showRowNumber: true});

La maggior parte dei formati può esporre i due metodi seguenti:

Metodo	Descrizione
google.visualization.formatter_name(options)	Costruttore, dove formatter_name è un nome di formato specifico. options: un oggetto JavaScript generico che specifica le opzioni per il formattatore. Questo oggetto è un oggetto generico con coppie proprietà/valore con proprietà specifiche per il formatore. Consulta la documentazione del tuo specifico formatore per sapere quali opzioni sono supportate. Ecco due modi di chiamare il costruttore per l'oggetto DateFormat, trasmettendo due proprietà: // Object literal technique var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5}); // Equivalent property setting technique var options = new Object(); options['formatType'] = 'long'; options['timeZone'] = -5; var formatter = new google.visualization.DateFormat(options);
format(data, colIndex)	Riformatta i dati nella colonna specificata. data: un DataTable contenente i dati da riformattare. Non puoi utilizzare un DataView qui. colIndex: l'indice in base zero della colonna da formattare. Per formattare più colonne, devi chiamare questo metodo più volte, con valori colIndex diversi.

 

L'API Google Optimization fornisce i seguenti formati:

Nome formattatore	Descrizione
Formato Freccia	Aggiunge una freccia su o giù per indicare se il valore della cella è superiore o inferiore a un valore specificato.
Formato a barre	Aggiunge una barra colorata, la cui direzione e colore indicano se il valore della cella è superiore o inferiore a un valore specificato.
FormatoColore	Colora una cella a seconda che i valori rientrino in un intervallo specificato.
Formato data	Formatta un valore Date or DateTime in diversi modi, tra cui "1 gennaio 2009", "1/1/09" e "1 gen 2009".
NumeroFormato	Formattare vari aspetti dei valori numerici.
FormatoPattern	Concatena i valori delle celle sulla stessa riga in una cella specificata, insieme al testo arbitrario.

Formato Freccia

Aggiunge una Freccia su o giù a una cella numerica, a seconda che il valore sia superiore o inferiore a un valore di base specificato. Se uguale al valore di base, non viene mostrata alcuna freccia.

Opzioni

ArrowFormat supporta le seguenti opzioni, trasmesse al costruttore:

Opzione	Descrizione
base	Un numero che indica il valore di base, utilizzato per eseguire il confronto con il valore della cella. Se il valore della cella è superiore, la cella includerà una freccia verde rivolta verso l'alto; se il valore della cella è inferiore, includerà una freccia rossa rivolta verso il basso.

Codice di esempio

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues Change');
data.addRows([
  ['Shoes', {v:12, f:'12.0%'}],
  ['Sports', {v:-7.3, f:'-7.3%'}],
  ['Toys', {v:0, f:'0%'}],
  ['Electronics', {v:-2.1, f:'-2.1%'}],
  ['Food', {v:22, f:'22.0%'}]
]);

var table = new google.visualization.Table(document.getElementById('arrowformat_div'));

var formatter = new google.visualization.ArrowFormat();
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true});

Formato a barre

Aggiunge una barra colorata a una cella numerica per indicare se il valore della cella è superiore o inferiore a un valore di base specificato.

Opzioni

BarFormat supporta le seguenti opzioni, trasmesse al costruttore:

Opzione	Esempio Descrizione
base	Numero che rappresenta il valore di base con cui confrontare il valore della cella. Se il valore della cella è più alto, verrà tracciato a destra della base; se è più basso, verrà disegnato a sinistra. Il valore predefinito è 0.
colorNegative	Una stringa che indica la sezione del valore negativo delle barre. I valori possibili sono "red", "green" e "blue". Il valore predefinito è "red".
colorPositive	Una stringa che indica il colore della sezione dei valori positivi delle barre. I valori possibili sono "red", "green" e "blue". Il valore predefinito è "blue".
drawZeroLine	Un valore booleano che indica se tracciare una linea di base scura di 1 pixel quando sono presenti valori negativi. La linea scura serve a migliorare la scansione visiva delle barre. Il valore predefinito è "false".
max	Il valore numerico massimo dell'intervallo di barre. Il valore predefinito è il valore più alto della tabella.
min	Il valore numerico minimo per l'intervallo di barre. Il valore predefinito è il valore più basso nella tabella.
showValue	Se true, mostra valori e barre; se false mostra solo barre. Il valore predefinito è vero.
width	Spessore di ogni barra, in pixel. Il valore predefinito è 100.

Codice di esempio

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('barformat_div'));

var formatter = new google.visualization.BarFormat({width: 120});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

FormatoColore

Assegna i colori in primo piano o sullo sfondo di una cella numerica, a seconda del valore della cella. Questo formattatore è un insolito, in quanto non accetta le sue opzioni nel costruttore. Devi invece chiamare addRange() o addGradientRange() tutte le volte che vuoi per aggiungere intervalli di colori, prima di chiamare format(). I colori possono essere specificati in qualsiasi formato HTML accettabile, ad esempio "nero", "#000000" o "#000".

Metodi

ColorFormat supporta i seguenti metodi:

Metodo	Descrizione
google.visualization.ColorFormat()	Costruttore. Non accetta argomenti.
addRange(from, to, color, bgcolor)	Specifica un colore di primo piano e/o uno sfondo per una cella, a seconda del valore della cella. A qualsiasi cella con un valore compreso nell'intervallo specificato from, to verranno assegnati color e bgcolor. È importante comprendere che l'intervallo non è inclusivo, perché creare un intervallo da 1000 a 1000 e un secondo da 1000 e 2000 non coprirà il valore 1000. from - [Stringa, numero, data, data/ora o ora del giorno] Il limite inferiore (incluso) dell'intervallo o nullo. Se null, corrisponderà a - VAST. I limiti delle stringhe vengono confrontati in ordine alfabetico con i valori delle stringhe. to - [Stringa, numero, data, data/ora o ora del giorno] Il limite alto (non inclusivo) dell'intervallo o nullo. Se null, corrisponderà a +INTERPOLATION. I limiti delle stringhe vengono confrontati in ordine alfabetico con i valori delle stringhe. color: il colore da applicare al testo nelle celle corrispondenti. I valori possono essere "#RRGGBB" o costanti di colore definite (ad esempio "#FF0000" o "rosso"). bgcolor: il colore da applicare allo sfondo delle celle corrispondenti. I valori possono essere "#RRGGBB" o costanti di colore definite (ad esempio "#FF0000" o "rosso").
addGradientRange(from, to, color, fromBgColor, toBgColor)	Assegna un colore di sfondo a un intervallo, in base al valore della cella. Il colore viene ridimensionato per adattarsi al valore della cella in un intervallo che va da un colore del confine inferiore a quello di un limite superiore. Tieni presente che questo metodo non può confrontare i valori della stringa, come può fare addRange(). Suggerimento: gli intervalli di colore sono spesso difficili da misurare con precisione; l'intervallo più semplice e di facile lettura è da un colore completamente saturo a uno bianco (ad es. #FF0000—FFFFFF). from - [Number, Date, DateTime, or TimeOfDay] Il limite inferiore (incluso) dell'intervallo o nullo. Se null, corrisponderà a -INTERPOLATION. to - [Number, Date, DateTime o TimeOfDay] Il limite più alto (non inclusivo) dell'intervallo o nullo. Se null, corrisponderà a +seguito. color: il colore da applicare al testo nelle celle corrispondenti. questo colore è lo stesso per tutte le celle, a prescindere dal loro valore. fromBgColor: il colore dello sfondo delle celle che contengono valori nella parte bassa del gradiente. I valori possono essere "#RRGGBB" o costanti di colore definite (esempio: "#FF0000" o "rosso"). toBgColor: il colore dello sfondo delle celle che contengono valori nella fascia alta del gradiente. I valori possono essere "#RRGGBB" o costanti di colore definite (esempio: "#FF0000" o "rosso").
format(dataTable, columnIndex)	Il metodo format() standard per applicare la formattazione alla colonna specificata.

Codice di esempio

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('colorformat_div'));

var formatter = new google.visualization.ColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

Formato data

Formatta un valore Date di JavaScript in vari modi, tra cui "1° gennaio 2016", "1/1/16" e "1 gen 2016".

Opzioni

DateFormat supporta le seguenti opzioni, trasmesse al costruttore:

Opzione	Descrizione
formatType	Un'opzione di formattazione rapida per la data. Sono supportati i seguenti valori di stringa, che riformattano la data del 28 febbraio 2016 come mostrato: "short" - Formato breve: ad es. "28/2/16" "medium" - Formato medio: ad es. "28 feb 2016" "long" - Formato lungo: ad es. "28 febbraio 2016" Non puoi specificare sia formatType che pattern.
pattern	Un pattern di formato personalizzato da applicare al valore, simile al formato di data e ora ICU. Ad esempio: var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"});. Non puoi specificare sia formatType che pattern. Per ulteriori dettagli sui pattern, consulta la prossima sezione.
timeZone	Il fuso orario in cui visualizzare il valore della data. Si tratta di un valore numerico che indica GMT + questo numero di fusi orari (può essere negativo). L'oggetto data viene creato per impostazione predefinita con il fuso orario presunto del computer su cui è stato creato; questa opzione viene utilizzata per visualizzare il valore in un fuso orario diverso. Ad esempio, se hai creato un oggetto Date alle 17:00 su un computer situato a Greenwich, in Inghilterra, e hai specificato il fuso orario -5 (options['timeZone'] = -5 o ora del Pacifico orientale negli Stati Uniti), il valore visualizzato sarà 12:00.

Metodi

DateFormat supporta i seguenti metodi:

Metodo	Descrizione
google.visualization.DateFormat(options)	Costruttore. Per maggiori informazioni, vedi la sezione delle opzioni in alto.
format(dataTable, columnIndex)	Il metodo format() standard per applicare la formattazione alla colonna specificata.
formatValue(value)	Restituisce il valore formattato di un determinato valore. Questo metodo non richiede un DataTable.

Codice di esempio

function drawDateFormatTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date (Long)');
  data.addColumn('date', 'Start Date (Medium)');
  data.addColumn('date', 'Start Date (Short)');
  data.addRows([
    ['Mike', new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26)],
    ['Bob', new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0)],
    ['Alice', new Date(2006, 7, 16),
              new Date(2006, 7, 16),
              new Date(2006, 7, 16)]
  ]);

  // Create three formatters in three styles.
  var formatter_long = new google.visualization.DateFormat({formatType: 'long'});
  var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'});
  var formatter_short = new google.visualization.DateFormat({formatType: 'short'});

  // Reformat our data.
  formatter_long.format(data, 1);
  formatter_medium.format(data,2);
  formatter_short.format(data, 3);

  // Draw our data
  var table = new google.visualization.Table(document.getElementById('dateformat_div'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

Ulteriori informazioni sui pattern delle date

Ecco alcuni dettagli sui pattern supportati:

I pattern sono simili al formato di data e ora dell'ICU, ma i seguenti pattern non sono ancora supportati: A e D F g Y u w W. Per evitare conflitti con i pattern, il testo letterale che vuoi visualizzare nell'output deve essere racchiuso tra virgolette singole, ad eccezione della virgoletta singola, che deve essere raddoppiata, ad esempio "K 'o''clock.'".

Pattern	Descrizione	Output di esempio
GG	Indicatore era.	"ANNUNCIO"
yy o yyyy	anno.	1996
M	Mese dell'anno. Per gennaio: M produce 1 MM produce 01 MMM produce gennaio MMMM produce gennaio	"Luglio" "7"
g	Giorno del mese. I valori "d" aggiuntivi aggiungeranno gli zeri iniziali.	10
h	Ora in scala 12. I valori "h" extra aggiungeranno gli zeri iniziali.	12
H	Ora in scala 24 ore. I valori Hk extra aggiungeranno gli zeri iniziali.	0
m	Minuto in ora. I valori extra "M" aggiungeranno zero iniziali.	30
s	Secondo in minuto. I valori extra di "sommano" gli zeri iniziali.	55
S	La frazione di secondo. I valori extra "S" verranno riempiti a destra con zeri.	978
E	Giorno della settimana. I seguenti output per "martedì": E produce T EE o EEE Produci mar o mar EEEE produci martedì	"Mar" "Martedì"
aa	AM/PM	"PM"
k	Ora nel giorno (1~24). I valori "k" aggiuntivi aggiungeranno zero iniziali.	24
K	Ora in AM/PM (0~11). I valori "k" aggiuntivi aggiungeranno zero iniziali.	0
z	Fuso orario. Per il fuso orario 5, produce "UTC+5"	"UTC+5"
Z	Fuso orario in formato RFC 822. Per il fuso orario -5: Z, ZZ, ZZZ produce -0500 ZZZZ e altri prodotti "GMT -05:00"	"-0800" "GMT -05:00"
v	Fuso orario (generico).	"Ecc/GMT-5"
'	esegui l'escape per il testo	'Date='
".	virgoletta singola	''yy

Formato numeri

Descrive la formattazione delle colonne numeriche. Le opzioni di formattazione includono la specifica di un simbolo di prefisso (ad esempio un simbolo del dollaro) o della punteggiatura da utilizzare come indicatore di migliaia.

Opzioni

NumberFormat supporta le seguenti opzioni, trasmesse al costruttore:

Opzione	Descrizione
decimalSymbol	Un carattere da utilizzare come indicatore decimale. Il valore predefinito è un punto (.).
fractionDigits	Un numero che specifica quante cifre visualizzare dopo il decimale. Il valore predefinito è 2. Se specifichi più cifre rispetto a quelle che contiene il numero, verranno visualizzati zeri per i valori più piccoli. I valori troncati saranno arrotondati (5 arrotondati per eccesso).
groupingSymbol	Un carattere da utilizzare per raggruppare le cifre a sinistra del decimale in gruppi di tre. L'impostazione predefinita è una virgola (,).
negativeColor	Il colore del testo per i valori negativi. Nessun valore predefinito. I valori possono essere qualsiasi valore di colore HTML accettabile, ad esempio "rosso" o "#FF0000".
negativeParens	Un valore booleano, dove true indica che i valori negativi devono essere racchiusi tra parentesi. Il valore predefinito è true.
pattern	Una stringa di formato. Quando vengono fornite, tutte le altre opzioni vengono ignorate, ad eccezione di negativeColor. La stringa di formato è un sottoinsieme del set di pattern ICU . Ad esempio, {pattern:'#,###%'} restituirà valori di output "1000%", "750%" e "50%" per i valori 10, 7,5 e 0,5.
prefix	Un prefisso di stringa per il valore, ad esempio "$".
suffix	Un suffisso di stringa per il valore, ad esempio "%".

Metodi

NumberFormat supporta i seguenti metodi:

Metodo	Descrizione
google.visualization.NumberFormat(options)	Costruttore. Per maggiori informazioni, vedi la sezione delle opzioni in alto.
format(dataTable, columnIndex)	Il metodo format() standard per applicare la formattazione alla colonna specificata.
formatValue(value)	Restituisce il valore formattato di un determinato valore. Questo metodo non richiede un DataTable.

Codice di esempio

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('numberformat_div'));

var formatter = new google.visualization.NumberFormat(
    {prefix: '$', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

Formato di pattern

Consente di unire i valori delle colonne designate in una singola colonna, insieme a testo arbitrario. Ad esempio, se avessi una colonna per il nome e una per il cognome, potresti completare una terza colonna con {last name} e {first name}. Questo formatore non segue le convenzioni per il costruttore e il metodo format(). Per istruzioni, consulta la sezione Metodi di seguito.

Metodi

PatternFormat supporta i seguenti metodi:

Metodo	Descrizione
google.visualization.PatternFormat(pattern)	Costruttore. Non accetta un oggetto opzioni. È invece necessario un parametro pattern di stringa. Si tratta di una stringa che descrive i valori della colonna da inserire nella colonna di destinazione, insieme a qualsiasi testo arbitrario. Incorpora i segnaposto nella stringa per indicare un valore di un'altra colonna da incorporare. I segnaposto sono {#}, dove # è l'indice di una colonna di origine da utilizzare. L'indice è un indice nell'array srcColumnIndices del metodo format() di seguito. Per includere un carattere letterale { o }, esegui l'escape in questo modo: {9} o MSG. Per includere un carattere letterale \, esegui l'escape come \\. Codice di esempio L'esempio seguente mostra un costruttore per un pattern che crea un elemento di ancoraggio, con il primo e il secondo elemento tratti dal metodo format(): var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>');
format(dataTable, srcColumnIndices, opt_dstColumnIndex)	La chiamata di formattazione standard, con alcuni parametri aggiuntivi: dataTable: la tabella dati su cui operare. srcColumnIndices: una matrice di uno o più indici di colonna (basati su zero) da estrarre come origini dalla tabella dati sottostante. Questo verrà utilizzato come origine dati per il parametro pattern nel costruttore. I numeri delle colonne non devono essere ordinati in modo ordinato. opt_dstColumnIndex - [facoltativo] La colonna di destinazione per posizionare l'output della manipolazione del pattern. Se non specificato, il primo elemento in srcColumIndices verrà utilizzato come destinazione. Guarda gli esempi di formattazione dopo la tabella.

Di seguito sono riportati alcuni esempi di input per una tabella a quattro colonne.

Row before formatting (4 columns, last is blank):
John  |  Paul  |  Jones  |  [empty]

var formatter = new google.visualization.PatternFormat("{0} {1} {2}");
formatter.format(data, [0,1,2], 3);
Output:
  John  |  Paul  |  Jones  |  John Paul Jones

var formatter = new google.visualization.PatternFormat("{1}, {0}");
formatter.format(data, [0,2], 3);
Output:
  John  |  Paul  |  Jones  |  Jones, John

Codice di esempio

L'esempio seguente mostra come combinare i dati di due colonne per creare un indirizzo email. Utilizza un oggetto DataView per nascondere le colonne di origine originali:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Email');
data.addRows([
  ['John Lennon', '[e-mail]'],
  ['Paul McCartney', '[e-mail]'],
  ['George Harrison', '[e-mail]'],
  ['Ringo Starr', '[e-mail]']
]);

var table = new google.visualization.Table(document.getElementById('patternformat_div'));

var formatter = new google.visualization.PatternFormat(
    '<a href="mailto:{1}">{0}</a>');
// Apply formatter and set the formatted value of the first column.
formatter.format(data, [0, 1]);

var view = new google.visualization.DataView(data);
view.setColumns([0]); // Create a view with the first column only.

table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

Assistente

Un corso di aiuto per semplificare la scrittura di Gadget che utilizzano l'API GoogleView.

Costruttore

google.visualization.GadgetHelper()

Metodi

Metodo	Valore restituito	Descrizione
createQueryFromPrefs(prefs)	google.visualization.Query	Statico. Crea una nuova istanza di google.visualization.Query e impostane le proprietà in base ai valori delle preferenze del gadget. Il tipo di parametro prefs è _IG_Prefs La preferenza _table_query_url viene utilizzata per impostare l'URL dell'origine dati delle query. La preferenza _table_query_refresh_interval viene utilizzata per impostare l'intervallo di aggiornamento delle query (in secondi).
validateResponse(response)	Booleano	Statico. Il parametro response è di tipo google.visualization.QueryResponse. Restituisce true se la risposta contiene dati. Restituisce false se l'esecuzione della query non è riuscita e la risposta non contiene dati. Se si è verificato un errore, questo metodo visualizza un messaggio di errore.

Classi di query

I seguenti oggetti sono disponibili per inviare query per dati a un'origine dati esterna, come i fogli di lavoro Google.

• Query: esegue il wrapping della richiesta di dati in uscita.
• QueryResponse: gestisce la risposta dall'origine dati.

Query

Rappresenta una query inviata a un'origine dati.

Costruttore

google.visualization.Query(dataSourceUrl, opt_options)

Parametri

URLFonteFonte

[Obbligatorio, Stringa] a cui inviare la query. Consulta la documentazione di grafici e fogli di lavoro per i fogli di lavoro Google.

opzioni_opt

[Facoltativo, oggetto] Una mappa delle opzioni per la richiesta. Nota: se accedi a un'origine dati con restrizioni, non devi utilizzare questo parametro. Ecco le proprietà supportate:

• sendMethod: [facoltativo, String] specifica il metodo da utilizzare per inviare la query. Scegli uno dei seguenti valori di stringa:
  • 'xhr' - Invia la query utilizzando XmlHttpRequest.
  • 'scriptInjection': invia la query utilizzando l'iniezione di script.
  • 'makeRequest' - [Disponibile solo per i gadget, che sono deprecati] Invia la query utilizzando il metodo dell'API Gadget makeRequest(). Se specificato, devi specificare anche makeRequestParams.
  • 'auto': utilizza il metodo specificato dal parametro URL tqrt dall'URL dell'origine dati. tqrt può avere i seguenti valori: "xhr", "scriptInjection" o "makeRequest". Se tqrt non è presente o presenta un valore non valido, il valore predefinito è "xhr" per le richieste dello stesso dominio e "scriptInjection" per le richieste tra domini.
• makeRequestParams: [oggetto] una mappa dei parametri per una query makeRequest(). Utilizzato e obbligatorio solo se sendMethod è "makeRequest".

Metodi

Metodo	Valore restituito	Descrizione
abort()	Nessuno	Interrompe l'invio automatico di query avviato con setRefreshInterval().
setRefreshInterval(seconds)	Nessuno	Imposta la query in modo che chiami automaticamente il metodo send a ogni durata specificata (numero di secondi), a partire dalla prima chiamata esplicita a send. seconds è un numero maggiore o uguale a zero. Se utilizzi questo metodo, devi chiamarlo prima di chiamare il metodo send. Annulla questo metodo chiamandolo di nuovo con zero (impostazione predefinita) o chiamando il numero abort().
setTimeout(seconds)	Nessuno	Imposta il numero di secondi di attesa che l'origine dati risponda prima di generare un errore di timeout. seconds è un numero maggiore di zero. Il timeout predefinito è 30 secondi. Questo metodo, se utilizzato, deve essere chiamato prima di chiamare il metodo send.
setQuery(string)	Nessuno	Imposta la stringa di query. Il valore del parametro string deve essere una query valida. Questo metodo, se utilizzato, deve essere chiamato prima di chiamare il metodo send. Scopri di più sul linguaggio delle query.
send(callback)	Nessuno	Invia la query all'origine dati. callback deve essere una funzione che verrà chiamata quando l'origine dati risponde. La funzione di callback riceverà un singolo parametro di tipo google.visualization.QueryResponse.

Risposta alle query

Rappresenta una risposta di un'esecuzione di una query ricevuta dall'origine dati. Un'istanza di questa classe viene passata come argomento alla funzione di callback impostata quando è stato richiamato Query.send.

Metodi

Metodo	Valore restituito	Descrizione
getDataTable()	Tabella dati	Restituisce la tabella di dati come restituita dall'origine dati. Restituisce null se l'esecuzione della query non è riuscita e non è stato restituito alcun dato.
getDetailedMessage()	Stringa	Restituisce un messaggio di errore dettagliato per le query non riuscite. Se l'esecuzione della query ha avuto esito positivo, questo metodo restituisce una stringa vuota. Il messaggio restituito è un messaggio destinato agli sviluppatori e può contenere informazioni tecniche, ad esempio "La colonna {salary} non esiste".
getMessage()	Stringa	Restituisce un breve messaggio di errore per le query non riuscite. Se l'esecuzione della query ha avuto esito positivo, questo metodo restituisce una stringa vuota. Il messaggio restituito è un messaggio breve destinato agli utenti finali, ad esempio "Query non valida" o "Accesso negato".
getReasons()	Array di stringhe	Restituisce una matrice di zero voci aggiuntive. Ogni voce è una breve stringa con un errore o un codice di avviso generato durante l'esecuzione della query. Codici possibili: access_denied L'utente non dispone delle autorizzazioni per accedere all'origine dati. invalid_query La query specificata ha un errore di sintassi. data_truncated Una o più righe di dati che corrispondono alla selezione della query non sono state restituite a causa dei limiti di dimensioni dell'output. (avviso). timeout La query non ha risposto entro il tempo previsto.
hasWarning()	Booleano	Restituisce true se l'esecuzione della query contiene messaggi di avviso.
isError()	Booleano	Restituisce true se l'esecuzione della query non è riuscita e la risposta non contiene alcuna tabella di dati. Restituisce <false> se l'esecuzione della query è riuscita e la risposta contiene una tabella di dati.

Errore nella visualizzazione

L'API mette a disposizione diverse funzioni per aiutarti a mostrare messaggi di errore personalizzati ai tuoi utenti. Per utilizzare queste funzioni, fornisci un elemento container nella pagina (in genere un <div>), in cui l'API disegna un messaggio di errore formattato. Questo può essere l'elemento del contenitore di visualizzazione o un contenitore solo per errori. Se specifichi l'elemento contenitore di visualizzazione, sopra la visualizzazione verrà visualizzato il messaggio di errore. Quindi, chiama la funzione appropriata di seguito per visualizzare o rimuovere il messaggio di errore.

Tutte le funzioni sono funzioni statiche nello spazio dei nomi google.visualization.errors.

Molte visualizzazioni possono restituire un evento di errore. Per ulteriori informazioni, consulta la sezione dedicata agli eventi di errore di seguito.

Puoi visualizzare un esempio di errore personalizzato nell'esempio di wrapper query.

Funzione	Valore restituito	Descrizione
addError(container, message, opt_detailedMessage, opt_options)	Valore ID stringa che identifica l'oggetto di errore creato. Questo è un valore univoco nella pagina e può essere utilizzato per rimuovere l'errore o trovare l'elemento che lo contiene.	Aggiunge un blocco di visualizzazione di errore per l'elemento di pagina specificato, con testo e formattazione specificati. container: l'elemento DOM in cui inserire il messaggio di errore. Se non è possibile trovare il container, la funzione genererà un errore JavaScript. message: una stringa di messaggio da visualizzare. opt_detailedMessage - Una stringa di messaggio dettagliata facoltativa. Per impostazione predefinita, questo è un testo visualizzato al passaggio del mouse, che può essere modificato nella proprietà opt_options.showInToolTip descritta di seguito. opt_options - un oggetto facoltativo con proprietà che impostano varie opzioni di visualizzazione per il messaggio. Sono supportate le seguenti opzioni: showInTooltip: un valore booleano, dove true mostra il messaggio dettagliato solo come testo della descrizione comando, e false mostra il messaggio dettagliato nel corpo del container dopo il messaggio breve. Il valore predefinito è vero. type: una stringa che descrive il tipo di errore, che determina quali stili CSS devono essere applicati a questo messaggio. I valori supportati sono "error" e "warning". Il valore predefinito è "error". style: una stringa di stile per il messaggio di errore. Questo stile sostituirà qualsiasi stile applicato al tipo di avviso (opt_options.type). Esempio: 'background-color: #33ff99; padding: 2px;' il valore predefinito è una stringa vuota. removable (rimovibile): un valore booleano, dove true significa che il messaggio può essere chiuso con un clic del mouse dall'utente. Il valore predefinito è false.
addErrorFromQueryResponse(container, response)	Valore ID stringa che identifica l'oggetto di errore creato o nullo se la risposta non ha indicato un errore. Questo è un valore univoco nella pagina e può essere utilizzato per rimuovere l'errore o trovare l'elemento che lo contiene.	Passa un container di risposta alla query e di messaggio di errore a questo metodo: se la risposta alla query indica un errore della query, viene visualizzato un messaggio di errore nell'elemento della pagina specificato. Se la risposta alla query è null, il metodo genererà un errore JavaScript. Passa la QueryResponse ricevuta nel gestore di query a questo messaggio per visualizzare un errore. Verrà impostato anche lo stile del display appropriato per il tipo (errore o avviso, simile a addError(opt_options.type)) container: l'elemento DOM in cui inserire il messaggio di errore. Se non è possibile trovare il container, la funzione genererà un errore JavaScript. response: un oggetto QueryResponse ricevuto dal tuo gestore di query in risposta a una query. Se è null, il metodo genererà un errore JavaScript.
removeError(id)	Booleano: true se l'errore è stato rimosso; altrimenti false.	Rimuove l'errore specificato dall'ID dalla pagina. id: l'ID stringa di un errore creato utilizzando addError() o addErrorFromQueryResponse().
removeAll(container)	Nessuno	Rimuove tutti i blocchi di errore da un container specificato. Se il container specificato non esiste, verrà restituito un errore. container: l'elemento DOM contenente le stringhe di errore da rimuovere. Se non è possibile trovare il container, la funzione genererà un errore JavaScript.
getContainer(errorId)	Consente di gestire un elemento DOM contenente l'errore specificato oppure un valore nullo se non è stato trovato.	Recupera un handle all'elemento container che contiene l'errore specificato da errorID. errorId: ID stringa di un errore creato utilizzando addError() o addErrorFromQueryResponse().

Eventi

La maggior parte delle visualizzazioni attiva gli eventi per indicare che si è verificato un evento. Come utente del grafico, spesso vorresti ascoltare questi eventi. Se codifica la tua visualizzazione, puoi anche attivare questi eventi autonomamente.

I seguenti metodi consentono agli sviluppatori di ascoltare gli eventi, rimuovere i gestori di eventi esistenti o attivare gli eventi all'interno di una visualizzazione.

• google.visualization.events.add listener() e google.visualization.events.addOneTime listener() per eventi.
• google.visualization.events.remove listener() rimuove un listener esistente
• google.visualization.events.removeAlllists() rimuove tutti i listener di un grafico specifico
• google.visualization.events.trigger() attiva un evento.

add listener()

Chiama questo metodo per registrarti e ricevere eventi attivati da una visualizzazione ospitata sulla tua pagina. Devi documentare gli eventuali argomenti dell'evento che verranno passati alla funzione di gestione.

google.visualization.events.addListener(source_visualization,
  event_name, handling_function)

visualizzazione_origine

Un handle per l'istanza di visualizzazione del codice sorgente.

event_name

Il nome della stringa dell'evento da ascoltare. Una visualizzazione dovrebbe documentare gli eventi generati.

funzione_di_gestione

Il nome della funzione JavaScript locale da chiamare quando source_visualization attiva l'evento event_name. La funzione di gestione passerà qualsiasi argomento evento come parametri.

Restituisce

Un gestore listener per il nuovo listener. Il gestore può essere utilizzato per rimuovere in seguito questo listener, se necessario, chiamando la pagina google.visualization.events.remove listener().

Esempio

Ecco un esempio di registrazione per ricevere l'evento di selezione

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);

google.visualization.events.addListener(table, 'select', selectHandler);

function selectHandler() {
  alert('A table row was selected');
}

addOneTime listener()

È identico a addListener(), ma è destinato agli eventi che devono essere ascoltati solo una volta. I lanci successivi dell'evento non richiamano la funzione di gestione.

Ecco un esempio dei casi in cui è utile: ogni estrazione genera un evento ready. Se vuoi che solo il primo ready esegua il tuo codice, vuoi addOneTimeListener invece di addListener.

remove listener()

Chiama questo metodo per annullare la registrazione di un listener di eventi esistente.

google.visualization.events.removeListener(listener_handler)

listner_handler

Il gestore listener da rimuovere, come restituito da google.visualization.events.add listener().

removeAll listeners()

Chiama questo metodo per annullare la registrazione di tutti i listener di eventi di un'istanza di visualizzazione specifica.

google.visualization.events.removeAllListeners(source_visualization)

visualizzazione_origine

Un handle dell'istanza di visualizzazione del codice sorgente da cui tutti i listener di eventi devono essere rimossi.

trigger()

Richiamato dagli implementatori di visualizzazione. Richiama questo metodo dalla visualizzazione per attivare un evento con un nome e un insieme di valori arbitrari.

google.visualization.events.trigger(source_visualization, event_name,
  event_args)

visualizzazione_origine

Un handle dell'istanza di visualizzazione di origine. Se stai chiamando questa funzione da un metodo definito dalla visualizzazione di invio, puoi semplicemente passare la parola chiave this.

event_name

Un nome stringa per chiamare l'evento. Puoi scegliere qualsiasi valore di stringa.

argomenti_evento

[Facoltativo] Una mappa di coppie nome/valore da passare al metodo di ricezione. Ad esempio:{message: "Ciao!", punteggio: 10, nome: "Fred"}. Puoi trasmettere null se non sono necessari eventi; il destinatario deve essere pronto ad accettare null per questo parametro.

Esempio

Di seguito è riportato un esempio di visualizzazione che genera un metodo denominato "select" quando viene richiamato il metodo onclick. Non trasmette alcun valore.

MyVisualization.prototype.onclick = function(rowIndex) {
  this.highlightRow(this.selectedRow, false); // Clear previous selection
  this.highlightRow(rowIndex, true); // Highlight new selection

  // Save the selected row index in case getSelection is called.
  this.selectedRow = rowIndex;

  // Trigger a select event.
  google.visualization.events.trigger(this, 'select', null);
}

Proprietà e metodi di visualizzazione standard

Ogni visualizzazione deve esporre il seguente insieme di metodi e proprietà obbligatori e facoltativi. Tuttavia, tieni presente che non sono previsti controlli di tipo per applicare questi standard, pertanto devi leggere la documentazione per ogni visualizzazione.

• Costruttore
• draw()
• getAction() [facoltativo]
• getSelection() [facoltativo]
• removeAction() [facoltativo]
• setAction()[facoltativo]
• setSelection() [facoltativo]

Nota: questi metodi si trovano nello spazio dei nomi della visualizzazione, non nello spazio dei nomi google.visualization.

Costruttore

Il costruttore deve avere il nome della classe di visualizzazione e restituire un'istanza di quella classe.

visualization_class_name(dom_element)

elemento_dom

Un puntatore su un elemento DOM in cui deve essere incorporata la visualizzazione.

Esempio

var org = new google.visualization.OrgChart(document.getElementById('org_div')); 

draw()

Disegna la visualizzazione nella pagina. Dietro le quinte, è possibile recuperare un'immagine da un server o crearla nella pagina utilizzando il codice di visualizzazione collegato. Devi richiamare questo metodo ogni volta che i dati o le opzioni cambiano. L'oggetto deve essere disegnato all'interno dell'elemento DOM trasmesso nel costruttore.

draw(data[, options])

dati

Un elemento DataTable o DataView che contiene i dati da utilizzare per tracciare il grafico. Non esiste un metodo standard per estrarre un DataTable da un grafico.

opzioni

[Facoltativo] Una mappa delle coppie nome/valore delle opzioni personalizzate. Alcuni esempi sono l'altezza e la larghezza, i colori di sfondo e i sottotitoli. La documentazione relativa alla visualizzazione dovrebbe elencare le opzioni disponibili e dovrebbe supportare le opzioni predefinite se non specifichi questo parametro. Puoi utilizzare la sintassi letterale dell'oggetto JavaScript per trasmettere una mappa di opzioni, ad esempio {x:100, y:200, title:'An Example'}

Esempio

chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});

getAction()

Facoltativamente, è esposto dalle visualizzazioni che hanno descrizioni comando e consentono azioni sulle descrizioni comando.

Restituisce l'oggetto azione della descrizione comando con il actionID richiesto.

Esempio:

// Returns the action object with the ID 'alertAction'.
chart.getAction('alertAction');

getSelection()

Facoltativamente, è esposto dalle visualizzazioni che vogliono consentirti di accedere ai dati attualmente selezionati nel grafico.

selection_array getSelection()

Restituisce

selection_array Un array di oggetti selezionati, ognuno che descrive un elemento di dati nella tabella sottostante utilizzata per creare la visualizzazione (un DataView o un DataTable). Ogni oggetto ha le proprietà row e/o column, con l'indice della riga e/o della colonna dell'elemento selezionato nel DataTable sottostante. Se la proprietà row è null, la selezione è una colonna; se la proprietà column è null, la selezione è una riga; se entrambi sono non null, si tratta di un elemento dati specifico. Puoi chiamare il metodo DataTable.getValue() per ottenere il valore dell'elemento selezionato. L'array recuperato può essere passato a setSelection().

Esempio

function myClickHandler(){
  var selection = myVis.getSelection();
  var message = '';

  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

removeAction()

Facoltativamente, è esposto dalle visualizzazioni che hanno descrizioni comando e consentono azioni sulle descrizioni comando.

Rimuove l'oggetto azione della descrizione comando con actionID richiesto dal grafico.

Esempio:

// Removes an action from chart with the ID of 'alertAction'.
chart.removeAction('alertAction');

setAction()

Facoltativamente, è esposto dalle visualizzazioni che hanno descrizioni comando e consentono azioni sulle descrizioni comando. Funziona solo per i grafici principali (a barre, a colonne, a linee, ad area, a dispersione, combinati, a bolle, a torta, ad anello, a candele, a istogrammi, a gradini).

Imposta un'azione della descrizione comando da eseguire quando l'utente fa clic sul testo dell'azione.

setAction(action object)

Il metodo setAction accetta un oggetto come parametro di azione. Questo oggetto deve specificare tre proprietà: id (l'ID dell'azione da impostare), text (il testo che dovrebbe essere visualizzato nella descrizione comando per l'azione) e action, la funzione che deve essere eseguita quando un utente fa clic sul testo dell'azione.

Tutte le azioni relative alla descrizione comando devono essere impostate prima di chiamare il metodo draw() del grafico.

Esempio:

// Sets a tooltip action which will pop an alert box on the screen when triggered.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  }
});

Il metodo setAction può anche definire due proprietà aggiuntive: visible e enabled. Queste proprietà devono essere funzioni che restituiscono valori boolean che indicano se l'azione della descrizione comando sarà visibile e/o abilitata.

Esempio:

// The visible/enabled functions can contain any logic to determine their state
// as long as they return boolean values.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  },
  visible: function() {
    return true;
  },
  enabled: function() {
    return true;
  }
});

setSelection()

Facoltativamente, seleziona una voce di dati nella visualizzazione, ad esempio un punto in un grafico ad area o una barra in un grafico a barre. Quando questo metodo viene chiamato, la visualizzazione dovrebbe indicare visivamente la nuova selezione. L'implementazione di setSelection() non deve attivare un evento "select". Le visualizzazioni potrebbero ignorare parte della selezione. Ad esempio, una tabella che può mostrare solo le righe selezionate potrebbe ignorare gli elementi di una cella o di una colonna nell'implementazione setSelection() oppure selezionare l'intera riga.

Ogni volta che questo metodo viene chiamato, tutti gli elementi selezionati vengono deselezionati e deve essere applicato il nuovo elenco di selezione trasmesso. Non esiste un modo esplicito per deselezionare i singoli elementi; per deselezionare i singoli elementi, chiama setSelection() con gli elementi da rimanere selezionati; per deselezionare tutti gli elementi, chiama setSelection(), setSelection(null) o setSelection([]).

setSelection(selection_array)

matrice_selezione

Un array di oggetti, ciascuno con una riga numerica e/o una proprietà colonna. row e column sono il numero di riga o colonna basato su zero di un elemento nella tabella dei dati da selezionare. Per selezionare una colonna intera, imposta row su null; per selezionare una riga intera, imposta column su null. Esempio:setSelection([{row:0,column:1},{row:1, column:null}]) seleziona la cella in (0,1) e l'intera riga 1.

Metodi statici assortiti

Questa sezione contiene vari metodi utili esposti nello spazio dei nomi google.visualization.

arrayToDataTable()

Questo metodo accetta un array bidimensionale e lo converte in una tabella dati.

I tipi di dati della colonna vengono determinati automaticamente in base ai dati forniti. I tipi di dati della colonna possono essere specificati anche utilizzando la notazione letterale dell'oggetto nella prima riga (la riga dell'intestazione della colonna) della matrice (ovvero {label: 'Start Date', type: 'date'}). È possibile utilizzare anche i ruoli facoltativi dei dati, ma devono essere definiti in modo esplicito utilizzando la notazione del valore letterale dell'oggetto. La notazione letterale dell'oggetto può essere utilizzata anche per qualsiasi cella, consentendo di definire gli oggetti cella.

Sintassi

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

DueDArray

Un array bidimensionale, in cui ogni riga rappresenta una riga nella tabella dati. Se opt_firstRowIsData è false (per impostazione predefinita), la prima riga viene interpretata come etichette di intestazione. I tipi di dati di ogni colonna vengono interpretati automaticamente dai dati forniti. Se una cella non contiene alcun valore, specifica un valore nullo o vuoto a seconda dei casi.

opt_firstRowIsData

Indica se la prima riga definisce o meno una riga di intestazione. Se restituisce true, si presume che tutte le righe siano dati. Se il valore è false, si presume che la prima riga sia una riga di intestazione e i valori sono assegnati come etichette di colonna. Il valore predefinito è false.

Restituisce

Un nuovo DataTable.

Esempi

Il codice seguente illustra tre modi per creare lo stesso oggetto DataTable:

// Version 1: arrayToDataTable method
var data2 = google.visualization.arrayToDataTable([
  [{label: 'Country', type: 'string'},
   {label: 'Population', type: 'number'},
   {label: 'Area', type: 'number'},
   {type: 'string', role: 'annotation'}],
  ['CN', 1324, 9640821, 'Annotated'],
  ['IN', 1133, 3287263, 'Annotated'],
  ['US', 304, 9629091, 'Annotated'],
  ['ID', 232, 1904569, 'Annotated'],
  ['BR', 187, 8514877, 'Annotated']
]);

// Version 2: DataTable.addRows
var data3 = new google.visualization.DataTable();
data3.addColumn('string','Country');
data3.addColumn('number','Population');
data3.addColumn('number','Area');
data3.addRows([
  ['CN', 1324, 9640821],
  ['IN', 1133, 3287263],
  ['US', 304, 9629091],
  ['ID', 232, 1904569],
  ['BR', 187, 8514877]
]);

// Version 3: DataTable.setValue
var data = new google.visualization.DataTable();
data.addColumn('string','Country');
data.addColumn('number', 'Population');
data.addColumn('number', 'Area');
data.addRows(5);
data.setValue(0, 0, 'CN');
data.setValue(0, 1, 1324);
data.setValue(0, 2, 9640821);
data.setValue(1, 0, 'IN');
data.setValue(1, 1, 1133);
data.setValue(1, 2, 3287263);
data.setValue(2, 0, 'US');
data.setValue(2, 1, 304);
data.setValue(2, 2, 9629091);
data.setValue(3, 0, 'ID');
data.setValue(3, 1, 232);
data.setValue(3, 2, 1904569);
data.setValue(4, 0, 'BR');
data.setValue(4, 1, 187);
data.setValue(4, 2, 8514877);

pullChart()

Questo metodo crea un grafico in una singola chiamata. Il vantaggio di questo metodo è che richiede poco codice e puoi serializzare e salvare le visualizzazioni come stringhe di testo per riutilizzarle. Questo metodo non restituisce un handle al grafico creato, quindi non puoi assegnare listener di metodi per rilevare gli eventi del grafico.

Sintassi

google.visualization.drawChart(chart_JSON_or_object)

grafico_JSON_o_oggetto

Una stringa letterale JSON o un oggetto JavaScript, con le seguenti proprietà (sensibile alle maiuscole):

Proprietà	Tipo	Obbligatorio	Predefinito	Descrizione
tipo grafico	Stringa	Obbligatorio	Nessuno	Il nome della classe della visualizzazione. Il nome del pacchetto google.visualization può essere omesso per i grafici di Google. Se la libreria di visualizzazione appropriata non è già stata caricata, questo metodo caricherà la libreria per te se si tratta di una visualizzazione Google; devi caricare le visualizzazioni di terze parti in modo esplicito. Esempi: Table, PieChart, example.com.CrazyChart.
containerId	Stringa	Obbligatorio	Nessuno	L'ID dell'elemento DOM sulla tua pagina che ospita la visualizzazione.
opzioni	Oggetto	Facoltativo	Nessuno	Un oggetto che descrive le opzioni per la visualizzazione. Puoi utilizzare la notazione letterale JavaScript o fornire un handle all'oggetto. Esempio:"options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
Tabella dati	Oggetto	Facoltativo	Nessuno	Un DataTable utilizzato per completare la visualizzazione. Può essere una rappresentazione stringa stringa letterale di una tabella Data, come descritto sopra, o un handle a un oggetto google.visualization.DataTable compilato o un array bidimensionale come accettato da arrayToDataTable(opt_firstRowIsData=false) . Devi specificare questa proprietà o la proprietà dataSourceUrl.
URLOrigineDati	Stringa	Facoltativo	Nessuno	Una query sull'origine dati per completare i dati del grafico (ad esempio, un foglio di lavoro Google). Devi specificare questa proprietà o la proprietà dataTable.
query	Stringa	Facoltativo	Nessuno	Se specifichi dataSourceUrl, puoi facoltativamente specificare una stringa di query di tipo SQL utilizzando il linguaggio di query di visualizzazione per filtrare o manipolare i dati.
refreshInterval (Intervallo di aggiornamento)	Numero	Facoltativo	Nessuno	Quanto spesso, in secondi, la visualizzazione dovrebbe aggiornare la sorgente di query. Utilizzalo solo quando specifichi dataSourceUrl.
visualizza	Oggetto O Array	Facoltativo	Nessuno	Imposta un oggetto di inizializzazione di DataView, che funge da filtro sui dati sottostanti, come definito dal parametro dataTable o dataSourceUrl. Puoi trasmettere una stringa oppure un oggetto inizializzatore DataView, come quello restituito da dataview.toJSON(). Esempio: "view": {"columns": [1, 2]} puoi anche trasferire un array di oggetti di inizializzazione di DataView, nel qual caso viene applicato il primo DataView nell'array ai dati sottostanti per creare una nuova tabella di dati, mentre il secondo viene applicato alla tabella di dati risultante dall'applicazione del primo DataView e così via.

Esempi

Crea un grafico a tabella basato su un'origine dati del foglio di lavoro e include la query SELECT A,D WHERE D > 100 ORDER BY D

<script type="text/javascript">
  google.charts.load('current');  // Note: No need to specify chart packages.
  function drawVisualization() {
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
      "query":"SELECT A,D WHERE D > 100 ORDER BY D",
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true
      }
   });
 }
google.charts.setOnLoadCallback(drawVisualization);
</script>

L'esempio successivo crea la stessa tabella, ma crea un DataTable a livello locale:

<script type='text/javascript'>
  google.charts.load('current');
  function drawVisualization() {
    var dataTable = [
      ["Country", "Population Density"],
      ["Indonesia", 117],
      ["China", 137],
      ["Nigeria", 142],
      ["Pakistan", 198],
      ["India", 336],
      ["Japan", 339],
      ["Bangladesh", 1045]
    ];
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataTable": dataTable,
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true,
      }
    });
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

Questo esempio viene trasmesso in una rappresentazione stringa stringa del grafico, che potresti aver caricato da un file:

<script type="text/javascript">
  google.charts.load('current');
  var myStoredString = '{"containerId": "visualization_div",' +
    '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' +
    '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' +
    '"refreshInterval": 5,' +
    '"chartType": "Table",' +
    '"options": {' +
    '   "alternatingRowStyle": true,' +
    '   "showRowNumber" : true' +
    '}' +
  '}';
  function drawVisualization() {
    google.visualization.drawChart(myStoredString);
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

drawToolbar()

È il costruttore dell'elemento della barra degli strumenti che può essere collegato a molte visualizzazioni. Questa barra degli strumenti consente all'utente di esportare i dati di visualizzazione in diversi formati o di fornire una versione incorporabile della visualizzazione per l'utilizzo in luoghi diversi. Consulta la pagina della barra degli strumenti per ulteriori informazioni e per un esempio di codice.