HighCharts - Excelente opción para crear gráficos o charts interactivos y dinámicos. No requiere PHP, ASP.NET, Flash ni Java.

Si necesitas añadir o implementar gráficos de estadísticas para tu página o aplicación web, esta es una excelente opción, que no solo te permite crear charts estáticos, si no también interactivos y dinámicos para que los usuarios puedan visualizar información sin necesidad de andar recargando la página.

A continuación puedes ver opciones y características de esta excelente librería, como también ejemplos y documentación para utilizarla en tu sitio web.

Indice del contenido.

1. ¿ Qué es HighCharts ?
2. Requisitos de instalación.
3. Navegadores web compatibles.
4. Acerca de la licencia
5. Opciones y tipos de gráficos que se pueden crear con la librería.
   1. Gráficos y charts interactivos.
   2. Con tooltips.
   3. Maestro/detalle.
   4. Combinar varios gráficos.
   5. Rotación de texto.
   6. Zoom
   7. Skins
   8. Visualizar porcentajes.
   9. Tortas
   10. Crear chart desde Tabla HTML
   11. Gráfico con valores negativos.
   12. Areas.
6. Instalación e implementación.

 

1 - ¿ Qué es HighCharts ?

Es una librería escrita en Javascript y ajax capaz de crear gráficos estadísticos interactivos de todo tipo y estilo, como por ejemplo líneas, tortas, de barras, áreas, columnas entre otras.

Una de las ventajas principales de este script, es que lo podrás utilizar en tu proyecto web, sin necesidad de instalar plugins externos en la computadora del usuario para que pueda visualizar las gráficas, por ejemplo Flash o Java.

Cualquier navegador web que tenga habilitado el uso de Javascript, como la mayoría, podrá mostrar los charts. Solo utiliza y necesita dos archivos para funcionar:

• la librería Javascript highcharts.js
• y la conocida librería jQuery o Mootools.

2 - Requisitos de instalación

No se requiere ninguna configuración o requerimiento en particular en el servidor web para ejecutar el script, como tampoco tecnologías de scripts del lado del servidor ( PHP y ASP.NET por ejemplo ), de este modo incluso puede funcionar en páginas html estáticas.

3 - Navegadores web compatibles.

Se puede ejecutar sin errores en los navegadores web mas populares y utilizados en la actualidad : Mozilla FireFox, Opera, Chrome, Internet explorer. También es compatible con dispositivos como el iPhone o iPAD, y versiones viejas del Internet explorer ( versión 6 del IE).

4 - Acerca de la licencia.

El componente es completamente gratis para páginas y sitios personales. Para sitios o aplicaciones web de tipo comercial, se deben comprar licencias, por ejemplo para un único portal el costo es de 80 dólares. Puedes ver la lista de precios aquí.

5.1 - Gráficos y charts interactivos.

Es posible crear charts interactivos, por ejemplo añadir y remover series, puntos, líneas de las gráficas luego de crearlo.

No es necesario volver a cargar la página para ver el gráfico actualizado. También, utiliza efectos de animación para mejorar el aspecto, presentación y visualización de los mismos.

Incluso, es posible crear gráficos en tiempo real, obteniendo los datos en forma constante desde una base de datos u otra fuente de información desde el servidor, actualizando la información cada segundo. ( Ver el archivo dynamic-update.htm en la carpeta de ejemplos )

5.2 - Gráficos con Tooltips

Permite el uso de Tooltips para las leyendas o labels que muestran la información y valores de las diferentes secciones del gráfico.

5.3 - Maestro detalle

Crear una gráfica de tipo maestro/detalle. Puedes ver el ejemplo dynamic-master-detail.htm, seleccionado o arrastrando en la parte inferior el rango a visualizar para el detalle.

5.4 - Combinar varios gráficos.

Combinar diferentes tipos de gráficos en el mismo chart, por ejemplo tortas, líneas, columnas, barras.

Los ejemplos disponibles se encuentran en la carpeta examples, archivos

• combo.htm
• combo-dual-axes.htm
• combo-multi-axes.htm
• combo-regression.htm

 

5.5 - Rotación de texto.

Rotación de texto para las leyendas. ( Ver archivo column-rotated-labels.htm en la carpeta de ejemplos )

5.6 - Zoom.

Posibilidad de hacer zoom para ampliar las diferentes áreas del gráfico.

5.7 - Skins.

Posibilidad de cambiar el aspecto utilizando distintos skins y esquemas de colores. También ver en modo grilla.

5.8 - Visualizar porcentajes.

Ver archivo de ejemplo column-stacked-percent.htm y area-stacked-percent.htm ) de la carpeta examples.

5.9 - Tortas.

Ubicación del ejemplo: Carpeta examples archivo pie-basic.htm

5.10 - Crear chart desde Tabla HTML.

El ejemplo en el archivo column-parsed.htm, muestra como leer y parsear el contenido de una tabla HTML para la creación del gráfico. En el ejemplo puedes ver al final de la página la tabla que contiene 3 campos.

5.11 - Gráfico con valores negativos.

Ubicación del ejemplo: Carpeta examples archivo column-negative.htm

Vista previa.

5.12 - Areas.

Incluye 6 ejemplos, son los archivos:

• area-basic.htm
• bar-stacked.htm
• column-basic.htm
• column-negative.htm
• column-stacked.htm
• column-stacked-percent.htm
• column-rotated-labels.htm

Vista previa:

6 - Instalación e implementación.

La documentación de la librería JavaScript la puedes encontrar en este enlace. Allí encontrarás una guía que explica los siguientes puntos:

1. Highcharts utiliza la librería jQuery o MooTools para varias tareas comunes mediante JavaScript. Por ello, es necesario incluir estos ficheros en la sección HEAD de la página web.
2. Cómo inicializar la librería. Muestra como añadir una función en la sección HEAD para la inicialización de la librería HighCharts.
3. Definir el DIV donde se creará y visualizará el gráfico.
4. Como configurar opciones varias.
5. Cómo procesar y manipular los datos.
6. Otros.

Nota: También, al final de esa guía, hay un enlace con la documentación y referencia de la API.

Requiere jQuery o Mootools.

No hay video tutoriales disponibles para mostrar.