CanvasXpress, una interesante librería para la creación de gráficos

CanvasXpress es una librería creada en javascript para la creación de gráficos, pero tiene la peculiaridad de que para la creación de estos gráficos, utiliza la etiqueta “canvas” de HTML 5.

La librería soporta gran cantidad de tipos de gráficos, como son:

  • Gráficos de barras.
  • Gráficas lineales.
  • Combinación de gráficos lineales y de barras.
  • Boxplots
  • Dotplots
  • ….

A la hora de crear el gráfico, hay que indicarle el tipo de gráfico que queremos que represente, un vector con las variables que forman parte del gráfico y un vector con los datos que formarán el gráfico.

Luego dependiendo de cada tipo de gráfico, estos tendrán unas u otras propiedades.

La sintaxis del método tiene la siguiente estructura:

var cX = new CanvasXpress(target, data, options, events);


Un ejemplo de utilización para la creación de un diagrama de barras, sería el siguiente.

new CanvasXpress('canvas',
					 {y: {vars: ['Gene1',  'Gene2', 'Gene3',  'Gene4', 'Gene5',  'Gene6'],
						  smps: ['Smp1',   'Smp2',  'Smp3',   'Smp4',  'Smp5',   'Smp6',  'Smp7',   'Smp8'],
					  desc: ['Intensity'],
						  data: [[10, 12, 3, 4, 100, 73, 42, 64],
								 [12, 4, 60, 5, 24, 14, 32, 13],
								 [7, 12, 20, 13, 49, 52, 42, 92],
						 [21, 10, 30, 8, 65, 166, 47, 58],
								 [15, 14, 100, 5, 34, 30, 82, 51],
								 [100, 82, 73, 4, 3, 4, 5, 2]]}},
					 {graphType: 'Bar',
					  graphOrientation: 'vertical',
					  smpHairline: false,
					  autoExtend: true});


El resultado sería algo como la siguiente imagen.

canvas xpress libreria para generar graficos

Para más información, pueden visitar su página.
COMPARTE ESTA NOTICIA

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +