Jul 2, 2014

Probando Highcharts 4 y Highmaps

Highcharts es una librería desarrollada en Javascript que permite crear fácil y rápidamente gráficos interactivos.

Trae de serie un nutrido pack de gráficos: área, columnas, barras, pasteles (o quesitos), etc. Simplemente necesitas añadir un set de datos (acepta JSON, CSV, XML) y ya puedes incorporarlo en cualquier proyecto web. Además puedes configurar prácticamente toda la interfaz de usuario con la imagen corporativa que desees (colores, fuentes, tamaños, idiomas, etc.).

Librerías como Highcharts existen muchas, algunas mucho más potentes como D3 o más básicas como Flot, Fusion Charts o incluso Google Charts. Pero a mi entender Highcharts es actualmente la librería de facto para crear gráficos “precocinados”. Quizás si necesitas crear un nuevo tipo de gráfico muy específico y personalizado, D3 sea la mejor y única opción por el momento, siempre teniendo en cuenta que existen librerías como NVD3 o Rickshaw que te pueden ahorrar tiempo de desarrollo. NVD3 todavía se encuentra en beta, pero a nivel de performance por lo visto gana de lejos.

Highcharts 4

Hace unas pocas semanas Highcharts ha lanzado una nueva versión (v4) con un muchas novedades. Por ejemplo han añadido nuevos tipos de gráficos: heat charts, 3D charts, scatter plot, funnel chart, waterfall. También tienen un download builder bastante útil que te permite personalizar la librería con los componentes que vayas a necesitar en cada proyecto, ahorrandole muchos kb al usuario final.

Highmaps

Pero de todas las novedades, me ha gustado mucho Highmaps. Es un componente pensado para la creación de mapas. Siempre con la filosofía que ha seguido Highcharts: sencillo y fácil de usar. Aqui tambíen existen otras opciones mucho más completas y potentes como Leaflet o CartoDB.

A destacar: acepta GeoJSON y SVG. Puedes encontrar un listado de recursos gratuitos para ambos formatos en Highcharts Code. También tienes acceso gratuito a la API y ejemplos de implementación en la demo.

Manos a la obra

Para esta prueba, he usado el GeoJSON para España. Se encuentra mínimizado y tiene un peso de 64 kb. Por lo tanto si queréis echarle un ojo tendréis que pasar el código por una herramienta tipo JS Beautifier.

Leyendo el código vi algo que me resulto extraño: no sé por qué razón utilizan una nomenclatura tan rara para los ID de ciudades. Por ejemplo a Ciudad Real le corresponde el código “es-393”, a Palencia el “es-7254, y Salamanca tiene el “es-7251”. Y así con varias ciudades más. Esto huele raro. Estuve revisando la Wikipedia y encontre una ISO que resuelve este problema. En concreto la ISO_3166-2:ES. En ella Palencia es “es-p”, Ciudad Real “es-cr” y Salamanca “es-sa”, vamos una nomenclatura mucho más eficiente para trabajar. En resumen, he enviado un post al foro oficial de Highcharts, a ver si me explican por qué narices no utilizan el ISO correspondiente.

Dicho esto, si le echaís un ojo la pestaña Javascript de JSFiddle, veréis que la configuración no tiene mucho misterio. Primero cambio los colores y tipos de fuentes por defecto. Seguidamente preparo los datos a mostrar, asignandole al “hc-key” de cada ciudad un valor aleatorio de 0 a 99. Y despúes instancio el mapa en el nodo correspondiente (en este caso “#container”). Y poco más, con estos pequeños pasos ya tienes un mapa interactivo de España para mostrar datos.