Cargando



Gráficos interactivos con JavaScript y Highcharts

Highcharts es una librería escrita en HTML5 y JavaScript puro, la misma nos permite integrar gráficos intuitivos e interactivos a nuestro sitio web, la misma soporta gráficos lineales, de área, de barras, tortas entre otros.


jul 07 2013 13:26
Profesional
jul 07 2013 13:28
Highcharts es una librería escrita en HTML5 y Javascript puro:


graficos-interactivos-highcharts.jpg


Veamos como funciona, como está estructurado y como implementarlo en nuestro sitio web.

Estructura de directorios
Primero nos descargamos el zip que contiene nuestra librería, lo descomprimos y podemos ver nuestro directorio de archivos y como está estructurado el mismo.


graficos-interactivos-highcharts-2.jpg


Veamos que contiene cada directorio y para que es usado:
  • index.html: Este la página HTML de prueba, con esta se pueden hacer pruebas y visualizar las opciones por defecto.
  • examples: Esta carpeta contiene todos los código fuente de los ejemplos.
  • graphics: Esta carpeta contiene las imágenes utilizadas en los ejemplos.
  • exporting-server: Este es un directorio que contiene la función del lado del servidor para exportar los gráficos a una imagen.
  • js: Este es el directorio principal de Highcharts. Cada archivo Javascript tiene dos sufijos, el primero .src.js es quién contiene el código fuente con comentarios en el mismo y el otro .js es la versión minimizada del mismo.
  • adapters: Aquí están los complementos para poder utilizar Mootools o Prototype como frameworks, dentro de este directorio esta lo siguiente:
  • exporting.js: este archivo nos da funciones para exportar e imprimir.
  • themes: Esta carpeta contiene una serie de archivos Javascript pre construidos con ajustes tales como color de fondo, estilos, entre otros. Podemos cargar uno de estos archivos en los gráficos para diferentes estilos.

Viendo como funciona y como esta organizada esta librería pasemos a un ejemplo práctico de como implementar Highcharts en nuestro sitio web.


Primero incluimos las librerías del Highcharts, así como las librerías de jQuery para funcionalidad extra:

<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Highcharts First Example</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"src="Highcharts-2.2.2/js/highcharts.js"></script>

El gráfico de curvas se define en la especificación de el objeto que contiene todas las propiedades y las series de la data.

var chart = new Highcharts.Chart({
chart: {
...
},
title: '...'
...
});

Una vez este objeto es creado , el gráfico es desplegado en el navegador, dentro de este objeto hay una serie opciones que explicaremos a continuación.

La instrucción renderTo le dice a Highcharts que despliegue un gráfico en el HTML, específicamente en el <div> con el id=”container”. La opción type define el tipo de gráfico, las opciones pueden ser: área, line, spline,etc. En este ejemplo usaremos spline.

chart: {
renderTo: 'container',
type: 'spline'
}


Seguido de esto fijamos un título y un subtítulo, el cual aparecerá en la parte superior del gráfico.

title: {
text: 'Web browsers ... '
},
subtitle: {
text: 'From 2008 to present'
},

En la opción de las categorías en la propiedad del xAxis contiene un arreglo con las etiquetas de cada entrada de la data y con tickIntervals separamos la forma en que estas etiquetas se imprimen.

xAxis: {
categories: [ 'Jan 2008', 'Feb', .... ],
tickInterval: 3
},

Las opciones en la propiedad yAxis nos permiten asignar el título de ese eje y fijar el valor mínimo y máximo en los cuales limitaremos nuestro gráfico.

yAxis: {
title: {
text: 'Percentage %'
},
min: 0
},

La propiedad de plotOptions es quien controla de que forma cada serie de datos será desplegada dependiendo del tipo de gráfico.

plotOptions: {
series: {
lineWidth: 2
}
},


La propiedad series es el centro de todo el objeto de configuración que define la data que alimentará al gráfico.

series: [{
name: 'Internet Explorer',
data: [54.7, 54.7, 53.9, 54.8, 54.4, ... ]
}, {
name: 'FireFox',
data: [36.4, 36.5, 37.0, 39.1, 39.8, ... ]
}, {


Ahora con todas las partes del código explicado veamos como se vería en nuestro navegador.


graficos-interactivos-highcharts-3.jpg


Por último les dejo el código completo para que puedan probarlo por ustedes mismos y sin olvidar que se puede personalizar el mismo para adaptarlo a cualquier necesidad.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Highcharts First Example</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.
min.js"></script>
<script type="text/javascript"
src="Highcharts-2.2.2/js/highcharts.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline'
},
title: {
text: 'Web browsers statistics'
},
subtitle: {
text: 'From 2008 to present'
},
xAxis: {
categories: [ 'Jan 2008', 'Feb', .... ],
tickInterval: 3
},
yAxis: {
title: {
text: 'Percentage %'
},
min: 0
},
plotOptions: {
series: {
lineWidth: 2
}
},
series: [{
name: 'Internet Explorer',
data: [54.7, 54.7, 53.9, 54.8, 54.4, ... ]
}, {
name: 'FireFox',
data: [36.4, 36.5, 37.0, 39.1, 39.8, ... ]
}, {
// Chrome started until late 2008
name: 'Chrome',
data: [ null, null, null, null, null, null,
null, null, 3.1, 3.0, 3.1, 3.6, ... ]
}, {
name: 'Safari',
data: [ 1.9, 2.0, 2.1, 2.2, 2.4, 2.6, ... ]
}, {
name: 'Opera',
[i]Chapter 1[/i]
[ 25 ]
data: [ 1.4, 1.4, 1.4, 1.4, 1.5, 1.7, ... ]
}]
});
});
</script>
</head>
<body>
<div>
<!-- Highcharts rendering takes place inside this DIV -->
<div id="container"></div>
</div>
</body>
</html>

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X