Un tutorial sobre Drill-down FusionCharts en jQuery

Publicado: 2022-03-11

La visualización de datos hace que sea más fácil de leer

Cuando se trata de análisis de datos, la mayoría de las empresas confían en MS Excel o Google Sheets. Si bien esas son herramientas poderosas, es difícil notar tendencias, y mucho menos tener sentido a partir de grandes filas de datos de hojas de cálculo. Tratar con datos presentados de esta manera no es muy interesante, pero una vez que agrega visualización a esos datos, las cosas se vuelven más fáciles de administrar, y ese es el tema del tutorial de hoy: hacer gráficos interactivos usando jQuery.

Tratar con datos de hojas de cálculo es aburrido.

Es difícil notar tendencias a partir de filas de datos de hojas de cálculo, pero una vez que agrega visualización...

Pío

Usaré la biblioteca de gráficos JavaScript de FusionCharts para este proyecto, ya que ofrece una gran biblioteca de más de 90 gráficos, es compatible con todos los navegadores y es bastante fácil trabajar con ella. También ofrece un complemento dedicado para jQuery que facilitará nuestro trabajo.

Comenzaré creando un gráfico básico utilizando la biblioteca JavaScript central de FusionCharts y su complemento de gráficos jQuery, luego le agregaré la capacidad de desglose. Drill-down le permite pasar de un gráfico a otro haciendo clic en un gráfico de datos.

El término 'gráfico de datos' es contextual; se refiere a una columna en un gráfico de columnas, líneas en un gráfico de líneas, sectores circulares en un gráfico circular. Al hacer clic en un gráfico de datos del gráfico principal, se le presenta un gráfico secundario que muestra los datos relativos un nivel más profundo.

Al hacer clic en un gráfico de datos en el gráfico principal, aparecerá un gráfico secundario.

Comprender FusionCharts

Antes de comenzar el tutorial, cubramos la anatomía básica de FusionCharts. Cada gráfico se compone de estos elementos clave:

Leyenda: El título en el gráfico. Explica lo que se está cartografiando.
Subtítulo: el texto debajo del título que especifica información adicional del gráfico, a menudo establece un período de tiempo a partir del cual se recopilaron los datos.
Leyenda: muestra un símbolo para cada gráfico de datos en el gráfico. Un gráfico en particular se puede habilitar o deshabilitar haciendo clic en su ícono de leyenda respectivo.
Gráfico de datos: estas son representaciones de datos en el gráfico. Un gráfico de datos puede ser una columna en un gráfico de columnas, líneas en un gráfico de líneas o sectores circulares en un gráfico circular.
Información sobre herramientas: texto que aparece cuando se desplaza sobre un gráfico de datos, que se utiliza para transmitir información adicional sobre ese gráfico de datos en particular.

Hacer un gráfico de desglose

Antes de comenzar, aquí hay una captura de pantalla del gráfico que haremos en este tutorial. Puede ver el JSFiddle aquí o acceder al código fuente completo del proyecto en mi repositorio de GitHub.

Una vista previa del proyecto jquery final de este tutorial.

He dividido el proceso de creación de un gráfico detallado en cinco pasos, así que comencemos.

Paso 1: incluir archivos JavaScript y crear el contenedor de gráficos

Primero, necesitamos incluir todos los archivos JS de los que depende nuestro proyecto usando la etiqueta <script> . Si la página aún no existe, cree un documento HTML en blanco e incluya los archivos a continuación en la sección <head> . Ahora necesitamos los siguientes cuatro archivos:

jQuery minificado
Biblioteca JS principal de FusionCharts (incluye fusioncharts.js y fusioncharts.charts.js )
Complemento jQuery de FusionCharts

Nuestra sección <head> ahora se verá así:

 <!-- jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- FusionCharts JS file --> <script type="text/javascript" src="js/fusioncharts.js"></script> <script type="text/javascript" src="js/fusioncharts.charts.js"></script> <!-- jQuery charts plugin --> <script type="text/javascript" src="js/jquery-plugin.js"></script> <!-- custom theme file (optional) --> <script type="text/javascript" src="js/toptal.js"></script>

Ahora que tenemos todas las dependencias incluidas, es hora de crear el contenedor <div> para el gráfico e incrustarlo en nuestra página con el siguiente código HTML:

 <div>drill-down chart will load here</div>

Ahora, podemos seleccionarlo usando el selector $ de jQuery dentro del código:

 $("#drill-down-chart")

Nota: si tiene más de un gráfico en su página, necesitará un contenedor separado para cada gráfico con una id única.

La visualización de datos hace que sea más fácil de leer.

Paso 2: Obtención y estructuración de datos

