Cómo añadir gráficos a tu sitio con Highcharts

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Todo el mundo trabaja con datos, y muy a menudo esta información es presentada en grandes tablas de datos. La representación y la lectura de tablas largas en un sitio web puede ser algo muy engorroso. Los gráficos son buenos para ayudar a las personas a comprender los cambios y las tendencias que existen detrás de los datos.

Recientemente, al tratar de encontrar una manera sencilla de insertar un gráfico interactivo en un sitio web, descubrí Highcharts, y lo he estado usando en varios proyectos desde entonces.

A lo largo de esta serie de artículos realizaremos un análisis de Highcharts, explicaremos por qué es estupendo y cómo podemos implementar su uso en nuestros propios proyectos basados en la web.

¿Qué es lo fascinante de Highcharts?

Es interactivo. Puedes colocar el ratón sobre un elemento para ver más detalles, y también puedes hacer clic en los elementos de la leyenda del gráfico para activarlos y desactivarlos.
Compatibilidad. Está basado en JavaScript, despliega la información en un navegador web, por lo que incluso IE 6 o un iPad pueden mostrarte esos hermosos gráficos. Highcharts utiliza otros frameworks de JS como jQuery, MooTools, Prototype o el propio framework autónomo de Highcharts. Para crear gráficos necesitas una de las bibliotecas y highcart.js.
Muchos, muchos tipos de gráficos. Highcharts es compatible con los tipos de gráficos de línea, spline, de área, de área usando spline, de columnas, de barras, circular, de dispersión, de calibres angulares, de rango de área, de rango de área usando spline, de rango de columna y polar. Veremos ejemplos de los más comúnmente utilizados: el gráfico de columnas, el de barras, el de línea y el circular.
Es fácil alimentar datos a Highcharts. Highcharts puede cargar información a partir de datos locales, archivos locales o incluso de un servidor remoto. Puede recibir datos analizados de archivos CSV, JSON, XML o cualquier otra base de datos.
Guarda o imprime tus gráficos. Una característica sorprendente que encontré es que puedes imprimir o exportar el gráfico que estés viendo actualmente. Puedes guardar un gráfico como un archivo PDF, JPG, PNG o SVG.
Fácil de configurar, ajustarlo no es un problema. Agrega algunas líneas de código y tus datos y gráficos serán dibujados. Con su bien redactada documentación de usuario y su referencia sobre la API, los principiantes no se perderán y los desarrolladores experimentados se sentirán bienvenidos.
Licencia flexible. El uso de Highcharts es gratuito para sitios no comerciales, y los precios son flexibles para los proyectos comerciales.
Permite el uso de temas. Por el momento hay cuatro temas de aspecto moderno predefinidos, o puedes crear uno único con un poco de buen gusto y conocimientos de CSS.

Antes de usar Highcharts por primera vez, veamos qué tipo de gráfico usar en tareas comunes.

¿Qué gráfico usar y cuándo?

Los gráficos de barras y los de columnas son similares en el sentido de que cada uno usa rectángulos largos para comparar múltiples valores, pero su diferencia radica en la orientación de sus gráficos. Los gráficos de barras están orientados horizontalmente, mientras que los gráficos de columnas son verticales.

En mi sencillo ejemplo estoy comparando las ventas de una tienda web imaginaria por fuente en una distribución mensual (comparando las ventas de cada mes entre sí). Como puedes ver a continuación, si quieres comparar solamente una pequeña cantidad de datos, y si el gráfico de barras se ajusta a la pantalla con la que estés trabajando actualmente, entonces tu mejor opción es elegir el gráfico de barras.

Por el contrario, deberías usar gráficos de columnas si tienes una limitación vertical, como en el caso de las pantallas con orientación horizontal. Observa la siguiente comparación.

Los gráficos de línea representan información usando la serie de puntos de datos y líneas rectas. Estos muestran cambios particulares en los datos a intervalos de tiempo equidistantes. A menudo se utiliza para visualizar tendencias en una serie cronológica.

En mi ejemplo, utilizo la misma tabla de datos que utilicé anteriormente para comparar varios conjuntos de datos. Como puedes ver, es fácil comparar la tendencia de las fuentes de ventas de los meses anteriores.

Los gráficos circulares son gráficos redondos divididos en sectores, donde cada sector muestra el tamaño relativo de cada valor. Estos son útiles cuando quieres comparar datos que son parte del todo. Cada porción del círculo representa su valor numérico en la suma.

En mi ejemplo, muestro la distribución de diferentes tipos de fuentes de ventas de un período determinado.

La anatomía de Highcharts

