Cómo crear gráficas en HTML

Por Felipe

Publicado en:

Es interesante representar los datos de forma visual para facilitar una mejor comprensión por parte de los usuarios. Las gráficas son elementos que ayudan a romper la barrera que existe cuando se muestran valores numéricos, lo que hace mucho más sencillo ver tendencias, porcentajes, máximos y mínimos…

Las gráficas en HTML son un elemento que puede implementarse en una web para hacer los datos más accesibles, a la vez que hacen al sitio mucho más atractivo para el usuario.

A continuación, veremos cómo se pueden crear e insertar gráficas en una página web, blog o eCommerce, utilizando para ello el lenguaje de marcado HTML.

 

Cómo puedes crear gráficas en HTML para tu web

Para insertar gráficos en una web es necesario incluir el código HTML de la misma, bien en una entrada, página o lugar indicado.

Veamos varias formas de incluir gráficas HTML en un sitio web:

 

Insertar gráficos con Canvas

La etiqueta canvas en HTML permite dibujar gráficas, realizar animaciones y manipular imágenes en una web. Se utiliza normalmente junto a una serie de comandos de JavaScript, y es una de las formas más sencillas de utilizar HTML para crear gráficas.

Canvas fue introducido inicialmente por Apple, y hoy en día es compatible con la mayoría de navegadores web como Safari, Google Chrome, Microsoft Edge o Mozilla Firefox, entre otros.

Con la etiqueta canvas se define un marco donde se introduce la gráfica. Por defecto, el tamaño de este espacio es de 300 x 150 píxeles, y puede personalizarse utilizando los atributos width (para el ancho) y height (para el alto).

Veamos un ejemplo para insertar una gráfica HTML con canvas y JavaScript:

  <head>

    <meta charset=”utf-8″/>

    <title>Prueba de gráfica HTML con Canvas y JavaScript</title>

    <script>

      function draw() {

        var canvas = document.getElementById(‘prueba’);

        if (canvas.getContext) {

          var ctx = canvas.getContext(‘2d’); } }

    </script>

    <style>

      canvas { border: 1px solid black; }

    </style>

  </head>

  <body onload=”draw();”>

    <canvas id=”pruebadegráficaHTML” width=”150″ height=”150″></canvas>

  </body>

En este ejemplo podemos apreciar cómo definimos el script de JavaScript en el encabezado o <head> del HTML y cómo posteriormente lo insertamos en el <body> mediante la etiqueta <canvas> para mostrar la gráfica. En el encabezado también aplicamos código CSS para personalizar el aspecto visual del cuadro donde insertamos el gráfico.

 

Insertar gráficos con Chart.js

Una de las mejores maneras de utilizar gráficas en una web es con la librería de código abierto de JavaScript Chart.js, ya que puede implementarse de forma sencilla con canvas de HTML. Insertando el script de Chart.js en el HTML de una página se podrá utilizar toda la capacidad de esta librería para crear diferentes tipos de gráficas, e incluso implementar gráficas animadas.

Para insertar esta librería en HTML hay que incluir en la cabecera el siguiente código:

<script src=”js/Chart.bundle.js”></script>

Posteriormente, se añade dentro del <body>, el cuadro donde se insertará la gráfica con la etiqueta <canvas>. Finalmente, se añadirá una llamada Chart.js mediante la etiqueta <script> después del cierre de la etiqueta <body> para dibujar la gráfica deseada, seleccionando el tipo de gráfico a mostrar y proporcionando los correspondientes datos numéricos.

 

Insertar gráficos en WordPress

El procedimiento de insertar gráficos en una web WordPress es más sencillo utilizando un plugin específico ya que no es necesario tener conocimiento de HTML y CSS. Con este tipo de complementos solo hay que seleccionar el tipo de gráfica e introducir los valores numéricos a representar para que el propio plugin se encargue de generar el código necesario HTML para poder insertar el gráfico.

Entre los diferentes plugins de gráficas de WordPress podemos destacar:

  • WordPress Charts. Facilita el proceso de creación de gráficas estadísticas en HTML5. Se puede elegir entre seis tipos diferentes (barras, líneas, radar, anillo, área polar y circular). Este complemento utiliza la librería de código abierto Chart.js.
  • amCharts. Un plugin para generar el código HTML necesario para insertar en una página y mostrar gráficos.
  • Infogram. Este complemento es el ideal para crear infografías y gráficos HTML en WordPress. En apenas unos clics se podrá crear una gráfica a partir de una serie de datos, e incrustarla directamente en la web. Además, cuenta con diferentes plantillas que facilita el proceso de creación.

 

Crear gráficas en HTML es una forma de dotar de mayor atractivo e interés a un sitio web, a la vez que se facilita a los usuarios la comprensión de una serie de datos numéricos. Para insertar un gráfico en una web la mejor solución es apostar por un plugin de WordPress en caso de utilizar este CMS, pues no será necesario lidiar con código HTML5 y JavaScript, y se podrán crear diferentes tipos de gráficas en muy poco tiempo.

Combinando código HTML y CSS con librerías de JavaScript como uvCharts o Chart.js se pueden insertar una amplia variedad de gráficas en una web y personalizar su aspecto visual como su colores, tamaños o tipos.