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.

Espero les sirva este ejemplo.

Nos leemos en el próximo articulo.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.