Gráfico sin Power Apps

Muchas veces necesitamos representar datos de forma visual dentro de aplicaciones creadas con Power Apps, pero de forma nativa la plataforma no ofrece gráficos muy avanzados. Una solución práctica, ligera y gratuita es aprovechar QuickChart, un servicio que genera imágenes de gráficos a partir de una URL configurable que podemos construir dinámicamente en la propia app.

La idea es simple colocar un control de imagen y establecer su propiedad Image con una URL base de QuickChart más un JSON de configuración codificado. Un ejemplo de gráfico tipo doughnut con etiquetas, estilo y data labels personalizados sería el siguiente, listo para pegar en Power Apps como una sola fórmula: ="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: 'Estado de los 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) { var label = context.label || ''; var 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 }")

Cómo preparar los datos en Power Apps para alimentar el gráfico Primero agrupa los pedidos por STATUS y genera un resumen con la cantidad por estado usando ClearCollect colStatusSummary AddColumns GroupBy y CountRows. Ejemplo directo para la propiedad OnVisible de la pantalla o en el arranque de la app ClearCollect( colStatusSummary, AddColumns( GroupBy( colPedidos, STATUS, GrupoStatus ), CountStatus, CountRows( GrupoStatus ) ) ); Esto agrupa todos los registros de colPedidos por STATUS en la columna GrupoStatus y añade la columna CountStatus con la cantidad de registros por cada grupo.

Ahora crea la cadena con los valores numéricos que irá en data del dataset Set( varChartData, Concat( colStatusSummary, CountStatus & "," ) );

Después crea la cadena con las etiquetas que irá en labels Set( varChartLabels, Concat( colStatusSummary, ' & STATUS & '," ) ); Observa que al final de cada concatenación dejamos una coma y luego en la URL del gráfico la retiramos con Left para evitar una coma sobrante.

Paleta de colores recomendada para un diseño profesional puedes usar estos hexadecimales en backgroundColor del dataset 215570 1B6B78 4C90A6 2D3847 F4F8FA FFFFFF. Ajusta borderColor y color de datalabels para lograr contraste accesible.

Trucos rápidos de configuración en QuickChart cambia el tipo de gráfico con type bar line pie doughnut entre otros activa o desactiva leyenda en plugins.legend.display usa cutout para el tamaño del anillo en doughnut personaliza tooltips y datalabels para mostrar valores y proporciones y no olvides envolver todo el JSON con EncodeUrl para evitar caracteres conflictivos.

En Q2BSTUDIO somos una empresa de desarrollo de software que crea aplicaciones a medida y software a medida con enfoque en rendimiento, seguridad y escalabilidad. Integramos dashboards e informes con Power Apps, Power Automate y Power BI para impulsar servicios inteligencia de negocio y toma de decisiones basada en datos. Si quieres llevar tus soluciones al siguiente nivel, conoce nuestros servicios de inteligencia de negocio y power bi y cómo conectamos datos de múltiples orígenes para generar valor real.

Nuestro equipo también es especialista en inteligencia artificial e ia para empresas, creación de agentes IA, ciberseguridad y servicios cloud aws y azure. Podemos orquestar pipelines de datos, asegurar tus aplicaciones con buenas prácticas y pentesting, y desplegar soluciones modernas en la nube. Descubre cómo construimos experiencias digitales end to end con aplicaciones a medida y software a medida y potencia tu negocio con tecnología aplicada.

Conclusión con QuickChart + Power Apps puedes tener gráficos flexibles y bonitos sin controles premium, manteniendo una implementación simple mediante una URL. Ajusta la configuración JSON, alimenta tus labels y valores con colecciones y concatena todo desde Power Apps. Si necesitas ayuda para integrar analítica avanzada, automatización, agentes IA o proteger tu stack con ciberseguridad, Q2BSTUDIO puede acompañarte en todo el ciclo con servicios cloud aws y azure, inteligencia artificial aplicada y business intelligence con power bi.