Comenzando Con Chart.js: Gráficas de Radar y Área Polar

() translation by (you can also view the original English article)

El tutorial anterior de esta serie se centra en crear gráficas de línea y de barra usando Chart.js. Ambas gráficas tienen sus propios usos y opciones de configuración que cubrimos a detalle en el último tutorial.

En este tutorial, aprenderás sobre dos nuevos tipos de gráfica que pueden ser creados usando Chart.js: gráficas de radar y área polar. Justo como el tutorial anterior, comenzaremos con un breve vistazo general de los tipos de gráfica y después continuaremos a una discusión más detallada.

Creando Gráficas de Radar

Las gráficas de línea y barra son útiles cuando quieres comparar solo una o dos propiedades de un número grande de objectos---por ejemplo la población de todos los países en Asia o el número de diferentes contaminantes en la atmósfera.

Digamos que quieres comparar la densidad, opacidad, viscosidad, indice de refracción y punto de ebullición de solo tres líquidos diferentes. Crear una gráfica de barra para estos datos puede ser problemático ya que necesitarás crear cinco columnas diferentes para cada líquido. También será difícil comparar las propiedades correspondientes de los líquidos.

En situaciones en donde tienes que comparar muchas propiedades de solo unos cuántos objetos, crear una gráfica de radar es el método más eficiente de visualizar y comparar información. Estas gráficas también son conocidas como gráficas de araña.

Desde Wikipedia, una gráfica de radar es un método gráfico de mostrar información multi-variable en la forma de una gráfica bi-dimensional de tres o más variables cuantitativas representadas en ejes comenzando desde el mismo punto. Las posiciones relativas y ángulos de los ejes son típicamente no informativos.

Creemos nuestra primera gráfica de radar ahora. Las gráficas de radar son creadas estableciendo la llave type en Chart.js a radar. Aquí está un ejemplo muy básico.

var radarChart = new Chart(marksCanvas, {
    type: 'radar',
    data: marksData,
    options: chartOptions
});

Tracemos las calificaciones de dos estudiantes en cinco materias diferentes. Aquí está el código para proporcionar la información para crear la gráfica.

var marksData = {
  labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],
  datasets: [{
    label: "Student A",
    backgroundColor: "rgba(200,0,0,0.2)",
    data: [65, 75, 70, 80, 60, 80]
  }, {
    label: "Student B",
    backgroundColor: "rgba(0,0,200,0.2)",
    data: [54, 65, 60, 70, 70, 75]
  }]
};

var radarChart = new Chart(marksCanvas, {
  type: 'radar',
  data: marksData
});

La primera gráfica que usualmente creamos no tiene ningún color de fondo específicamente establecido por nosotros. Sin embargo, las gráficas de radar pueden tener mucha superposición, haciendo difícil identificar correctamente los puntos de datos sin ningún código de color.

Por esta razón, un color ha sido asignado a cada conjunto de datos usando la llave backgroundColor. La siguiente demostración muestra el resultado final de nuestro código. Como puedes ver, ahora es muy sencillos comparar el desempeño de ambos estudiantes en diferentes temas.

Además del color de fondo, también puedes cambiar el color y ancho de borde de la gráfica usando las llaves borderColor y borderWidth. También es posible que crees bordes punteados en lugar de líneas continuas usando la llave borderDash. Esta llave acepta un arreglo como su valor.

El primer elemento del arreglo determina la longitud de los guiones, y el segundo elemento determina el espacio entre estos. También puedes proporcionar un valor de compensación para dibujar los guiones usando la llave borderDashOffset.

También puedes controlar el color de borde y anchura para puntos trazados usando pointBorderColor y pointBorderWidth. De manera similar, también puedes establecer un color de fondo para puntos diferentes usando la llave pointBackgroundColor. El tamaño de los puntos trazados puede ser especificado usando la llave pointRadius. Puedes controlar la distancia a la cual los puntos deberían comenzar a interactuar con el ratón usando la llave pointHitRadius.

También puedes controlar la apariencia de los puntos trazados al deslizar encima usando las llaves pointHoverBackgroundColor, pointHoverBorderColor y pointHoverBorderWidth. Una cosa que necesitas recordar es que estas llaves de deslizamiento no esperarán a que realmente deslices sobre el elemento para dispararse. Los cambios cobrarán efecto tan pronto como estés dentro del radio de acción establecido arriba.

Hay muchas formas disponibles para puntos trazados. Estos son circulares por defecto. Sin embargo, puedes cambiar la forma a triangle, rect, rectRounded, rectRot, cross, crossRot, star, line, y dash.

Usemos todas estas llaves para re-dibujar la gráfica de radar anterior. Aquí está el código para proporcionar opciones de configuración para los conjuntos de datos y las escalas.

var marksData = {
  labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],
  datasets: [{
    label: "Student A",
    backgroundColor: "transparent",
    borderColor: "rgba(200,0,0,0.6)",
    fill: false,
    radius: 6,
    pointRadius: 6,
    pointBorderWidth: 3,
    pointBackgroundColor: "orange",
    pointBorderColor: "rgba(200,0,0,0.6)",
    pointHoverRadius: 10,
    data: [65, 75, 70, 80, 60, 80]
  }, {
    label: "Student B",
    backgroundColor: "transparent",
    borderColor: "rgba(0,0,200,0.6)",
    fill: false,
    radius: 6,
    pointRadius: 6,
    pointBorderWidth: 3,
    pointBackgroundColor: "cornflowerblue",
    pointBorderColor: "rgba(0,0,200,0.6)",
    pointHoverRadius: 10,
    data: [54, 65, 60, 70, 70, 75]
  }]
};

