HighCharts: Gráficas interactivas con Javascript


En caso de que requieras integrar gráficas a alguno de tus proyectos traigo para tí un pequeño tutorial de como usar HighCharts, la cual es una librería de Javascript para crear gráficas interactivas.

Un gran punto a favor de esta librería es que su documentación es muy completa, está bien organizada y trae muchos ejemplos, y por si fuera poco puedes ver los ejemplos en jsfiddle y modificarlos a tu gusto antes de utilizarlos.

Para utilizar HighCharts deberás visitar su página y descargar el .zip que contiene los archivos necesarios para la creación de gráficas, así como incluir en tus headers el uso de jQuery, MooTools ó Prototype, en este caso te mostraré como utilizarlo con jQuery.

Una vez que ya tienes el .zip deberás descomprimirlo en la carpeta de tu proyecto y hacer lo siguiente:

1. Agregar en tus headers highchart (highcharts.js y exporting.js), así como jQuery.

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

2. Tienes muchas opciones de gráficas, para este vamos a crear uno de puntos.

3. Para crear una gráfica únicamente necesitas hacer la llamada al método Highcharts.Chart, configurar sus opciones e indicarle en que contenedor deseas grafique. Es decir,
var chart = new Highcharts.Chart({...});

4. La creación de tu gráfica ya sea que lo hagas cuando se crea tu archivo, o en algún evento; para este ejemplo será cuando se cargue el documento.

5. La configuración de tu gráfica se compone de al menos los siguientes elementos:
  • chart: Te permite indicar que tipo de gráfica deseas (type) y donde la vas a mostrar (renderTo)
  • title: Título de tu gráfica
  • xAxis: Tus valores en X (categories)
  • yAxis: Tus valores en Y (title)
  • series: Contiene el nombre de la serie (name) y un arreglo de valores (data)

6. No olvides agregar tu contenedor con el mismo nombre que indicas en chart.renderTo

El código del ejemplo lo puedes bajar de aquí.

En un siguiente post veremos como agregar datos dinámicos mediante consultas con PHP.

Anuncios

Acerca de silvercorp

Blog personal de Ye§i creado el 18/Ag/06 enfocado al diseño gráfico, tecnología y programación.

Publicado el marzo 19, 2013 en Programación. Añade a favoritos el enlace permanente. 1 comentario.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: