Gráfico no Power Apps 📊

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
.