Chart component

 

Eccoci, 

mentre nello scorso tutorial ( QUI ) abbiamo lavorato con il nuovo componente Spreadsheet e le varie impostazioni , oggi vedremo il componente Chart e come inserire/prelevare dati.

Prima di tutto dalla sezione Chart andiamo ad inserire sia il componente Chart che diciamo gestisce la parte grafica sia il componente ChartData2D che invece gestisce i dati. Come primo esempio utilizzeremo direttamente il nostro file di drive, il foglio di calcolo e le proprietà del componente Spreadsheet dovranno essere settati come abbiamo visto la scorsa volta, se hai dubbi recuperalo. Brevemente vi ricordo che bisogna caricare come asset il file Json scaricato dal nostro account di servizio, aggiungere come collaboratore del file su drive la mail generata sempre dal nostro account di servizio, riportare l'ID del foglio di lavoro e il nome del foglio da cui prelevare i dati.

Una volta finito con le  impostazioni il codice è molto semplice, io vi consiglio di mettere sotto il blocco di inizializzazione la lettura del file call ReadSheet ( tra i blocchi Spreadsheet ) perché ho visto che mi ha dato un po' di problemi usandolo in concomitanza con il prossimo blocco. Evidentemente c'è bisogno di un tempo tecnico per la lettura che non fa partire correttamente il blocco successivo. In ChartData invece andremo a prelevare il blocco ImportFromSpreadsheet per selezionare i dati e passarli al componente Chart che li disegnerà. X e Y column richiedono il nome usato nel foglio per le varie colonne.

Se vogliamo evitare collegamenti esterni o lavorare off line possiamo anche salvare il nostro file di lavoro e caricarlo come asset, se lavoriamo con google l'operazione è molto semplice salvando da File --> Scarica --> Valori separati da virgola che ci permette di avere un file in formato CSV correttamente formattato. Anche Excel , Blocco Note, Notepad etc  permettono il salvataggio in CSV ma facciamo attenzione che il file finale utilizzi la virgola e non il punto e virgola come separatore altrimenti non verrà letto da AppInventor. Anche il formato Json è accettato da componente che useremo.

Avremo sempre bisogno di Chart e ChartData ma questa volta aggiungeremo anche DataFile dalla sezione Storage, una volta inserito dalle proprietà andremo a selezionare il nostro file CSV direttamente come SourceFile.  

Per la parte di codice invece tra i blocchi di ChartData call ImportFromDataFile ci permette di prelevare i dati direttamente dal componente DataFile che è deputato alla lettura del file CSV. In questo caso l'ho collegato ad button e bisogna specificare il componente DataFile e il nome delle colonne. Molto semplice. 

 In alternativa possiamo usare anche un altro metodo, il componente DataFile è uno di quelli definiti Non visibili, li troviamo elencati sotto il disegno dello smartphone, possiamo letteralmente trascinare il componente DataFile nel disegno , nell'area occupata dalla preview del grafico , precisamente all'interno come se volessimo aggiungerlo al grafico. In automatico verranno creati due ChartData contenenti i dati delle due colonne. A questo punto abbiamo due opzioni : 1) lasciare entrambi i componenti sapendo che un asse sarà riempito con i dati del foglio e l'altro asse con numeri sequenziali da zero a lunghezza dei dati 2) eliminare uno dei componenti e in quello presente selezionare da proprietà il nome della colonna X e colonna Y , generando le coordinate dei punti. 

E' possibile modificare il colore dei dati, lo stile del grafico e il nome dell'etichetta.

Veramente tutto molto carino e tu cosa ne pensi ?

Alla Prossima.

Raffaele

 Se hai apprezzato il mio lavoro offrimi un bel caffè 😍