Para comprender los siguientes ejemplos de código, debes conocer los conceptos básicos que componen a Highcharts.

Estas son las partes principales de un gráfico:

El título muestra el nombre de un gráfico en la parte superior.
Los subtítulos se colocan justo debajo del título.
Las series hacen referencia a una o más series de datos presentadas en un gráfico.
La información sobre herramientas es una descripción de datos particulares que aparece al pasar el cursor sobre parte de un gráfico.
La leyenda muestra el nombre y/o el símbolo de cada serie de un gráfico. Es posible habilitar o deshabilitar la serie al hacer clic en su nombre en una leyenda.
Las opciones de imprimir y descargar permiten que los usuarios impriman o exporten el gráfico.

Cómo agregar tu primer gráfico

En este ejemplo importamos algunos datos de muestra de un archivo CSV, los procesamos y presentamos la información en un gráfico de columnas dentro de un archivo HTML.

Veamos la configuración básica:

Debes crear un archivo HTML con el nombre que desees.
Debes tener un archivo CSV (valores separados por comas, del inglés comma-separated values) en el mismo directorio.

En mi ejemplo, yo usé un archivo de texto en el que los valores están separados por comas y los registros están separados por líneas nuevas.

Este es el contenido del archivo column-data.csv que estamos usando:

1	Sales by source,January,February,March,April,May,June,July
2	Search engine,60,64,57,61,54,58,61
3	Ad,30,39,32,40,37,33,41
4	Affiliate,20,18,23,27,19,23,27
5	Newsletter,29,22,23,27,19,32,34
6	Offline/Organic,50,47,44,40,48,51,53

En la sección head de HTML, debemos incluir la versión más reciente de jQuery, Highcarts.js, el módulo de exportación opcional y nuestro JavaScript personalizado que prepara y crea nuestro gráfico.

En la sección body necesitamos un contenedor div en el que pueda dibujarse el gráfico.

<!DOCTYPE html>
<html>
<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>My first column chart by Highcharts</title>
		<!-- 1. Add JQuery and Highcharts in the head of your page -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
		<script src="http://code.highcharts.com/highcharts.js"></script>
		
        <!-- 2. You can add print and export feature by adding this line -->
		<script src="http://code.highcharts.com/modules/exporting.js"></script>
		
		
		<!-- 3. Add the JavaScript with the Highchart options to initialize the chart -->
		<script type="text/javascript">
		jQuery(document).ready(function() {	

			var options = {
				chart: {
					renderTo: 'container',
					type: 'column'
				},
				title: {
					text: 'Tiny Tool Monthly Sales'					
				},
				subtitle: {
					text: '2014 Q1-Q2'
				},
				xAxis: {
					categories: []
				},
				yAxis: {
					title: {
						text: 'Sales'
					}
				},
				series: []
			};
			// JQuery function to process the csv data
			$.get('column-data.csv', function(data) {
				// Split the lines
				var lines = data.split('\n');
				$.each(lines, function(lineNo, line) {
					var items = line.split(',');
					
					// header line contains names of categories
					if (lineNo == 0) {
						$.each(items, function(itemNo, item) {
							//skip first item of first line
							if (itemNo > 0) options.xAxis.categories.push(item);
						});
					}
					
					// the rest of the lines contain data with their name in the first position
					else {
						var series = { 
							data: []
						};
						$.each(items, function(itemNo, item) {
							if (itemNo == 0) {
								series.name = item;
							} else {
								series.data.push(parseFloat(item));
							}
						});
						
						options.series.push(series);

					}
					
				});
				//putting all together and create the chart
				var chart = new Highcharts.Chart(options);
			});			
			
		});
		</script>
		
	</head>
	<body>
		
		<!-- 3. Add the container -->
		<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>		
				
	</body>
</html>

Como puedes ver, lo primero que debes configurar es el tipo de gráfico y el nombre del contenedor. Luego establecemos el título, el subtítulo y el título del eje 'y' con nuestro texto personalizado. El contenido de las categorías para el eje 'x' y los datos de las series se procesan y se asocian posteriormente, después de analizar correctamente los datos CSV.

Nuestro JavaScript llevó a cabo estos sencillos pasos:

Configuró las opciones.
Analizó el CSV.
Generó el gráfico.

Estos son tres sencillos pasos para obtener un gráfico realmente atractivo para nuestros datos.

Próximamente...

Este fue un artículo introductorio sobre cómo comenzar a usar Highcharts.

En el siguiente artículo, continuaremos analizando la biblioteca y veremos cómo podemos usarla para representar información en otros tipos de gráficos también.