Questo è un esempio di come creare un grafico a barre (istogramma) senza l'utilizzo del controllo Chart che, attualmente, risulta non compatibile con la visualizzazione web, vedi PowerApps non supporta i grafici nel Browser.

Per la realizzazione uso una Raccolta di tipo Orizzontale che andrà successivamente personalizzata:
raccolta orizzontaleraccolta orizzontale
La raccolta ha come caratteristica quella di avere un Origine dati (Data source) e un Layout (o Template). Il layout è composto da 2 label e 1 immagine. Qui si può vedere l'associazione tra immagini e proprietà:
associazioneassociazione
Per questo esempio uso come data source una tabella con tre colonne (Domanda, Punteggio, Visibile) creato tramite la funzione Table:
Filter(
	Table(
		{Domanda: "D1"; Punteggio: 1; Visibile: true};
		{Domanda: "D2"; Punteggio: 1; Visibile: true};
		{Domanda: "D3"; Punteggio: 2; Visibile: true};
		{Domanda: "D4"; Punteggio: 5; Visibile: true};
		{Domanda: "D5"; Punteggio: 3; Visibile: true};
		{Domanda: "D6"; Punteggio: 4; Visibile: true}
	);
	Visibile = true
)
La funzione Filter servirà alla fine per filtrare il data source e nascondere le colonne tramite la proprietà Visibile per ora impostata fissa a true
Il data source va impostato nella proprietà Items e i controlli del Layout Subtitle1 e Title4 vanno assegnati ai campi Punteggio e Domanda:
nuovo data sourcenuovo data source
a questo punto bisogna personalizzare il Layout per rimuovere l'immagine:
edit templateedit template
Una volta tolta l'immagine alcuni controlli possono segnalare un errore tramite un triangolino giallo. Questo perché in alcune formule assegnate alle proprietà del controllo c'è un riferimento al controllo rimosso, in questo caso Title4 proprietà Y:
posizionamento Title4posizionamento Title4
Reimposto le proprietà del controllo Title4:
  • Align=Center
  • X=10
  • Y=Parent.Height - Title4.Height -1
  • Width=Parent.TemplateWidth - Title4.X*2
  • Height=Title4.Size * 3
  • Text=ThisItem.Domanda
  • VerticalAlign=Top
Parent si riferisce al controllo contenitore, ThisItem si riferisce alla riga corrente del data source
prima di fare altre personalizzazione, va definita l'altezza che dovrà avere il grafico e la larghezza del modello:
altezza layoutaltezza layout
Per rappresentare la barra del grafco uso un Rettangolo (Inserisci / Icone / Rettangolo):
rettangolorettangolo
poi imposto le proprietà del Rectangle1 facendo in modo che l'altezza (Height) e il colore (Fill) siano legati al campo Punteggio:
  • X=10
  • Y=Parent.Height - Title4.Height - Rectangle1.Height
  • Width=Parent.TemplateWidth - Rectangle1.X*2
  • Height=Punteggio * (Parent.Height - Subtitle1.Height - Title4.Height)/5
  • Fill=ColorValue( Switch(ThisItem.Punteggio; 1; "#9dceec"; 2; "#67ace5"; 3; "#29adf8"; 4; "#0072b1"; 5; "#013e7f"; "#aaa"))
e anche quella del Subtitle1 in modo che sia posizionato sempre sopra al rettangolo:
  • Align=Center
  • X=10
  • Y=Parent.Height - Title4.Height - Rectangle1.Height
  • Width=Parent.TemplateWidth - Rectangle1.X*2
  • Height=Punteggio * (Parent.Height - Subtitle1.Height - Title4.Height)/5
  • Text=ThisItem.Domanda
  • Visible=Punteggio>0
istogramma - risultato finaleistogramma - risultato finale

Visto che nel data source avevo aggiunto una proprietà Visible posso legarla ad una variabile (DomandaD2) e controllare, ad esempio tramite un pulsante, la visibilità o meno di una colonna.
Per far questo aggiungo un pulsante (Inserisci / Pulsante)
pulsante toggle colonna D2pulsante toggle colonna D2
Imposto le proprietà del Button3:
  • X=70
  • Y=200
  • OnSelect=Set(DomandaD2; !DomandaD2)
  • Test="Toggle D2"
OnSelect è l'azione invocata quando si preme il pulsante (tipo onclick in altri linguaggi).
Set serve per impostare il valore di una variabile a livello globale, ovvero disponibile in ogni Screen e no solo in quello corrente (dove si usa UpdateContext)
non mi resta che aggiornare il data source in modo che usi la variabile:
Data source con variabileData source con variabile
Filter(
	Table(
		{Domanda: "D1"; Punteggio: 1; Visibile: true};
		{Domanda: "D2"; Punteggio: 1; Visibile: Domanda2};
		{Domanda: "D3"; Punteggio: 2; Visibile: true};
		{Domanda: "D4"; Punteggio: 5; Visibile: true};
		{Domanda: "D5"; Punteggio: 3; Visibile: true};
		{Domanda: "D6"; Punteggio: 4; Visibile: true}
	);
	Visibile = true
)
istogramma - colonna nascostaistogramma - colonna nascosta

Come ulteriore affinamento è possibile impostare la larghezza delle barre in funzione della quantità di colonne visibili in modo che si adattino alla larghezza disponibile. Si può ottenere questo risultato agendo sulla larghezza del modello:
  • TemplateSize=Gallery3.Width / CountIf(Gallery3.AllItems; Visibile=true)
istogramma - larghezza adattabileistogramma - larghezza adattabile
La funzione CountIf ritorna il numero di righe del data source (Gallery3.Width) che soddisfano la condizione (Visibile=true)
Fate attenzione che nelle impostazioni italiane, il separatore per i parametri delle funzioni è il punto e virgola (;) e non la virgola (,) come si trova negli esempi in inglese.
Altro punto di attenzione è il separatore dei comandi, quando è necessario inserirne più di uno, si usa il doppio punto e virgola (;;), ad esempio: Set(Domanda2; true);;Set(Domanda3; true)
Ultima nota non inserire mai il doppio punto e virgola alla fine delle istruzioni altrimenti genera un errore, esempio: Set(Domanda2; true);;Set(Domanda3; true);;