COMPONENTI GRAFICI (Charts Components)

Il passaggio da DATI a INFORMAZIONI avviene attraverso gli strumenti GRAFICI.

Questo nuovo componente è stato implementato da poco e non avendo ancora trovato su Internet delle guide esaurienti, mi sono dato da fare per studiarlo e aggiungerlo al sito.

È formato dai componenti Charts, la base su dove verrà disegnato il grafico, e ChartsData2D dove dichiarare i dati d’origine.

Kodular non ha un componente nativo, invece Thunkable si appoggia ad API esterne.

tipi di grafico

Contenuti:

App Inventor 2 Kodular ThunkableX
   

GRAFICI (Charts)

Il componente Grafici traccia i dati provenienti dai componenti Dati collegati. Sono disponibili cinque diversi tipi di grafico (Vedi immagine iniziale)

  1. Lineare, (Line)
  2. Area, (Area)
  3. Dispersione, (Scatter)
  4. Barra, (Bar)
  5. Torta, (Pie)

che possono essere modificati dalla proprietà Tipo. Il componente Grafico stesso ha varie altre proprietà che modificano l’aspetto del grafico, e fungono da base (un po’ come il Canvas per i componenti Disegno e Animazione).

NB: Per chi non conoscesse i grafici a Dispersione, sono grafici in cui due variabili di un set di dati sono riportate su uno spazio cartesiano.

confronto grafico linee e dispersione

Nell’immagine, il secondo grafico (a Dispersione) evidenzia il più alto valore di Particolato. La differenza tra i due grafici è sostanziale. Il grafico a Linee è ordinato su una scala temporale invece quello a Dispersione traccia solo l’intersezione tra le serie “Pioggia giornaliera” e “Particolato”. 

NB: sul mercato esiste già da parecchi anni, l’estensione ChartMaker molto apprezzata sui forum di tutto il mondo. Prima di correre a installarla, date un’occhiata alle istruzioni di AI2 e poi decidete se aggiungerla alla vostra App.

Video tutorial

 

Proprietà

BackgroundColor color

Specifica il colore di sfondo del grafico come numero intero alfa-rosso-verde-blu.

Description text

Specifica il testo visualizzato dall’etichetta di descrizione all’interno del grafico. Specificando una stringa vuota (”) non verrà visualizzata alcuna etichetta.

GridEnabled boolean

Modifica la visibilità della griglia del grafico, se il tipo di grafico è impostato su un grafico con un asse (si applica ai tipi di grafico ad area, a barre, a linee, a dispersione).

Height number blocks-only

Specifica l’altezza verticale del grafico, misurata in pixel.

HeightPercent number write-only, blocks-only

Specifica l’altezza verticale del grafico come percentuale dell’altezza dello schermo.

Labels list blocks-only

Modifica le etichette dell’asse X del grafico nell’elenco specificato, se il tipo di grafico è impostato su un grafico con un asse.

La prima voce della Lista corrisponde al valore x minimo dei dati, la seconda al valore x minimo + 1 e così via.

Se non viene specificata un’etichetta per un valore x, viene utilizzato un valore predefinito (il valore x del segno di spunta dell’asse in quella posizione).

LabelsFromString text  write-only, designer-only

Specifica le etichette da impostare sull’asse X del grafico, a condizione che la vista corrente sia un grafico con un asse X. Le etichette sono specificate come una singola stringa di valori separati da virgola (il che significa che ogni valore è separato da una virgola). Per maggiori dettagli su come le etichette vengono applicate al grafico, vedi la proprietà Labels dello stesso componente, .

LegendEnabled boolean

Modifica la visibilità della legenda del grafico.

PieRadius number  write-only, designer-only

Imposta il raggio della torta del grafico. Se il tipo corrente non è il grafico a torta, il valore non ha effetto.

TypeChartType designer-only

Specifica il tipo di grafico, che determina come visualizzare i dati.

Visible boolean

Specifica se il grafico deve essere visibile sullo schermo. Il valore è vero se il grafico è visualizzato e falso se nascosto.

Width number  designer-only

Specifica la larghezza orizzontale del grafico, misurata in pixel.

WidthPercent number  write-only, designer-only

Specifica la larghezza orizzontale del grafico come percentuale della larghezza dello schermo.

Eventi

EntryClick( anyx, numbery)

Indica che l’utente ha fatto clic su una voce di dati nel Grafico. Vengono riportate le serie specifiche, insieme ai suoi valori x e y.

Metodi

Nessuno

Linea di tendenza(Trendline)

