Charts con TMS Web Core para Visual Studio Code

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.

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:

<span class="token keyword">asm</span>

  <span class="token comment">//todo el código que quieras en java script</span>

<span class="token keyword">end</span><span class="token punctuation">;</span>

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:

procedure TForm1<span class="token punctuation">.</span>LoadChart<span class="token punctuation">;</span>
<span class="token keyword">var</span>
  arrayValues<span class="token punctuation">:</span> TJSArray<span class="token punctuation">;</span>
  arrayCategories<span class="token punctuation">:</span> TJSArray<span class="token punctuation">;</span>
  strType<span class="token punctuation">,</span> strData<span class="token punctuation">:</span> string<span class="token punctuation">;</span>
  intItem<span class="token punctuation">:</span> Integer<span class="token punctuation">;</span>
begin
  arrayValues <span class="token punctuation">:</span><span class="token operator">=</span> TJSArray<span class="token punctuation">.</span><span class="token keyword">new</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  arrayCategories <span class="token punctuation">:</span><span class="token operator">=</span> TJSArray<span class="token punctuation">.</span><span class="token keyword">new</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  strType <span class="token punctuation">:</span><span class="token operator">=</span> cbChartType<span class="token punctuation">.</span>Text<span class="token punctuation">;</span>

  <span class="token keyword">for</span> strData <span class="token keyword">in</span> lbData<span class="token punctuation">.</span>Items <span class="token keyword">do</span>
    begin
      arrayCategories<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">copy</span><span class="token punctuation">(</span>strData<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token function">Pos</span><span class="token punctuation">(</span><span class="token string">'-'</span><span class="token punctuation">,</span> strData<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      arrayValues<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">copy</span><span class="token punctuation">(</span>strData<span class="token punctuation">,</span> <span class="token function">Pos</span><span class="token punctuation">(</span><span class="token string">'-'</span><span class="token punctuation">,</span> strData<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token function">Length</span><span class="token punctuation">(</span>strData<span class="token punctuation">)</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>      
    end<span class="token punctuation">;</span>

  asm
   <span class="token keyword">var</span> options <span class="token operator">=</span> <span class="token punctuation">{</span>
        chart<span class="token punctuation">:</span> <span class="token punctuation">{</span>
          type<span class="token punctuation">:</span> strType<span class="token punctuation">,</span>
          width<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span>
          heigth<span class="token punctuation">:</span> <span class="token number">400</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        series<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
          name<span class="token punctuation">:</span> <span class="token string">'Ciudades y Valores'</span><span class="token punctuation">,</span>
          data<span class="token punctuation">:</span> arrayValues
        <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        xaxis<span class="token punctuation">:</span> <span class="token punctuation">{</span>
          categories<span class="token punctuation">:</span> arrayCategories
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ApexCharts</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'chartdiv'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span>
    chart<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 end<span class="token punctuation">;</span>
end<span class="token punctuation">;</span>

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.

Comments

Javier Tarí says

octubre 31, 2020 at 23:52

Excelente post, Amador
Claro y simple, haciéndolo todo fácil: igual que en el curso de TMS Web Core para VSCode

Responder
- Amador López says
  
  noviembre 2, 2020 at 08:39
  
  Gracias Javier, espero haber ayudado un poco, la verdad que hay un mundo de posibilidades 🙂
  
  Responder

Contextualizando