HighCharts, gráficas con JavaScript

- 06/05/2015

2 minutos de lectura

La necesidad de construir gráficas con JavaScript cada día aumenta más y es importante poder elegir un framework sencillo y a la vez potente para poder realizar estas tareas con seguridad.

HighCharts es uno de los frameworks más conocidos del sector. Entre sus características principales destacan:

Javascript: Está creado con JavaScript que es uno de los lenguajes más utilizados por parte de los desarrolladores.
Compatibilidad: La compatibilidad es máxima ya que soporta incluso Explorer 6, adecuándose a todos los navegadores y soportando un fuerte cross browsing.
Tipos de Gráficas : Otra de las cosas que más destaca de HighChart es el amplio soporte de gráficas de todo tipo que tienen permitiéndonos abordar la mayor parte de las casuísticas que nos encontremos.
Facilidad de uso: Por último destacar es que un framework muy sencillo de utilizar con el cual el desarrollador en poco tiempo podrá ser productivo.

HighCharts un ejemplo básico

Trabajar con HighCharts es muy fácil. Lo primero que tenemos que hacer es instalar jQuery ya que el framework depende de él. Podríamos haber usado también Mootools o Prototype. Hecho esto podemos utilizar alguno de los códigos que viene de ejemplo en la librería para construir nuestra primera gráfica.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

<script src="jquery-1.11.1.js" type="text/javascript"></script>

<script src="highcharts.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$('#contenedor').highcharts({

title: {

text: 'Monthly Average Temperature',

x: -20 //center

},

subtitle: {

text: 'Source: WorldClimate.com',

x: -20

},

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

},

yAxis: {

title: {

text: 'Temperature (°C)'

},

plotLines: [{

value: 0,

width: 1,

color: '#808080'

}]

},

tooltip: {

valueSuffix: '°C'

},

legend: {

layout: 'vertical',

align: 'right',

verticalAlign: 'middle',

borderWidth: 0

},

series: [{

name: 'Tokyo',

data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

}, {

name: 'New York',

data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

}, {

name: 'Berlin',

data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

}, {

name: 'London',

data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

}]

});

</script>

<div id="contenedor">

</div>

Hemos rellenado título, subtítulo y asignado varias series de datos, el framework se encargará de dibujar la gráfica en el contenedor asignado sin que tengamos que realizar mayor esfuerzo.