Il componente Trend line può essere utilizzato per visualizzare la tendenza di una serie di dati rappresentata da un componente ChartData2D. Deve essere aggiunto a un componente Grafico. Per associare un’istanza ChartData2D, imposta la proprietà ChartData nella visualizzazione progettazione dell’app o utilizza il blocco setter. La Trendline si aggiornerà automaticamente se il suo ChartData2D associato viene modificato.

Sono disponibili quattro modelli per la Trendline: lineare, quadratica, logaritmica ed esponenziale. A seconda del modello utilizzato, alcune proprietà del componente Trendline forniranno valori rilevanti.

  • Lineare: y = m*x + b, dove m è il coefficiente lineare e b è l’intercetta Y
  • Quadratico: y = a*x2 + b*x + c, dove a è coefficiente quadratico, b è coefficiente lineare e c è Y intercetta
  • Logaritmico: y = a + b*ln(x), dove a è la costante logaritmica e b è il coefficiente logaritmico
  • Esponenziale: y = a*bx , dove a è il coefficiente esponenziale e b è la base esponenziale

Per tutti i modelli, la correlazione r2 verrà riportata tramite il blocco proprietà RSquared.

Proprietà

 

Eventi

Metodi

Grafici bidimensionali (ChartsData2D)

Il componente ChartsData2D (figlio) si inserisce trascinandolo sul componente Charts (genitore), come si nota dalla palette Components del’immagine qui superiore.

Un componente ChartData2D rappresenta una singola serie di dati bidimensionale nel componente Grafico, ad esempio una singola linea nel caso di un grafico a linee o una singola barra nel caso di un grafico a barre. Il componente Dati è responsabile della gestione di tutti i dati del Grafico. Le voci del componente Dati corrispondono a un valore x e a y. Il componente viene collegato direttamente a un componente del grafico trascinandolo sul grafico.

Video tutorial

Proprietà

Color color

Specifica il colore della serie di dati come un numero intero alfa-rosso-verde-blu.

Colors list blocks-only

Specifica i colori della serie di dati come un elenco di numeri interi alfa-rosso-blu-blu.

Se ci sono più dati di quelli che ci sono colori, i colori saranno alternati in ordine. Per esempio. Se ci sono due colori rosso e blu, i colori verranno applicati nell’ordine: rosso, blu, rosso, blu, …

DataFileXColumn text write-only, designer-only

Valore utilizzato durante l’importazione di dati dalla proprietà sorgente (Source) del componente DataFile. Il valore rappresenta la colonna da utilizzare dal file di dati per le voci X della serie di dati. Ad esempio, se il primo valore di una colonna è “tempo” e viene specificato un valore di colonna di “tempo”, quella colonna verrà utilizzata per i valori X. Se un valore qui non è specificato, verranno invece generati i valori predefiniti per i valori X.

DataFileYColumn text write-only, designer-only

Valore utilizzato durante l’importazione di dati dalla proprietà sorgente (Source) del componente DataFile. Il valore rappresenta la colonna da utilizzare dal file di dati per le voci Y della serie di dati. Ad esempio, se il primo valore di una colonna è “temperatura” e viene specificato un valore di colonna di “temperatura”, quella colonna verrà utilizzata per i valori Y. Se un valore qui non è specificato, verranno invece generati i valori predefiniti per i valori Y.

DataSourceKey text write-only, designer-only

Imposta l’identificatore della chiave dell’origine dati per il valore da importare dall’origine dati allegata.

Un esempio è il tag del componente tinyDB, che identifica il valore.

La proprietà è una proprietà solo progettista e deve essere modificata dopo aver impostato il componente di origine del componente dati del grafico.

Un elenco completo dei valori applicabili per ciascuna fonte compatibile è il seguente:

  • Per TinyDB e CloudDB, questo è il valore del tag.
  • Per l’accelerometersensor, il valore dovrebbe essere uno dei seguenti: x y o z
  • Per il giroscopi, il valore dovrebbe essere uno dei seguenti: x y o z
  • Per le posizioni, il valore dovrebbe essere uno dei seguenti: latitudine, longitudine, altitudine o velocità
  • Per gli orientamenti, il valore dovrebbe essere uno dei seguenti: pitch, azimut o roll
  • Per il contapassi, il valore dovrebbe essere uno dei seguenti: W
  • Per il VesimitySensor, il valore dovrebbe essere la distanza.
  • Per il BluetoothClient, il valore rappresenta il prefisso da rimuovere dal valore. Ad esempio, se i valori sono disponibili nel formato “T: 12”, il prefisso può essere specificato come “T:” e il prefisso verrà quindi rimosso dai dati. Non è possibile specificare alcun valore se vengono restituiti valori puramente numerici.

ElementsFromPairs text write-only, designer-only

