Gráfico no Power Apps 📊

This content originally appeared on DEV Community and was authored by Ana Andrade Gonsalves

Muitas vezes precisamos representar dados de forma visual dentro de um aplicativo no Power Apps, mas nativamente a plataforma não oferece gráficos muito avançados.

Uma solução prática é utilizar o serviço QuickChart, que gera imagens de gráficos a partir de URLs configuradas.

="https://quickchart.io/chart?c=" & EncodeUrl("{
type: 'doughnut',
data: {
datasets: [
{
data: [" & Left(varChartData, Len(varChartData) - 1) & "],
backgroundColor: [
'#215570',
'#1B6B78',
'#4C90A6',
'#2D3847',
'#F4F8FA',
'#FFFFFF'
],
borderColor: '#FFFFFF',
borderWidth: 0,
hoverBorderWidth: 0,
borderRadius: 100
}
],
labels: [" & Left(varChartLabels, Len(varChartLabels) - 1) & "]
},
options: {
responsive: true,
title: {
display: true,
text: 'Status dos pedidos',
position: 'top',
fontSize: 16,
fontFamily: 'Poppins,Poppins Light,Poppins-Bold,Poppins-ExtraBold,sans-serif',
fontColor: '#2D3847',
fontStyle: 'bold',
padding: 10,
lineHeight: 1.9
},
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: function (context) {
let label = context.label || '';
let value = context.raw || 0;
return${label}: ${value};
}
}
},
datalabels: {
display: true,
align: 'center',
anchor: 'center',
backgroundColor: '#F4F8FA',
borderColor: '#2D3847',
borderRadius: 5,
borderWidth: 1,
padding: 4,
color: '#215570',
font: {
family: 'Poppins,Poppins Light,Poppins-Bold,Poppins-ExtraBold,sans-serif',
size: 12,
style: 'bold'
}
}
},
cutout: '60%',
rotation: 0.1,
circumference: 6.283185307179586
}
}")

Dados

1. Agrupando os pedidos por STATUS

ClearCollect(
colStatusSummary,
AddColumns(
GroupBy(
colPedidos,
STATUS,
GrupoStatus
),
CountStatus,
CountRows(GrupoStatus)
)
);

GroupBy(colPedidos, STATUS, GrupoStatus) → agrupa todos os registros de colPedidos por status.

AddColumns(…, CountStatus, CountRows(GrupoStatus)) → adiciona uma coluna CountStatus com a contagem de registros de cada grupo.

1. Criando a string com os valores
   Set(
varChartData,
Concat(
colStatusSummary,
CountStatus & ","
)
);

2. Criando a string com os labels
   Set(
varChartLabels,
Concat(
colStatusSummary,
"'" & STATUS & "',"
)
);

Paleta de cores

Dica final

Você pode alterar o tipo de gráfico (bar, line, pie, doughnut, etc.) e brincar com os parâmetros do JSON.
Mais exemplos podem ser encontrados na documentação oficial do QuickChart
.

This content originally appeared on DEV Community and was authored by Ana Andrade Gonsalves