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

Print Share Comment Cite Upload Translate Updates

APA

Ana Andrade Gonsalves | Sciencx (2025-09-01T00:14:42+00:00) Gráfico no Power Apps 📊. Retrieved from https://www.scien.cx/2025/09/01/grafico-no-power-apps-%f0%9f%93%8a/

MLA

" » Gráfico no Power Apps 📊." Ana Andrade Gonsalves | Sciencx - Monday September 1, 2025, https://www.scien.cx/2025/09/01/grafico-no-power-apps-%f0%9f%93%8a/

HARVARD

Ana Andrade Gonsalves | Sciencx Monday September 1, 2025 » Gráfico no Power Apps 📊., viewed ,<https://www.scien.cx/2025/09/01/grafico-no-power-apps-%f0%9f%93%8a/>

VANCOUVER

Ana Andrade Gonsalves | Sciencx - » Gráfico no Power Apps 📊. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/09/01/grafico-no-power-apps-%f0%9f%93%8a/

CHICAGO

" » Gráfico no Power Apps 📊." Ana Andrade Gonsalves | Sciencx - Accessed . https://www.scien.cx/2025/09/01/grafico-no-power-apps-%f0%9f%93%8a/

IEEE

" » Gráfico no Power Apps 📊." Ana Andrade Gonsalves | Sciencx [Online]. Available: https://www.scien.cx/2025/09/01/grafico-no-power-apps-%f0%9f%93%8a/. [Accessed: ]

rf:citation

» Gráfico no Power Apps 📊 | Ana Andrade Gonsalves | Sciencx | https://www.scien.cx/2025/09/01/grafico-no-power-apps-%f0%9f%93%8a/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.