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:

Chart con TMS Web Core para VS Code

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.

Proyecto TMS Web Core Chart

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:

asm

  //todo el código que quieras en java script

end;

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:

Java Script en Object Pascal

procedure TForm1.LoadChart;
var
  arrayValues: TJSArray;
  arrayCategories: TJSArray;
  strType, strData: string;
  intItem: Integer;
begin
  arrayValues := TJSArray.new();
  arrayCategories := TJSArray.new();
  strType := cbChartType.Text;

  for strData in lbData.Items do
    begin
      arrayCategories.push(copy(strData, 0, Pos('-', strData) -1).Trim());
      arrayValues.push(copy(strData, Pos('-', strData) + 1, Length(strData)-1).Trim());      
    end;

  asm
   var options = {
        chart: {
          type: strType,
          width: 400,
          heigth: 400
        },
        series: [{
          name: 'Ciudades y Valores',
          data: arrayValues
        }],
        xaxis: {
          categories: arrayCategories
        }
      };
    var chart = new ApexCharts(document.getElementById('chartdiv'), options);
    chart.render();
 end;
end;

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.

Acerca de Amador López

Análisis y desarrollo de Software desde hace más de 15 años.
Desde Delphi 5 hasta Embarcadero Delphi 10.4. TypeScript y Python como lenguajes añadidos desde hace más de 3 años.
Gestor y Administrador de Bases de Datos, con más de 15 años de experiencia en SQL Server y cambiando ahora a PostgreSQL.

Reader Interactions

Comments

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad

Responsable: ABATIC SOLUCIONES TECNOLOGICAS SLU
Finalidad: gestionar los comentarios.
Legitimación: tu consentimiento.
Destinatarios: los datos que me facilitas estarán ubicados en los servidores de Nicalia dentro de la UE. Ver política de privacidad de Nicalia.
Derechos: podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar, suprimir, portabilidad y olvido de tus datos.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies