Vamos a una gráfica de lineas usando el plugin o librería Highcharts, una de las librerías mas útiles y famosas para crear gráficas web.

Que es Highcharts?

Highcharts es una librería en javascript que sirve para crear gráficas web, nativas, responsive y sobre todo de manera fácil.

Sitio web: http://www.highcharts.com/

Highcharts es gratis y libre para uso personal o sin fines de lucro, en otro caso hay que pagar una licencia.

Crear una gráfica de lineas

Para crear una gráfica de lineas o cualquier gráfica con highcharts, lo primero que tenemos que hacer es agregar el archivo highcharts.js a nuestro documento html.

Highcharts no requiere de ninguna otra librería como jquery.

Después tenemos que crear un contenedor para nuestra gráfica un simple <div id=’chart’></div>

Ahora a continuación dejo el código para crear la grafica de linea.

Highcharts.chart(‘chart’, {
title: {
text: ‘Grafica de Ejemplo’
},
subtitle: {
text: ‘Powered by Evilnapsis.com’
},
yAxis: {
title: {
text: ‘Valor Y’
}
},
legend: {
layout: ‘vertical’,
align: ‘right’,
verticalAlign: ‘middle’
},
xAxis:{
categories: ["1/Ene/2017","2/Ene/2017","3/Ene/2017","4/Ene/2017","5/Ene/2017","6/Ene/2017","7/Ene/2017","8/Ene/2017"],
},
series: [{
name: ‘2017’,
data: [1087, 1061, 660, 774, 812, 702, 516, 956],
color:’#f50′
}] });

Parámetros

• title: El titulo de la gráfica
• subtitble: El subtitulo de la gráfica
• yAxis: las opciones para el eje Y, por ejemplo el titulo
• legend: Opciones para mostrar las leyendas o etiquetas, la alineación, etc.
• xAxis: El parámetro categories, sirve para asignar un valor o etiqueta a los valores del eje X
• series: El conjunto de valores que conforman la gráfica

Descarga

A continuación les dejo código fuente + recursos de mi ejemplo.

Link de descarga: https://drive.google.com/open?id=0B4VwLG0Dpi3tVHk5d3pfNmp4UTA

Espero les sirva este ejemplo.

Nos leemos en el próximo articulo.