Los datos están a nuestro alrededor y su visualización ya se ha convertido en una parte esencial de nuestras vidas. Los gráficos, infografías, mapas y tableros tienen una gran demanda hoy en día porque nos presentan información de una manera que se puede interpretar fácilmente.
Lo bueno es que la creación de gráficos no requiere grandes habilidades o conocimientos especiales por parte de desarrolladores web, diseñadores o cualquier otra persona. En este artículo, le mostraremos los conceptos básicos y le explicaremos cómo manejar la visualización de datos interactivos usando JavaScript y HTML5, con facilidad.
Comenzaremos creando un gráfico de barras de una sola serie para que pueda comprender los conceptos básicos. Luego, le mostraremos una forma rápida de crear gráficos de barras apiladas y de series múltiples. Los gráficos de barras son una forma popular de presentar datos en estos días, y la lógica de desarrollo utilizada se puede traducir fácilmente a otros tipos de gráficos.
El cuadro final será este gráfico de barras 100% apiladas:
ver la pluma Final (título). Gráfico de barras 100% apilado personalizado por Ruslán (@ruslankorsar) en CódigoPen.
Hoy hay muchas bibliotecas de gráficos de JavaScript; algunos de ellos son absolutamente gratuitos, como D3 y Gráficos de Google mientras que otros requieren pagos por uso comercial. En mi opinión, los más completos y sólidos de ellos son amCharts, Cualquier gráficoy Gráficos altos.
Para este tutorial, he decidido usar Cualquier gráfico. Sin embargo, el proceso es muy similar para todas las bibliotecas, especialmente si está haciendo algo simple. AnyChart tiene una amplia documentación y Referencia de la API así como una gran variedad de tipos de gráficos admitidos y demostraciones en el código de juegospor lo que es una buena opción para principiantes.
Para su comodidad, todos los ejemplos ilustrados en el tutorial están disponibles en esta colección en CodePen y puede explorarse allí mismo o exportarse a archivos ZIP con archivos de demostración CSS/HTML/JavaScript.
Gráficos JS en 3 sencillos pasos
El proceso de creación de un gráfico de JavaScript básico para su sitio web o aplicación consta de los siguientes tres pasos:
1. Preparación de datos
Así como un gran barco quiere aguas profundas, un gráfico simple quiere datos simples. Por supuesto, si tiene una gran cantidad de datos o su estructura no es obvia, primero debe prepararlos.
Al crear la mayoría de los tipos de gráficos populares, solo necesitamos los campos X e Y. Sin embargo, los gráficos de barras pueden ser aún más simples porque a menudo sucede que solo se usa el campo Y, y un índice, o un número de elemento, se toma como X. Ese es el caso cuando usamos una matriz de datos de JavaScript, por ejemplo:
// 5 data points = 5 categories for a single series
var data = [19, 24, 30, 34, 42];
// Y is these values; X is item numbers [0,1,2,3,4,5]
Si usa JSON/XML para transferir datos, sus datos podrían tener el siguiente aspecto.
[{
'x': 'Product A',
'value': 19
},{
'x': 'Product B',
'value': 24
}...]
En términos generales, hay muchas formas de trabajar con datos, y los desarrolladores de software de visualización suelen describir todas o muchas de ellas en los documentos. Con eso en mente, recomiendo revisar el sección relevante de la documentación de su biblioteca de gráficos.
2. Obtener una biblioteca de gráficos
La biblioteca que usa es obviamente un ingrediente vital aquí. Si va a usar gráficos localmente, debería ser razonable descargar el paquete binario y manténgalo cerca.
Sin embargo, si necesita gráficos para una aplicación web o una página en un sitio web, entonces un CDN puede ser una mejor opción. Cargará los archivos desde el servidor más cercano a su cliente, brindándole una carga de página más rápida y un mejor rendimiento.
<script src="//cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script>
3. Escribir un código HTML/JavaScript simple
Cuando nuestros datos y la biblioteca estén listos, podemos comenzar a escribir el código para dibujar nuestro gráfico.
a) Primero, necesitamos crear un contenedor de gráfico en la página. La mejor manera es usar un
<div id="container"></div>
b) Después de eso, incluyamos nuestros datos:
var data = [
{x: 'DVD player', y: 19},
{x: 'Home theater system', y: 24},
{x: 'Karaoke player', y: 30},
{x: 'Projector', y: 34},
{x: 'TV receiver', y: 42}
];
c) Luego, especificamos qué tipo de gráfico queremos llamando a la función constructora correspondiente:
var chart = anychart.bar();
d) Para que las cosas sean más claras para los espectadores, quiero darle un título al gráfico:
chart.title('Product Sales');
e) Ahora, vamos a crear una serie:
chart.addSeries(data);
// or we can specify a simple dataset within the method:
chart.addSeries([19, 24, 30, 34, 42]);
f) Nuestro gráfico debe colocarse en un contenedor, por lo que estamos especificando el que acabamos de crear:
chart.container('container');
g) Todo parece estar bien, así que podemos dibujar nuestro gráfico ahora:
chart.draw();Así es como se ve el resultado:
El siguiente es el código completo para su conveniencia:
<html>
<head>
<script src="//cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script>
<script>
anychart.onDocumentLoad(function() {
var data = [
{x: 'DVD player', y: 19},
{x: 'Home theater system', y: 24},
{x: 'Karaoke player', y: 30},
{x: 'Projector', y: 34},
{x: 'TV receiver', y: 42}
];
var chart = anychart.bar();
chart.title('Product Sales');
chart.addSeries(data);
chart.container('container');
chart.draw();
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Parece bastante sencillo, ¿no? Y ahora podemos comparar convenientemente las ventas totales por categoría.
Creación de gráficos de barras apiladas y de series múltiples
Ahora que hemos aprendido los conceptos básicos de los gráficos con JavaScript, podemos proceder a crear un gráfico un poco más complejo que muestre más información. Como dije anteriormente, le mostraré una manera fácil de hacer un gráfico de barras de varias series y luego uno apilado.
Básicamente, los procedimientos son bastante similares. Como siempre, todo comienza con los datos.
Datos de una tabla
En el contexto del gráfico de barras anterior, teníamos una variable (la serie de datos de ventas de productos) y varias categorías (tipos de productos). Para mostrar adicionalmente la composición de cada valor, que es la esencia de los gráficos de barras apiladas, necesitamos datos más detallados.
Para ello, podemos utilizar datos que ya se muestran en la página. Por ejemplo, si ya tiene una tabla HTML, puede crear fácilmente un gráfico basado en ella. Si utiliza AnyChart Módulo adaptador de datos todo lo que necesita es especificar esa tabla como fuente de datos.
1) Obtenga el adaptador de datos:
<script src="https://cdn.anychart.com/js/latest/data-adapter.min.js"></script>
2) Prepare los datos de la tabla:
var tableData = anychart.data.parseHtmlTable('#tableWithData');
3) Cree un gráfico y especifique la fuente de datos:
var chart = anychart.bar();
chart.data(tableData);
El resultado inmediato es un gráfico de barras de varias series que nos permite, por ejemplo, comparar rápidamente el rendimiento de cada producto dentro de cada categoría.
Cambiar el tipo de serie
Todos los detalles necesarios, incluidos los datos, ya están especificados. Ahora podemos cambiar el tipo de serie y obtener un gráfico de barras apiladas a partir de ese convencional de varias series. No es difícil en absoluto, ya que solo necesita una línea de código para apilar los valores:
chart.yScale().stackMode('values');
¡Voila!
Acabamos de crear un gráfico de barras apiladas sobre la marcha sin cambiar realmente la configuración de esa serie múltiple. Como resultado, no solo estamos listos ahora para comparar las ventas totales por categoría como con el gráfico de barras de una sola serie del comienzo del artículo, sino que también podemos identificar qué producto es responsable de hacer que una categoría sea más pequeña o más grande que otras. .
Dado que acordamos de antemano que nuestro objetivo final es un gráfico de barras 100% apiladas, cambiemos el modo para obtenerlo:
chart.yScale().stackMode('percent');
Es un gráfico de barras 100 % apiladas, que le permite resaltar las relaciones de parte a todo y evaluar la contribución de cada producto al total de la categoría.
Personalización del diseño
El diseño es muy importante en la visualización de datos, para atraer la atención, mejorar la claridad y mantener la integridad visual dentro de su proyecto web. Afortunadamente, con esta biblioteca de gráficos, la personalización es bastante simple.
Agregar texto
Para mayor claridad, puede proporcionar su visualización con textos adicionales. Por ejemplo, le daré un título al eje vertical y agregaré una etiqueta de gráfico temporalmente:
chart.xAxis().title('Products');
chart.label({text: 'Classified!'});
Ajustes de color
Puede agregar color a través de una paleta (gráfico.paleta()) y cambiar la configuración de fondo (gráfico.fondo()) entre otras cosas. O puedes usar un tema:
<script src="//cdn.anychart.com/themes/latest/wines.min.js" type="text/javascript"></script>
Luego debemos especificarlo en la configuración del gráfico:
anychart.theme(anychart.themes.wines);
Interactividad de gráficos
Hacer un gráfico de JavaScript al menos un poco interactivo no es gran cosa.
Probablemente, el enfoque más básico consiste en habilitar el estado de desplazamiento sobre los puntos de datos, para que cambien de color o agreguen o modifiquen marcadores. El estado de selección determina cómo se ve cada punto después de hacer clic.
De manera predeterminada, se incluye una interactividad simple basada en pasar el mouse y seleccionar, por lo que en este momento no agregaremos nada al ejemplo anterior. Vuelva a él para explorar la interactividad básica, si lo desea.
Vale la pena hablar sobre el elemento de información sobre herramientas, que puede flotar cuando se pasa el cursor sobre un punto. Siempre trato de hacer un buen uso de la información sobre herramientas haciendo que muestren información útil sobre a qué serie pertenece un punto, qué valor representa, etc. Puede ajustar fácilmente la información sobre herramientas para mostrar cualquier cosa. Estamos introduciendo la información sobre herramientas y especificando qué mostrar en ella:
var tooltip = chart.tooltip();
tooltip.displayMode('union');
tooltip.textFormatter('{%SeriesName}: {%Value} ({%YPercentOfCategory}%)');
Aquí está el resultado:
Esto es solo un breve vistazo a las opciones de personalización, entrar en detalles sería un artículo completo en sí mismo. Por ahora, le sugiero que lea el sección de interactividad de la documentación para más información.
Conclusión
Como puede ver, no es difícil crear gráficos interactivos con JavaScript. Además, puedes encontrar todos los ejemplos del tutorial en mi colección en CodePen y utilícelos fácilmente en su trabajo. Simplemente copie el código, cambie mis datos por los suyos y ponga en marcha su proyecto rápidamente.
Recuerde siempre consultar la documentación y/o la referencia de la API, así como prestar atención a las demostraciones de la biblioteca que está utilizando, como esta galería de AnyChart. Por lo general, no es complicado ver si hay algo parecido a lo que necesita, encontrar un ejemplo que se ajuste mejor, hacer algunas enmiendas simples y luego usarlo de la manera que lo necesita.