• Saltar a la navegación principal
  • Saltar al contenido principal

Dani Sánchez - Gestionatuweb

Desarrollador web freelance

  • Quién soy
  • ¿Eres agencia?
  • WordPress
    • Mantenimiento WordPress
    • Desarrollo WordPress
    • Soporte técnico WordPress
  • Cursos
  • Blog
  • Portfolio
  • Solicita Presupuesto

Crear gráficas en JavaScript con Highcharts

El 21 de abril de 2021 por dani Deja un comentario

Advertencia: Esta entrada contiene códigos o snippets que podrían no funcionar correctamente en tu instalación de WordPress, o podrían ser incompatibles con tu theme o plugins activos. Úsalos bajo tu responsabilidad, preferiblemente en un entorno de desarrollo y haz siempre copias de tus archivos antes de modificarlos.

Highcharts es una potente librería para generar gráficas en JavaScript, ya sean gráficas sencillas o todo lo complejas que necesitemos.

Para usarla solo tenemos que llamarla a través de su CDN:

<script src="https://code.highcharts.com/highcharts.js"></script>

También está disponible en los repositovios NPM o descargándola directamente en code.hightcharts.com para el caso en que necesites una versión concreta.

Para el ejemplo vamos a invocarla desde su CDN.

Crearemos un archivo index.html al que añadiremos:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <title>Gráficas con Highcharts</title>

</head>
<body>

    <div id="temperaturas"></div>

</body>
</html>

Lo único que hemos hecho es definir el DIV que contendrá la gráfica.

Este ejemplo va a ser muy sencillo ya que vamos a disponer de los valores del eje vertical y horizontal previamente definidos.

Estos valores representarán las temperaturas de los días de la semana de la siguiente forma:

  • Lunes: 10
  • Martes: 12
  • Miércoles: 9
  • Jueves: 11
  • Viernes: 10
  • Sábado: 15
  • Domingo: 16

Justo debajo del DIV de temperaturas vamos a crear el script que genere la gráfica con estos valores:

<div id="temperaturas"></div>
<script>
    /*Insertamos los valores del eje vertical en un array*/
    var temperaturas = [10,12,9,11,10,15,16];

    /*CONSTRUCCIÓN DE LA GRÁFICA*/
    Highcharts.chart('temperaturas', {
        title: {
           text: 'Temperaturas Cº'
        },
        xAxis: {
           categories : ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo']
        },
        series: [{
           name: 'Temperatura',
           data: (function(){
              var data = [];
              for(var i=0; i < temperaturas.length; i++){
                  data.push([temperaturas[i]]);
              }
              return data;
           })()
        }],
        credits: {
            enabled: false
        }
    });                 
</script>

Si ejecutamos la página deberemos tener una gráfica como esta:

Analizando el código…

Primero hemos guardado los valores de temparatura (el eje vertical) en un array de forma que posterioremente podamos recorrerlos de forma sencilla a través de un bucle:

var temperaturas = [10,12,9,11,10,15,16];

A continuación llamamos a Highcharts.chart (método que ya está integrado en la librería) para construir un JSON que contendrá los datos y valores a mostrar en la gráfica:

