Esta semana ha venido cargada de muchas cosas, pero hoy queremos hablar de como hacer Charts con TMS Web Core para VS Code, o lo que es lo mismo agregar gráficas chulas y vistosas para representar nuestros datos.
Contextualizando
En Telegram hay un grupo público de la comunidad de seguidores del podcast y cursos en español sobre Delphi llamado NoSoloDelphi, el otro día se abría una cuestión en el grupo «respecto a TMS Web Core, ¿vienen los componentes de gráficas y grid?» a parte de las respuestas de rigor que pudieron aportar los integrantes del grupo, me he animado a hacer un pequeño ejemplo que he subido a un repositorio de nuestro GIT de Abatic Soluciones Tecnológicas llamado TMSWebCoreChartDemo, de esta forma creo que podremos ver el verdadero potencial de la herramienta de TMS Web Core para VSCode o para Delphi.
Charts con TMS Web Core para Visual Studio Code
Ya hemos hecho algunos artículos sobre TMS Web Core para Visual Studio Code ( incluso un curso con un 40% de descuento en TMS Web Core para Visual Studio Code y para Delphi), pero aún no habíamos abordado el concepto de uso de JavaScript desde Object Pascal.
Aprovechando que el tema de las gráficas («Charts») siempre son interesantes para dar un poco de vistosidad a nuestros datos, muchas veces vale más una imagen que mil palabras y si por ejemplo hablamos de datos económicos ayuda tener gráficas como la siguiente:
Explicando el proyecto
Vamos a hacer algo muy básico, una pequeña pagina web que se encarga de facilitarnos una lista de categorías/valor para posteriormente realizar una gráfica que nos ayude a visualizar los datos.
La idea es muy simple, lo realmente importante aquí es poder ver como combinar el código que generamos con nuestro conocido Object Pascal con las librerías existentes en JavaScript y en esta ocasión vamos a usar ApexCharts, proyecto open source para generación de Charts.
La potencia en tres letras: «asm»
Solo tres letras necesitamos para combinar el uso de JavaScript desde nuestro código Object Pascal:
Como puedes ver en la imagen, cuando se quiere agregar un Chart con TMS Web Core para VSCode (en este caso), podemos combinar los objetos que nos facilita TMS Software como TJSArray (un Array JavaScript) con nuestro código pascal de toda la vida:
Pero si queremos usar una herramienta JavaScript que sabemos que funciona a las mil maravillas, solo tenemos que introducir el código necesario entre las instrucciones «asm … end» y ahí podremos combinar código JavaScript con código/variables que hemos creado con Object Pascal.
Conclusión
Como puedes ver, tanto aquí como en el código del repositorio, «el límite lo pones tú» o casi. En JavaScript hay miles de herramientas para situaciones que ni hemos imaginado y que funcionan muy bien aunque también es cierto que tendrías que filtrar la paja de lo verdaderamente bueno.
Pues la gente de TMS Software nos brinda la oportunidad no solo de usar Charts con TMS Web Core para VSCode o Delphi, también nos abre las puertas a crear combinaciones de código que nos permitan solucionar cualquier problema que podamos encontrarnos en el desarrollo web.
Desde aquí te animo a que accedas a nuestro curso de TMS Web Core para Visual Studio Code con un descuento del 40% para los componentes TMS Web Core si aún no conoces TMS Web Core para VSCode o que te pongas en contacto con nosotros si quieres que te ayudemos a realizar la migración de tu proyecto Delphi de escritorio al mundo Web.
Excelente post, Amador
Claro y simple, haciéndolo todo fácil: igual que en el curso de TMS Web Core para VSCode
Gracias Javier, espero haber ayudado un poco, la verdad que hay un mundo de posibilidades 🙂