Elenco di elementi separati da virgola da utilizzare per la serie di dati. I valori sono formattati come segue: X1, Y1, X2, Y2, X3, Y3. I valori vengono presi in coppia e una voce viene formata dai valori X e Y.

Label text

Specifica il testo per l’etichetta della serie dati.

LineType LineType write-only, designer-only

Modifica il tipo di riga della serie di dati, a condizione che il componente dati sia collegato a un grafico che ha il tipo impostato su un grafico basato sulla linea (si applica ai tipi di grafici area e di linea. Se nel componente Charts non viene selezionato linea o aereo, questa proprietà sparisce nel componente ChatsData2D). I tipi validi includono:

  1. lineari, (linear)
  2. curvi, (curved)
  3. graduali a passi. (stepped o linea quadra)

PointShape PointStyle write-only, designer-only

Modifica la forma del punto della serie di dati, a condizione che il componente dati sia collegato a un grafico che ha il tipo impostato sul grafico a dispersione. I tipi validi includono cerchio, quadrato, triangolo, croce, x.

Source component write-only, designer-only

Imposta l’origine da utilizzare per il componente dati. Le scelte valide includono accelerometersensor, BluetoothClient, CloudDB, DataFile, GyroscopEsensor, LocationesSnro, Orientamentsensor, Pavapatometro, ProximitySensor TinyDB e componenti Web. Il valore di origine richiede inoltre le proprietà valide di DataSourceValue, WebColumn o DataFileColumn, a seconda del tipo di origine allegata (le proprietà richieste vengono visualizzate nel menu Proprietà dopo la modifica della sorgente).

Se i dati identificati dal DataSourceKey vengono aggiornati nel componente dell’origine dati allegata, i dati vengono anche aggiornati nel componente dati del grafico.

SpreadsheetUseHeaders boolean write-only, designer-only

Se controllato, la prima riga del foglio di calcolo verrà utilizzata per interpretare i valori della colonna X e Y. Altrimenti, le colonne X e Y dovrebbero essere un riferimento a colonna, come A o B.

SpreadsheetXColumn text write-only, designer-only

Imposta la colonna per analizzare il componente del foglio di calcolo allegato per i valori X. Se una colonna non viene specificata, verranno generati i valori predefiniti per i valori X.

SpreadsheetYColumn text write-only, designer-only

Imposta la colonna per analizzare il componente del foglio di calcolo allegato per i valori Y. Se una colonna non viene specificata, verranno generati i valori predefiniti per i valori Y.

Webxcolumn text write-only, designer-only

Valore utilizzato durante l’importazione di dati da un’origine del componente Web. Il valore rappresenta la colonna da utilizzare dal Web per le voci X della serie di dati. Ad esempio, se il contenuto del Web viene recuperato in formato JSON e esiste un array con il tag “tempo”, è possibile specificare il valore della colonna “tempo” per utilizzare quell’array.

Webycolumn text write-only, designer-only

Valore utilizzato durante l’importazione di dati da un’origine del componente Web. Il valore rappresenta la colonna da utilizzare dal Web per le voci Y della serie di dati. Ad esempio, se il contenuto del Web viene recuperato in formato JSON e esiste un array con il tag “temperatura”, è possibile specificare il valore della colonna “temperatura” per utilizzare quell’array.

Eventi

EntryClick( anyx, numbery)

Indica che l’utente ha toccato un punto dati nel grafico. Vengono riportati i valori x e y della voce tappata.

Metodi

AddEntry( textx, texty)

Aggiunge una voce con il valore x e y specificato. I valori possono essere specificati come testo o come numeri. Per i grafici a linee, a dispersione, ad area e a barre, entrambi i valori devono rappresentare un numero. Per i grafici a barre, il valore x viene arrotondato al numero intero più vicino. Per i grafici a torta, il valore x è un valore di testo.

ChangeDataSource( componentsource, textkeyValue)

Modifica l’origine dati del componente nell’origine del componente specificata con il valore chiave specificato. Vedere la proprietà Source per i componenti applicabili. Vedere la proprietà DataSourceKey per l’interpretazione di keyValue. Nel caso dei componenti DataFile e Web, il keyValue dovrebbe essere una stringa formattata CSV, dove il primo valore corrisponde alla colonna x e il secondo valore corrisponde al valore y.

Clear()

Rimuove tutte le voci dalla serie di dati.

booleanDoesEntryExist( textx, texty)

Restituisce un valore booleano che specifica se esiste una voce con i valori x e y specificati. Il valore booleano di true viene restituito se il valore esiste e un valore false in caso contrario. Vedere AddEntry per una spiegazione dei valori di ingresso validi.