Highcharts.chart('temperaturas', {

Donde «temperaturas» hace referencia al identificador (ID) del DIV donde se mostrará la gráfica.

title: {
    text: 'Temperaturas Cº'
},

Es el título que aparecerá en el encabezado de la gráfica:

xAxis: {
    categories : ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo']
},

Son los valores de eje horizontal.

series: [{
    name: 'Temperatura',
    data: (function(){
       var data = [];
       for(var i=0; i < temperaturas.length; i++){
           data.push([temperaturas[i]]);
       }
       return data;
    })()
}],

Esta función es algo más compleja, el primer parámetro name indica el nombre de los valores del eje vertical, en este caso «Temperatura»:

name: 'Temperatura',

Después creamos el data donde recorreremos el array de temperaturas para asignar cada valor a su posición correspondiente en la gráfica.

data: (function(){
   var data = [];
   for(var i=0; i < temperaturas.length; i++){
       data.push([temperaturas[i]]);
   }
   return data;

Y finalmente definimos si queremos mostrar los créditos de la gráfica poniendo el valor en true o false:

credits: {
    enabled: false
}

Gráficas con valores aleatorios y línea de tiempo

Hasta aquí no hemos tenido ningún problema, ya que tenemos la misma cantidad de valores en cada eje, pero esto no siempre será así.

Puede que necesitemos construir una gráfica sin saber cuántos valores se mostrarán (porque sean dinámicos, procedentes de una base de datos, etc.). Para ello convertiremos el eje horizontal en una línea de tiempo, mientras que cada posición del eje horizontal ahora tendrá 2 valores: la temperatura y la fecha correspondiente al valor.

Además lo complicaremos un poco más añadiendo un segundo conjunto de valores a la gráfica, de forma que tengamos: temperatura exterior y temperatura interior.

Vamos a crear un nuevo archivo HTML que contendrá el siguiente código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <title>Gráficas con Highcharts</title>
</head>
<body>
    
    <div id="temperaturas"></div>
    <script>
        /*Valores del eje vertical*/
        var temperaturas_interior = [20,21,18,22,19,21,23];
        var temperaturas_exterior = [10,12,9,11,10,15,16];
        var fechas = ['01-01-2021', '10-01-2021', '20-01-2021', '30-01-2021', '10-02-2021', '20-02-2021', '28-02-2021'];
    
        /*CONSTRUCCIÓN DE LA GRÁFICA*/
        Highcharts.chart('temperaturas', {
            title: {
                text: 'Temperaturas Cº'
            },
            xAxis: {
                type: 'datetime'
            }, 
            series: [{
                name: 'Temperatura Interior',
                data: (function(){
                    var data = [];
                    for(var i=0; i < temperaturas_interior.length; i++){

                        var fecha = fechas[i];
                        var fecha_sin_guion = fecha.split("-");
                        var fecha_timestamp = new Date( fecha_sin_guion[2], fecha_sin_guion[1] - 1, fecha_sin_guion[0]);
                      
                        data.push([fecha_timestamp.getTime(), temperaturas_interior[i]]);
                    }
                    return data;
                })()
            },
            
            {
                name: 'Temperatura Exterior',
                data: (function(){
                    var data = [];
                    for(var i=0; i < temperaturas_exterior.length; i++){

                        var fecha = fechas[i];
                        var fecha_sin_guion = fecha.split("-");
                        var fecha_timestamp = new Date( fecha_sin_guion[2], fecha_sin_guion[1] - 1, fecha_sin_guion[0]);
                      
                        data.push([fecha_timestamp.getTime(), temperaturas_exterior[i]]);
                    }
                    return data;
                })() 
            }],

            credits: {
                enabled: false
            }
        });
    </script>
</body>
</html>

Esto debería generarnos una gráfica con 2 líneas de datos y una línea de tiempo en el eje horizontal:

Vamos a analizar el código. Puesto que ahora tenemos 2 series de valores en la gráfica, necesitamos 2 arrays para almacenarlos:

var temperaturas_interior = [20,21,18,22,19,21,23];
var temperaturas_exterior = [10,12,9,11,10,15,16];

Además necesitamos un tercer array para almanenar la fecha en la que hemos anotado cada valor:

var fechas = ['01-01-2021', '10-01-2021', '20-01-2021', '30-01-2021', '10-02-2021', '20-02-2021', '28-02-2021'];

En la construcción de la gráfica, vamos a empezar por los valores de temperatura interior:

/*CONSTRUCCIÓN DE LA GRÁFICA*/
        Highcharts.chart('temperaturas', {
            title: {
                text: 'Temperaturas Cº'
            },
            xAxis: {
                type: 'datetime'
            }, 
            series: [{
                name: 'Temperatura Interior',
                data: (function(){
                    var data = [];
                    for(var i=0; i < temperaturas_interior.length; i++){

                        var fecha = fechas[i];
                        var fecha_sin_guion = fecha.split("-");
                        var fecha_timestamp = new Date( fecha_sin_guion[2], fecha_sin_guion[1] - 1, fecha_sin_guion[0]);
                      
                        data.push([fecha_timestamp.getTime(), temperaturas_interior[i]]);
                    }
                    return data;
                })()
            },

La definición es igual a la primera gráfica que hicimos, solo que en este caso el eje horizontal será una línea de tiempo (no sabemos el número de posiciones):

xAxis: {
    type: 'datetime'
},

Creamos el primer data con los valores de temperatura interior:

series: [{
    name: 'Temperatura Interior',
    data: (function(){
        var data = [];
        for(var i=0; i < temperaturas_interior.length; i++){

Lo más complejo de esta parte es que necesitamos convertir nuestras fechas a formato timestamp, que es un tipo de cadena numérica incomprensible para una persona.

Para ello, en cada paso del bucle vamos a tomar la fecha (en formato humano) y la vamos a almacenar en una variable fecha:

var fecha = fechas[i];

Ahora le quitamos los guiones con metodo split (o las diagonales si tus fechas son estilo 01/12/2021):

var fecha_sin_guion = fecha.split("-");

Creamos un nuevo objeto de fecha con el siguiente formato:

var fecha_timestamp = new Date( fecha_sin_guion[2], fecha_sin_guion[1] - 1, fecha_sin_guion[0]);

Y por último lo añadimos al data, junto con su valor de temperatura correspondiente:

data.push([fecha_timestamp.getTime(), temperaturas_interior[i]]);

Después de retornar el data de temperatura interior, añadimos los registros para las temperaturas exteriores:

{
    name: 'Temperatura Exterior',
    data: (function(){
        var data = [];
        for(var i=0; i < temperaturas_exterior.length; i++){
            var fecha = fechas[i];
            var fecha_sin_guion = fecha.split("-");
            var fecha_timestamp = new Date( fecha_sin_guion[2], fecha_sin_guion[1] - 1, fecha_sin_guion[0]);
                     
            data.push([fecha_timestamp.getTime(), temperaturas_exterior[i]]);
        }
        return data;
    })() 
}

La librería se encarga automáticamente de generar colores distintos para cada línea de datos y de definir la línea de tiempo entre la primera y última fecha de los registros que insertemos.

Todo esto se puede complicar todo lo que queramos, la librería es muy completa y dispone de múltiples opciones y parámetros a definir, además de varios de tipos de gráficas (no solo lineales).

Puedes ver algunos demos y practicar en: https://www.highcharts.com/demo

Pero espero que este artículo te sirva como primera toma de contacto y te ayude a seguir profundizando y aprendiendo. Nos vemos en el siguiente post );

Archivado en: Tutoriales Etiquetado como: gráficas, highcharts, javascript

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

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

Acepto la política de privacidad

Hosting recomendado

Raiola Networks

Autor

Dani Sánchez
Dani Sánchez
@danisanchez82

Entradas recientes

  • Optimizar el archivo de configuración de WordPress (wp-config.php)
  • ¿Qué plugins tengo instalados en mi web en 2022?
  • Tu alojamiento web no es compatible con la rotación de imágenes. [Solución]
  • Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)
  • Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34

Comentarios recientes

  1. Armando en Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34
  2. Vito en Configurar en español los campos tipo fecha (date) en Ninja Forms
  3. Manel en Calcular rutas con OpenStreetMap partiendo de la geolocalización del usuario
  4. Leo en Modificar textos predefinidos de WordPress sin editar la traducción
  5. Alejo en Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)

Categorías

  • Actualidad
  • Afiliación AliExpress
  • Agent Press Pro
  • Bettaso Web Restaurantes
  • Cursos
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Iniciación a PHP
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • WordPress

Divi 20% descuento

Hosting Recomendado

Raiola Networks
Banner

Sitios web corporativos, blogs y tiendas online cuidando hasta el mínimo detalle

Si deseas proponerme un proyecto web ponte en contacto conmigo.

Contacto

Gestionatuweb © 2022 · Desarrollado con Genesis · Acceder
Política de privacidad · Política de cookies

En Gestionatuweb.net utilizamos cookies técnicas para el correcto funcionamiento del sitio. Además, utilizamos cookies para obtener datos estadísticos sobre el uso de la web, con el fin de mejorar la experiencia de navegación y conocer qué contenidos son los más consultados. Otras cookies son usadas para servicios adicionales, como conexión con redes sociales, marketing o mostrar publicidad acorde a tus gustos. Puedes desactivar todas las cookies (excepto las técnicas) pulsando en Rechazar, o elegir qué cookies admites y cuales no en el botón de Preferencias. Más información sobre las cookies que utilizamos en nuestra: Política de cookies.

Gestor de cookies:  GDPR Cookie Compliance
Resumen de uso de cookies

En Gestionatuweb.net utilizamos cookies técnicas para el correcto funcionamiento del sitio. Además, utilizamos cookies para obtener datos estadísticos sobre el uso de la web, con el fin de mejorar la experiencia de navegación y conocer qué contenidos son los más consultados. Otras cookies son usadas para servicios adicionales, como conexión con redes sociales, marketing o mostrar publicidad acorde con tus intereses. Puedes desactivar todas las cookies (excepto las técnicas) pulsando en Rechazar, o elegir qué cookies admites y cuales no en el botón de Preferencias.

Cookies técnicas (necesarias)

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies. Estas cookies son:

  • moove_gdpr_popup: Comprueba si debe mostrar o no el aviso de cookies (si ya ha sido aceptado o rechazado no se vuelve a mostrar mientras persista esta cookie). Expira en 1 año.
  • cpnb_cookiesSettings: Comprueba qué categorías de cookies se aceptan o rechazan (por ejemplo, cookies analíticas, cookies de publicidad dirigida, etc.). Expira en 1 año.
  • _GRECAPTCHA: Esta web utiliza el servicio reCAPTCHA para fortalecer la seguridad en los formularios y evitar el envío masivo de SPAM. reCAPTCHA utiliza esta cookie necesaria para realizar su análisis de riesgo. Expira en 6 meses.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de analítica

Utilizamos Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares. Dejando estas cookies activas nos permite mejorar nuestra web.

  • _ga: Analítica de Google. Se usa para distinguir a los usuarios. Expira en 2 años.
  • _gid: Se usa para distinguir a los usuarios. Expira en 24 horas.
  • _gat: Se usa para limitar el porcentaje de solicitudes. Expira en 1 minuto.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Cookies de publicidad

Utilizamos Google Adsense para mostrar publicidad en los artículos del blog acordes a tus intereses. Esta publicidad nos ayuda al mantenimiento del sitio web y del tiempo dedicado a la redacción del blog.

  • _gads: Publicidad de Google Adsense. Proporciona la publicación de anuncios de interés para el usuario. Expira en 13 meses.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies