Cómo crear un gráfico de radar en jQuery

Si eres un desarrollador front-end, sabrás que no es sencillo librarse de estas dos cosas: jQuery y la visualización de datos. Jquery es la librería de Javascript más popular en todo el mundo, utilizada por más del 70% de los sitios webs que pueblan Internet. Y con la creciente cantidad de datos, tarde o temprano tendrás que ensuciarte las manos con la creación de gráficos.

Es por eso que este artículo combina los dos elementos, tanto jQuery como la creación de gráficos. En este tutorial vamos a ver el proceso de crear unos bonitos gráficos utilizando FusionCharts y el plugin jQuery charts. En esta ocasión vamos a ver cómo crear un gráfico de radar, pero puedes utilizar este proceso para crear cualquier otro tipo de gráfico, siempre y cuando este soportada por la librería FusionCharts.

Crear un gráfico de radar en 4 pasos

He dividido el proceso de crear nuestro gráfico en cuatro pasos muy sencillos de seguir. Pero antes de empezar, aquí tienes un vistazo rápido de lo que vamos a intentar hacer:

Puedes verlo funcionando en este JSFiddle. Para ver el código fuente, haz clic en el botón “Edit in JSFiddle” situado en la parte superior derecha de la pantalla.

Paso 1. Obtener los datos

Este suele ser el primer paso a la hora de crear cualquier tipo de diagrama o gráfico. A efectos de este tutorial, voy a utilizar datos ficticios que representan el presupuesto asignado y el gasto real de una empresa (Acme Inc.).

FusionCharts acepta ambos formatos de datos, XML y JSON. Voy a utilizar JSON, ya que recientemente se ha convertido en el formato para intercambio de datos estándar de la web. En primer lugar es necesario definir un array de categorías que contenga todas las categorías en las que se ha asignado presupuesto. Será un array de objetos como este:

"categories": [{
  "category": [{
      "label": "Engineering"
    }, {
      "label": "Sales"
    }
    // more categories
  ]
}]

A continuación tenemos que poner los datos que deseamos analizar dentro de nuestro array de datos. Dentro del array puedes tener un objeto para cada serie de datos que desees representar. En nuestro caso tenemos dos series: Allocated Budget (Presupuesto asignado) y Actual Spend (Gasto real).

"dataset": [{
  "seriesname": "Allocated Budget",
  "data": [{
      "value": "10000"
    }, {
      "value": "16500"
    }
    // more data points for first series
  ]
}, {
  "seriesname": "Actual Spend",
  "data": [{
      "value": "8000"
    }, {
      "value": "9500"
    }
    // more data points for first series
  ]
}]

Paso 2. Incluir las dependencias

Nuestro proyecto depende de los siguientes archivos Javascript:

• jQuery: Descárgalo desde aquí o bien, inclúyelo via CDN
• Los 3 ficheros JS de FusionCharts: fusioncharts.js, fusioncharts.charts.js y powercharts.js. Puedes descargar estos ficheros desde esta página
• Plugin de jQuery Charts. Descárgalo desde la página del plugin

<!-- jQuery -->
<script type="text/javascript" src="jquery.js"></script>

<!-- FusionCharts files-->
<script type="text/javascript" src="fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts.charts.js"></script>
<script type="text/javascript" src="powercharts.js"></script>

<!-- jQuery plugin -->
<script type="text/javascript" src="jquery-plugin.js"></script>

Paso 3. Crear y seleccionar un contenedor para los gráficos

Los elementos div de HTML son los mejores elementos para albergar nuestro gráfico. Lo ideal es tener un contenedor div individual para cada gráfico de tu página. Así es como crearemos nuestro contenedor para el gráfico de radar:

<div id="radar-chart">Radar chart will load here.</div>

Lo seleccionamos vía jQuery

$("#radar-chart")

Paso 4. Insertar el gráfico

Ya queda muy poco. Ahora sólo tenemos que utilizar el método insertFusionCharts que nos proporciona el plugin para insertar el gráfico en nuestra página. Lo haremos de este modo (tranquilo, lo explicaremos después):

$("#radar-chart").insertFusionCharts({
  type: 'radar',
  width: '100%',
  height: '500',
  dataFormat: 'json',
  dataSource: {
    "chart": {
      "caption": "2015 Budget for Acme Inc.",
      "captionFontSize": "22",
      // more chart configuration options
    },
    "categories": [
      // explained in step-1
    ],
    "dataset": [
      // explained in step-1
    ]
  }
});

Muchos de los parámetros del código anterior se explican por sí solos, por lo que hablaremos de los más confusos:

• type define el tipo de gráfico que queremos insertar en la página
• width y height definen la dimensión del gráfico
• dataFormat indica el formato en el que se pasarán los datos (json o xml)
• dataFormat contiene las opciones de configuración y los datos que se quieren plasmar.

Y si ejecutamos todo esto junto, obtendríamos nuestro preciado gráfico de radar. Esperamos que hayas sabido implantarlo en tu sitio web.

Fuente: webdesignledger