Creare un grafico a Istogrammi in Power Apps senza il controllo Chart

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

Per la realizzazione uso una Raccolta di tipo Orizzontale che andrà successivamente personalizzata:

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à:

Per questo esempio uso come data source una tabella con tre colonne (Domanda, Punteggio, Visibile) creato tramite la funzione Table:

Power AppsCopia

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
)

Il data source va impostato nella proprietà Items e i controlli del Layout Subtitle1 e Title4 vanno assegnati ai campi Punteggio e Domanda:

a questo punto bisogna personalizzare il Layout per rimuovere l'immagine:

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:

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

prima di fare altre personalizzazione, va definita l'altezza che dovrà avere il grafico e la larghezza del modello:

Per rappresentare la barra del grafco uso un Rettangolo (Inserisci / Icone / Rettangolo):

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

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)

Imposto le proprietà del Button3:

• X=70
• Y=200
• OnSelect=Set(DomandaD2; !DomandaD2)
• Test="Toggle D2"

non mi resta che aggiornare il data source in modo che usi la variabile:

Power AppsCopia

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
)

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)