Google Charts, gráficas vistosas en tu Web

Cuando en una aplicación Web necesitamos crear algún tipo de gráfico estadístico, o de otro tipo, disponemos de varios frameworks que nos pueden hacer la vida más fácil. Google, como no podía ser de otra manera, nos ofrece su propio framework para este menester: Google Charts.

Aparte de las funcionalidad básica de presentar tablas personalizadas, tenemos otros tipos de gráficos interesantes:

Gráficos de barras
Gráficos de cajas
Candlestick
Gráficos compuestos
Iconos dinámicos
Gráficos de Línea
Mapas
Diagramas circulares
Etc...

Vamos a ver un ejemplo sencillo de presentación de una gráfica en Google Charts, usando los gráficos de barras. Escribiremos un sencillo código con el cual podremos ver el resultado que nos porporciona este producto.

El código completo del ejemplo es el siguiente:

	<html>
	<head>
	<title>Mi primer ejemplo en Google Charts</title>
	</head>

	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script>
	google.load("visualization", "1", {packages:["corechart"]});
	google.setOnLoadCallback(dibujarGrafico);
	function dibujarGrafico() {
	// Tabla de datos: valores y etiquetas de la gráfica
	var data = google.visualization.arrayToDataTable([
	['Texto', 'Valor numérico'],
	['Texto1', 20.21],
	['Texto2', 4.28],
	['Texto3', 17.26],
	['Texto4', 10.25]
	]);
	var options = {
	title: 'Nuestro primer ejemplo con Google Charts'
	}
	// Dibujar el gráfico
	new google.visualization.ColumnChart(
	//ColumnChart sería el tipo de gráfico a dibujar
	document.getElementById('GraficoGoogleChart-ejemplo-1')
	).draw(data, options);
	}
	</script>
	<body>
	Comenzando con Google Charts....
	<div id="GraficoGoogleChart-ejemplo-1" style="width: 800px; height: 600px">
	</div>
	</body>
	</html>