FusionCharts acepta datos en formato JSON y XML, pero elegí usar JSON porque se ha convertido en el formato estándar para el intercambio de datos entre aplicaciones web. La matriz de datos JSON para un gráfico básico contiene un objeto para cada gráfico de datos, y dentro de cada objeto de gráfico de datos definimos su etiqueta y valor respectivos. Esa estructura se parece a:

 "data": [{ "label": "Q1", "value": "850000", }, { "label": "Q2", "value": "2070000", },... // more data objects ]

A medida que trazamos nuestro gráfico detallado, su JSON se vuelve más complejo. El vínculo entre los gráficos principal y secundario requiere un par key - value más dentro de cada objeto de la matriz de datos. La nueva clave (como era de esperar, llamada link ) contendrá la identificación del gráfico secundario que obtendrá cuando se haga clic en su gráfico principal. El formato para definir la id del gráfico secundario es newchart-dataFormat-childId . Como usamos JSON, sabemos que todo lo que vinculemos se verá como newchart-json-childId . Así es como lo definimos para nuestro gráfico:

 "data": [{ "label": "Q1", "value": "850000", "link": "newchart-json-q1" }, { "label": "Q2", "value": "2070000", "link": "newchart-json-q2" }, ... // more data objects]

Paso 3: Inserción de datos del gráfico

Una vez que tenga los datos listos, es hora de insertar el gráfico en su página utilizando el método insertFusionCharts proporcionado por el complemento jQuery:

 $("#drill-down-chart").insertFusionCharts({ type: 'column2d', id: "mychart", width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Quarterly Revenue for 2015", "paletteColors": "#9EA5FC", "xAxisName": "Quarter (Click to drill down)", "yAxisName": "Revenue (In USD)", // more chart configuration options }, "data": [ // see step-2 for explanation ], "linkedData": [ // explained in step-4 ] } })

Analicemos el fragmento de código anterior:

type define el tipo de gráfico principal que estamos trazando. En este caso, column2d . Cada gráfico en la biblioteca FusionCharts tiene un alias único. Puede encontrar el alias para el gráfico que desea trazar en la página de lista de gráficos de FusionCharts.
id establece la identificación única para el gráfico, que no debe confundirse con la identificación del elemento <div> que contiene nuestro gráfico. La id de un gráfico se usa para seleccionar un gráfico para aplicar controladores de eventos y métodos de llamada. Haremos uso de esto en el Paso 5.
width y height establecen la dimensión del gráfico en píxeles o porcentaje. 100% de ancho le dice al gráfico que ocupe el ancho completo del contenedor.
Definimos el formato de datos usando el atributo dataFormat . Usamos JSON para nuestro ejemplo, pero también hay otros formatos de datos aceptables, como una URL XML. Para obtener más información sobre los formatos de datos, consulte la página de documentación oficial de FusionCharts.
dataSource contiene el contenido real del gráfico, y el objeto de chart que contiene contiene las opciones de configuración del gráfico, como el título y el subtítulo. La matriz data debe resultar familiar, ya que la creamos en el Paso 2 (contiene los datos que se van a trazar) y los linkedData contienen el contenido del gráfico secundario (el gráfico que obtiene después de hacer clic en un gráfico de datos en el gráfico principal).

Relacionado: Contrate al 3% superior de los arquitectos de Big Data independientes.

Paso 4: Creación de la matriz de datos vinculados para gráficos secundarios

Ahora que tenemos el gráfico principal definido, es hora de crear un gráfico secundario para cada gráfico de datos, un proceso muy similar a la creación del gráfico principal. La matriz de linkedData , creada en el método 'insertFusionCharts', definirá un objeto separado para cada gráfico secundario. Así es como se ven los datos del primer gráfico secundario:

 "linkeddata": [{ "id": "q1", "linkedchart": { "chart": { "caption": "Monthly Revenue", "subcaption": "First Quarter", "paletteColors": "#EEDA54, #A2A5FC, #41CBE3", "labelFontSize": "16", // more configuration options }, "data": [{ "label": "Jan", "value": "255000" }, { "label": "Feb", "value": "467500" }, //more data] } }, //content for more child charts

id es el id del gráfico secundario individual que definimos en el Paso 2. linkedChart es similar a dataSource del Paso 3 en que contiene el contenido real de ese gráfico. Hay muchos otros atributos que van dentro del objeto de gráfico, que cubro en detalle en la sección posterior, "Mejora del diseño con atributos de gráfico".

Paso 5: Configuración detallada personalizada

Diversos tipos de gráficos

Hasta ahora, nuestro código de muestra tiene gráficos primarios y secundarios que comparten el mismo tipo de gráfico. Si desea profundizar en un tipo de gráfico diferente (de columna a circular, por ejemplo), hágalo vinculando el evento fusionchartsrendered .

 $('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

En el código anterior, el evento fusionchartsrendered llamará al método configureLink , que define el tipo de todos los gráficos secundarios más cualquier opción de botón de superposición. También puede especificar tipos de gráficos independientes para cada gráfico secundario. Hay muchas opciones disponibles en el método configureLink , por lo que puede resultarle útil revisar la documentación de referencia de la API de FusionCharts.

Representación de gráficos en diferentes divisiones

Otra cosa interesante que puede hacer es representar el gráfico secundario en un contenedor diferente en lugar del mismo que su padre. Para esto, defina un contenedor HTML <div> separado después del contenedor del gráfico principal y pase su id al atributo renderAt como se muestra a continuación:

 $('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", renderAt:"chart-container2", overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

El valor dado al atributo renderAt especifica el id del <div> en el que se representará el gráfico secundario ( chart-container2 ).

Mejorar el diseño con atributos de gráfico

Siguiendo este tutorial obtendrás un gráfico funcional, pero será un poco feo si lo dejas así. Para una presentación más atractiva, deberá utilizar "atributos de gráfico" estéticos. Los atributos del gráfico se definen dentro del objeto del chart y se utilizan para personalizar las opciones de representación. Puede que le resulte útil consultar el gráfico explicativo de FusionCharts al revisar estos atributos configurables clave:

paletteColors define el color de los gráficos de datos. Si da un solo color aquí, todas las columnas serán de ese color. Si proporciona varios colores, la primera columna tomará el primer valor, la segunda columna tomará el segundo valor y así sucesivamente.
plotSpacePercent controla el espacio entre las columnas. El valor predeterminado para esto es 20 (el valor es un entero, pero la unidad es un porcentaje) y el rango permitido es 0-80. Un valor de cero hará que las columnas se amontonen y se peguen entre sí.
baseFont define la familia de fuentes del gráfico. Puede usar cualquier fuente que desee; Usé Open Sans de Google en mi gráfico. Simplemente incluya el archivo de fuente externa en su página HTML para poder usarlo en su gráfico.
plotToolText le permite personalizar la información sobre herramientas. Mediante el uso de macros como $label y * $dataValue , puede mostrar información específica en un gráfico de datos en particular desde dentro de un <div> , luego diseñe ese <div> usando CSS en línea. Esto es lo que he hecho en nuestro ejemplo:

 "plotToolText": "<div>$label: $dataValue</div>"

theme le permite definir los atributos de su gráfico en un archivo diferente y aplicarlos una vez aquí en lugar de saturar su objeto de gráfico con numerosos atributos de gráfico. Puede encontrar el archivo de tema para este tutorial, toptal.js , dentro de la carpeta JS del repositorio de GitHub del proyecto.

Eso es todo lo que voy a cubrir, pero hay más de cien atributos para un gráfico, así que si desea explorar más, visite la página de atributos de gráfico de FusionCharts y busque su tipo de gráfico en particular.

Más recursos de FusionCharts y jQuery

Aunque he cubierto los elementos más importantes para hacer un gráfico detallado usando jQuery, es muy probable que necesite ayuda cuando intente hacerlo por su cuenta. Para ese momento, aquí hay algunos recursos adicionales:

Complemento de gráficos jQuery: para inspirarse, visite la página oficial del complemento de gráficos jQuery para ver algunos ejemplos en vivo.
Documentación: si no puede resolver algo, la documentación es el primer lugar donde debe buscar. Aquí hay enlaces útiles para el complemento jQuery y el gráfico detallado (también conocido como gráficos vinculados).
Demostraciones: cada biblioteca de gráficos ofrece muestras en vivo para mostrar sus capacidades, y FusionCharts no es diferente. Dirígete a su galería de demostración de más de 800 muestras en vivo, con el código fuente completo si necesitas algunas ideas. Existe una buena posibilidad de que lo que sea que estés tratando de hacer ya esté disponible. No es necesario empezar desde cero; ¡simplemente bifurque el violín y continúe desde allí!
Más extensiones: si no usa JavaScript estándar o jQuery, puede explorar más complementos y envoltorios ofrecidos por FusionCharts en esta página. Tienen complementos dedicados para una variedad de bibliotecas y marcos como Angular, React, Java, ASP.NET, etc.

PD: Pasaré el rato en la sección de comentarios a continuación, así que siéntete libre de publicar cualquier pregunta que puedas tener sobre mi artículo. ¡Estoy feliz de ayudar!

Relacionado: Minería de datos para el análisis predictivo de redes sociales