Crear gráfica de radar con la librería Chart.js

La gráfica tipo radar o red/araña sirve para mostrar datos en un plano circular, muy similar a la gráfica de lineas o area, pero en un plano circular.

Los lados de la gráfica dependen de las etiquetas de valores y cada valor de la gráfica se coloca del centro hacia afuera.

Esta gráfica puede tener una o mas series de valores, donde cada serie puede-debe tener un color diferente para hacer comparaciones.

La librería Chart.js es excelente para crear estas gráficas de radar debido a la facilidad y por ser muy ligera.

Código

Vamos a crear una gráfica de radar con 6 etiquetas y una serie.

Solo colocare el código para crear la gráfica, es necesario crear toda la plantilla html y agregar la librería chart.js, al final les dejo un enlace de descarga para el ejemplo.

Crear un canvas

<canvas id="chart1" width="400" height="100"></canvas>

La libreria chart.js usa canvas, asi que lo primero es crear un componente canvas.

Obtener el contexto del canvas

var ctx = document.getElementById("chart1");

A partir del contexto del canvas es posible dibujar los elementos de la grafica.

Agregar los valores

var data = {
        labels: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Marzo",],
        datasets: [{
            label: 'Ventas 2018',
            data: [520, 550, 510,530, 600, 540],
            backgroundColor: ['#05f'],
            borderColor:  "#04a"  ,
            pointBackgroundColor: "#04a",
            borderWidth: 2,
            fill: false
        },
        ]
    };

Tenemos las etiquetas: Enero, febrero, marzo, abril, mayo, junio. Y también tenemos los valores en “data”.

Aqui también definimos el color de borde, color de fondo, ancho del borde, color del punto.

Con fill=false, definimos que no se rellenara, es decir solo se muestra el borde de la gráfica.

Agregar las opciones

var options = {
            maintainAspectRatio: true,
            spanGaps: false,
            elements: {
                line: {
                    tension: 0.01
                }
            }
    };

Las opciones son sencillas, primero definimos que se mantenga el aspect-ratio, la tensión de la linea es importante, si queremos lineas curvas la tensión debe ser mayor, solo se aceptan números del 0 al 1.

Crear la grafica de radar

var chart1 = new Chart(ctx, {
    type: 'radar',
    data: data,
    options: options
});

Ahora solo vamos a crear la gráfica, aqui vamos a pasar los parámetros: el contexto del canvas, el tipo de gráfica=radar, los datos y las opciones. Si todo esta bien se debe mostrar la gráfica.

Resultado

Este es el resultado después de ejecutar el código.

Descargar

Aquí les dejo la opción de descargar el ejemplo.

Link: Descargar el ejemplo

Espero les sirva el ejemplo.

Envíen sus comentarios. Saludos