Crear una grafica de lineas con la libreria Highcharts y Javascript
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.
[code language=”javascript”]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.
[sociallocker]Link de descarga: https://drive.google.com/open?id=0B4VwLG0Dpi3tVHk5d3pfNmp4UTA
[/sociallocker]Espero les sirva este ejemplo.
Nos leemos en el próximo articulo.