var chartOptions = {
  scale: {
    ticks: {
      beginAtZero: true,
      min: 0,
      max: 100,
      stepSize: 20
    },
    pointLabels: {
      fontSize: 18
    }
  },
  legend: {
    position: 'left'
  }
};

Dentro del objeto chartOptions, los valores min y max son usados para establecer los valores mínimo y máximo para la escala. La llave stepSize puede ser usada para decirle a Chart.js el número de pasos que debería tomar para ir de min a max. Aquí está el resultado final del código de arriba.

Creando Gráficas de Área Polar

Las gráficas de área polar son similares a las gráficas de pastel. Dos diferencias mayores entre estas gráficas son que en las gráficas de área polar todos los sectores tienen ángulos iguales y el radio de cada sector depende del valor trazado. Estas gráficas son usadas para trazar fenómenos cíclicos. Por ejemplo, puedes usarla para trazar el número de pájaros migratorios de una especie dada en tu área en cada estación del año.

El radio de cada sector en estas gráficas es proporcional a la raíz cuadrada del número de objetos correspondientes. En el caso de pájaros migratorios, el radio será proporcional a la raíz cuadrada del número de pájaros en tu área.

Puedes crear gráficas de área polar en Chart.js estableciendo la llave type a polarArea. Aquí está el código básico que necesitas para crear una gráfica polar.

var polarAreaChart = new Chart(birdsCanvas, {
    type: 'polarArea',
    data: birdsData,
    options: chartOptions
});

Aquí está el código para trazar el número de pájaros migratorios en una gráfica de área polar. Los únicos datos provistos en este punto es el número de pájaros y el color de fondo para diferentes estaciones.

var birdsData = {
  labels: ["Spring","Summer","Fall","Winter"],
  datasets: [{
    data: [1200, 1700, 800, 200],
    backgroundColor: [
      "rgba(255, 0, 0, 0.5)",
      "rgba(100, 255, 0, 0.5)",
      "rgba(200, 50, 255, 0.5)",
      "rgba(0, 100, 255, 0.5)"
    ]
  }]
};

var polarAreaChart = new Chart(birdsCanvas, {
  type: 'polarArea',
  data: birdsData
});

El código de arriba creará la siguiente gráfica de área polar.

La gráfica de área polar proporciona las opciones usuales para establecer el backgroundColor, borderWidth, borderColor, hoverBackgroundColor, hoverBorderWidth, y hoverBorderColor. También hay algunas llaves específicas de gráfica de área polar que puedes usar para personalizar su apariencia.

Por ejemplo, puedes establecer el ángulo inicial para el primer valor en el conjunto de datos usando la llave startAngle. De manera similar, la llave lineArc que puede ser encontrada bajo scale puede ser usada para especificar si las líneas dibujadas deberías o no ser circulares estableciendo su valor a true o false respectivamente.

Los sectores dibujados en la gráfica de área polar son rotados y escalados por defecto. Sin embargo, puedes prevenir la animación de escala estableciendo el valor de la llave animateScale a false. De manera similar, rotar la animación puede ser desactivado estableciendo el valor de la llave animateRotate a false. Ambas llaves están disponibles bajo animation.

El código de abajo cambia el valor de unas cuantas llaves para hacer la gráfica visualmente más atractiva.

var birdsData = {
  labels: ["Spring", "Summer", "Fall", "Winter"],
  datasets: [{
    data: [1200, 1700, 800, 200],
    backgroundColor: [
      "rgba(255, 0, 0, 0.6)",
      "rgba(0, 255,200, 0.6)",
      "rgba(200, 0, 200, 0.6)",
      "rgba(0, 255, 0, 0.6)"
    ],
    borderColor: "rgba(0, 0, 0, 0.8)"
  }]
};

var chartOptions = {
  startAngle: -Math.PI / 4,
  legend: {
    position: 'left'
  },
  animation: {
    animateRotate: false
  }
};

var polarAreaChart = new Chart(birdsCanvas, {
  type: 'polarArea',
  data: birdsData,
  options: chartOptions
});

Además de rotar la gráfica y deshabilitar la animación de rotación, también hemos movido la leyenda a la izquierda de la gráfica estableciendo el valor de position a left. Esto deja suficiente espacio encima de la gráfica para mostrarla apropiadamente.

Ideas Finales

En este tutorial, aprendiste sobre las aplicaciones de gráficas de radar y área polar. Después de eso, aprendiste cómo crear gráficas básicas y personalizarlas con varias opciones de configuración disponibles en Chart.js. Aprenderás sobre gráficas de pastel y burbuja en la siguiente parte de la serie.

Si estás trabajando con la web, especialmente en el front-end, es importante saber JavaScript. Por supuesto, no es sin sus curvas de aprendizaje, y hay bastantes frameworks y librerías para mantenerte ocupado, también. Si estás buscando recursos adicionales para estudiar o usar en tu trabajo, revisa lo que tenemos disponible en el marketplace de Envato.

Si tienes alguna pregunta sobre este tutorial, por favor déjame saber en los comentarios.