listGetAllEntries()

Restituisce tutte le voci della serie di dati. Il valore restituito è un elenco, in cui ogni elemento dell’elenco è un elenco contenente i valori della voce in ordine.

listGetEntriesWithXValue( textx)

Restituisce tutte le voci della serie di dati corrispondenti al valore x specificato. Per una descrizione del formato dell’elenco restituito, vedere GetAllEntries

listGetEntriesWithYValue( texty)

Restituisce tutte le voci della serie di dati corrispondenti al valore y specificato. Per una descrizione del formato dell’elenco restituito, vedere GetAllEntries

ImportFromCloudDB( componentcloudDB, texttag)

Importa i dati dal componente CloudDB specificato prendendo il valore identificato dal valore del tag specificato.

Il valore CloudDB previsto è un elenco formattato nello stesso modo descritto in ImportFromList.

Non sovrascrive alcun dato.

ImportFromDataFile( componentdataFile, textxValueColumn, textyValueColumn)

Importa i dati dal componente DataFile specificato prendendo la colonna X specificata per i valori x e la colonna Y specificata per i valori y. Il file di origine di DataFile dovrebbe essere un file CSV (MI RACCOMANDO CONTROLLARE CHE I VALORI SIANO EFFETTIVAMENTE A SEPARATI DA VIRGOLA. Vi consiglio di lavorare sempre con Fogli di Google, perchè ho notato un’incongruenza tra i dati esportati da Excel e quelli esportati da Google Sheet) o JSON.

Il superamento del test vuoto per uno qualsiasi dei parametri della colonna comporterà l’utilizzo di valori predefiniti che sono gli indici delle voci. Per la prima voce, il valore predefinito sarebbe 1, per la seconda sarebbe 2 e così via.

ImportFromList( listlist)

Importa i dati dal parametro elenco specificato nella serie di dati. L’elenco dovrebbe contenere elementi che sono anche elenchi. Ogni elemento dell’elenco dovrebbe avere 2 valori, il primo è il valore x e il secondo è il valore y. Le voci dell’elenco non valide vengono semplicemente saltate. I dati esistenti non vengono cancellati.

ImportFromSpreadsheet( componentsheet, textxColumn, textyColumn, booleanuseHeaders)

Importa i dati dal componente Foglio di calcolo specificato prendendo la colonna x specificata per i valori x e la colonna y specificata per i valori y. Prima di chiamare questa funzione, è necessario chiamare il metodo ReadSheet del componente Spreadsheet per caricare i dati. L’utilizzo dell’evento GotSheet nel componente Spreadsheet non è necessario.

Le colonne vuote vengono riempite con valori predefiniti (1, 2, 3, … per l’Entrata 1, 2, 3, …).

ImportFromTinyDB( componenttinyDB, texttag)

Importa i dati dal componente TinyDB specificato prendendo il valore identificato dal valore del tag specificato.

Il valore TinyDB previsto è un elenco formattato nello stesso modo descritto in ImportFromList.

Non sovrascrive alcun dato.

ImportFromWeb( componentweb, textxValueColumn, textyValueColumn)

Importa i dati dal componente Web specificato prendendo la colonna X specificata per i valori x e la colonna Y specificata per i valori y. Prima di chiamare questa funzione, è necessario chiamare il metodo Get del componente Web per caricare i dati. L’utilizzo dell’evento GotValue nel componente Web non è necessario.

La risposta prevista del componente Web è un file in formato JSON o CSV per il funzionamento di questa funzione.

Le colonne vuote vengono riempite con valori predefiniti (1, 2, 3, … per l’Entrata 1, 2, 3, …).

RemoveDataSource()

Rimuove l’origine dati attualmente collegata dal componente Dati grafico. In questo modo non verranno inviati più aggiornamenti dall’origine dati, tuttavia i dati correnti non verranno rimossi.

RemoveEntry( textx, texty)

Rimuove una voce con il valore x e y specificato, purché esista. Vedere AddEntry per una spiegazione dei valori di ingresso validi.

 

Aggiornato al 10/02/2023
 
 

PDF Lista comparazione dei componenti di AI2 KODULAR THUNKABLEX agg.20210911

Vuoi avere più informazioni sul Coding visuale? Vai alla pagina dei Blocchi incorporati dove potrai imparare a scrivere il linguaggio di programmazione per App Inventor 2, Kodular e Thunkable X. Visita la pagina del Blog con le ultime notizie sulle le tre piattaforme. Nella pagina Documentazione troverai i collegamenti ai forum, il glossario, i link ai siti dei migliori programmatori, i download e tanti altri accessori.