Átomo Expositivo: Gráficas

Este átomo de Bloom es útil para mostrar de manera atractiva y visual información que pueda ser relevante en el proceso de aprendizaje. Mediante la integración de la librería de visualización de datos Chart.js, Bloom ofrece gráficas con un alto grado de interactividad.



Cada átomo de gráficas cuenta con un modelo de datos con la posibilidad de ajustarse y extenderse. A continuación veamos el markup de los diferentes casos.

Las partículas son los atributos del átomo, es decir, las configuraciones disponibles que se pueden personalizar dependiendo del ejercicio que desees realizar. En este caso el átomo - Chart: permite agregar y configurar diferentes tipos de gráficos.

Las partículas height: y width: permiten establecer una proporción del gráfico que se mantendrá en la visualización de manera independiente al tamaño de pantalla.

Todos los átomos - Chart: tienen un comportamiento compatible con diferentes pantallas, incluyendo dispositivos móviles, tabletas y celulares, por lo que el tamaño real se ajustará a cada pantalla, de manera responsiva.

- Chart:
    height: 100
    width: 200
    type: line
    data:
      labels:
      - Enero
      - Febrero
      - Marzo
      - Abril
      - Mayo
      - Junio
      - Julio
      datasets:
      - label: Conjunto de Datos 1
        data: [65, 59, 80, 81, 56, 55, 40]
        fill: false,
        borderColor: "#8763E0"
        tension: 0.1

En el ejemplo de Gráfico de Líneas, el elemento type: permite definir el tipo de visualización, y puede tener diversos valores dependiendo del tipo de gráfica.

La partícula data: establece los elementos de datos a mostrar. En el caso particular del gráfico de línea, data contiene dos secciones, llamadas labels: y datasets: en donde es posible configurar las etiquetas y los valores de datos respectivamente.

Dentro del elemento datasets: se tiene un arreglo de información compuesta por las siguientes partículas:

Etiqueta de la serie de datos: label:, que contiene un elemento de texto con el nombre de la serie de datos.
Datos asociados a la serie: data:, contiene un arreglo entre paréntesis cuadrados y separados por coma con los datos numéricos de la serie en orden.
Si el gráfico cuenta o no con un relleno de área (color): fill: permite configurar las características de relleno de áreas.
Color de la línea (o borde): borderColor: define un código de color (en formatos hex o RGB) para el trazo de la línea.
Tension o curvatura: tension: establece un parámetro de curvatura de la línea, 0 siendo sin curvatura y 0.5 con un valor máximo de curvatura

Para la configuración avanzada de gráficas, consulta la referencia de Chart.js disponible en esta liga.

- Chart:
    height: 100
    width: 200
    type: bar
    data:
      labels:
      - Naranja
      - Verde
      - Morado
      - Amarillo
      - Rosa
      datasets: 
      - label: "# de Votos"
        data:
        - 10
        - 19
        - 3
        - 5
        - 2
        backgroundColor:
        - "#FFE2DC"
        - "#AFE2C8"
        - "#AFABF4"
        - "#F9CA87"
        - "#FFBBD5"
    options:
      plugins:
        legend: 
          display: false
      scales:
        y:
          beginAtZero: true

La partícula data: establece los elementos de datos a mostrar. En el caso particular del gráfico de barras, data contiene dos secciones, llamadas labels: y datasets: en donde es posible configurar las etiquetas y los valores de datos respectivamente.

Dentro del elemento datasets: se tiene un arreglo de información compuesta por las siguientes partículas:

Etiqueta de la serie de datos: label:, que contiene un elemento de texto con el nombre de la serie de datos.
Datos asociados a la serie: data:, contiene un arreglo entre paréntesis cuadrados y separados por coma con los datos numéricos de la serie en orden.
Color del elemento: backgroundColor: define una lista con los códigos de color (en formatos hex o RGB) para el trazo de cada barra.
El elemento options: contiene una configuración avanzada para desplegar ejes y ocultar un texto informativo `legend:``

Para la configuración avanzada de gráficas, consulta la referencia de Chart.js disponible en esta liga.

- Chart:
    height: 100
    width: 100
    type: pie
    data:
      labels:
      - Rojo
      - Amarillo
      - Verde
      datasets:
      - label: Serie de Datos 1
        data: [300, 50, 100]
        backgroundColor:
        - "#D84634"
        - "#F9BD55"
        - "#65A587"
        hoverOffset: 4

La partícula data: establece los elementos de datos a mostrar. En el caso particular del diagrama de pie, data: contiene dos secciones, llamadas labels: y datasets: en donde es posible configurar las etiquetas y los valores de datos respectivamente.

Dentro del elemento datasets: se tiene un arreglo de información compuesta por las siguientes partículas:

Etiqueta de la serie de datos: label:, que contiene un elemento de texto con el nombre de la serie de datos.
Datos asociados a la serie: data:, contiene un arreglo entre paréntesis cuadrados y separados por coma con los datos numéricos de la serie en orden.
Color del elemento: backgroundColor: define una lista con los códigos de color (en formatos hex o RGB) para el trazo de cada barra.

Diagrama de Dona

- Chart:
    height: 100
    width: 100
    type: doughnut
    data:
      labels:
      - Rojo
      - Amarillo
      - Verde
      datasets:
      - label: Serie de Datos 1
        data: [300, 50, 100]
        backgroundColor:
        - "#D84634"
        - "#F9BD55"
        - "#65A587"
        hoverOffset: 4

La partícula data: establece los elementos de datos a mostrar. En el caso particular del diagrama de dona, data: contiene dos secciones, llamadas labels: y datasets: en donde es posible configurar las etiquetas y los valores de datos respectivamente.

Dentro del elemento datasets: se tiene un arreglo de información compuesta por las siguientes partículas:

Etiqueta de la serie de datos: label:, que contiene un elemento de texto con el nombre de la serie de datos.
Datos asociados a la serie: data:, contiene un arreglo entre paréntesis cuadrados y separados por coma con los datos numéricos de la serie en orden.
Color del elemento: backgroundColor: define una lista con los códigos de color (en formatos hex o RGB) para el trazo de cada barra.
El elemento options: contiene una configuración avanzada para desplegar los ejes verticales.

Área Polar

- Chart:
    height: 200
    width: 200
    type: polarArea
    data:
      labels:
      - Amarillo
      - Verde
      - Morado
      - Naranja
      - Rosa
      datasets:
      - label: Serie de Datos 1
        data: [11, 16, 7, 3, 14]
        backgroundColor: 
        - "#F9BD55"
        - "#65A587"
        - "#8763E0"
        - "#EF7045"

La partícula data: establece los elementos de datos a mostrar. En el caso particular del diagrama de área polar, data: contiene dos secciones, llamadas labels: y datasets: en donde es posible configurar las etiquetas y los valores de datos respectivamente.

Dentro del elemento datasets: se tiene un arreglo de información compuesta por las siguientes partículas:

Etiqueta de la serie de datos: label:, que contiene un elemento de texto con el nombre de la serie de datos.
Datos asociados a la serie: data:, contiene un arreglo entre paréntesis cuadrados y separados por coma con los datos numéricos de la serie en orden.
Si el gráfico cuenta o no con un relleno de área (color): fill: permite configurar las características de relleno de áreas.
Color de la línea (o borde): borderColor: define un código de color (en formatos hex o RGB) para el trazo de la línea.

- Chart:
    height: 200
    width: 200
    type: radar
    data:
      labels:
      - Comer
      - Beber
      - Dormir
      - Diseñar
      - Programar
      - Leer
      - Correr
      datasets:
      - label: Serie de Datos 1
        data: [65, 59, 90, 81, 56, 55, 40]
        fill: true
        backgroundColor: "#EF704560"
        borderColor: "#EF7045"
      - label: Serie de Datos 2
        data: [28, 48, 40, 19, 96, 27, 100]
        fill: true
        backgroundColor: "#65A58760"
        borderColor: "#65A587"
    options:
      elements:
        lines:
          borderWidth: 3

La partícula data: establece los elementos de datos a mostrar. En el caso particular del gráfico de radar, data contiene dos secciones, llamadas labels: y datasets: en donde es posible configurar las etiquetas y los valores de datos respectivamente.

Dentro del elemento datasets: se tiene un arreglo de información compuesta por las siguientes partículas:

Etiqueta de la serie de datos: label:, que contiene una lista con las dimensiones a mostrar en el diagrama de radar.
Datos asociados a la serie: data:, contiene un arreglo entre paréntesis cuadrados y separados por coma con los datos numéricos de la serie en orden.
Si el gráfico cuenta o no con un relleno de área (color): fill: permite configurar las características de relleno de áreas.
Color del relleno: backgroundColor: define un código de color para el relleno del área (en formatos hex o RGBA) para el trazo de la línea. Es recomendable configurar este color como transparente si se utiliza.
Color de la línea : borderColor: define un código de color (en formatos hex o RGB) para el trazo de la línea.
El elemento options: contiene una configuración avanzada para desplegar los ejes verticales.

Gráfico de Dispersión

- Chart:
    height: 100
    width: 200
    type: scatter
    data:
      datasets:
      - data:
        - x: -10
          y: 0
        - x: 0
          y: 10
        - x: 10
          y: 5
        - x: 0.5
          y: 5.5
        backgroundColor: "#8763E0"
        radius: 10
    options:
      plugins:
        legend:
          display: false
      scales:
        x:
          type: linear

La partícula data: establece los elementos de datos a mostrar. En el caso particular del gráfico de dispersión, data: contiene sólo la sección de datasets: en donde es posible configurar los valores de los datos.

Un gráfico de dispersión permite mostrar dos dimensiones simultáneamente, con los valores x:, y:, que representan la posición horizontal y vertical de cada elemento. Es una manera vaiiosa en la que se puede representar la correlación entre dos valores que pueden estar interconectados.

Dentro del elemento data: se tiene un arreglo de información compuesta por las componentes x: y y:. Es importante mantener la estructura para que cada elemento inicie con el símbolo - indicando cada componente de coordenadas en la lista.

Color del relleno: backgroundColor: establece el código de color de la serie de datos y se aplica a todos los elementos.
Radio del elemento: radius: establece el radio o tamaño de los elementos de la serie, y se aplica a todos los elementos.
El elemento options: contiene una configuración avanzada para desplegar los ejes verticales.

Gráfico de Burbujas

- Chart:
    height: 100
    width: 200
    type: bubble
    data:
      datasets:
      - label: Serie de Datos 1
        data:
        - x: 20
          y: 30
          r: 15
        - x: 15
          y: 15
          r: 10
        - x: 17
          y: 22
          r: 5
        - x: 10
          y: 24
          r: 40
        backgroundColor:
        - "#65A587"
        - "#8763E0"
        - "#EF7045"
        - "#F78BB4"
        borderWidth: 1
    options:
      plugins:
        legend:
          display: false
      scales:
        y:
          beginAtZero: true

La partícula data: establece los elementos de datos a mostrar. En el caso particular del gráfico de burbujas, data contiene una sección llamada datasets: en donde es posible configurar las etiquetas y los valores de datos respectivamente.

Un gráfico de burbujas permite mostrar hasta cuatro dimensiones, con los valores x:, y: y r:, que representan la posición horizontal, vertical y el radio o tamaño de la burbuja de datos, además del color de cada burbuja.

Dentro del elemento data: se tiene un arreglo de información compuesta por las componentes x:, y: y r:. Es importante mantener la estructura para que cada elemento inicie con el símbolo - indicando cada componente de coordenadas en la lista.

Color del relleno: backgroundColor: incluye una lista con los colores de cada burbuja, en un código RGB o Hex.
El elemento options: contiene una configuración avanzada para desplegar los ejes verticales.

Actualizado el: 30/08/2022