Crear gráfica con Google Charts

En ocasiones es necesario representar datos de forma más visual y para ello lo más idóneo es utilizar un gráfico, como los que aparecen en Microsoft Word o Microsoft Excel. Bien, en este pequeño tutorial vas a aprender a crear una gráfica con Google Charts de forma muy sencilla.

Google Charts es una herramienta creada para desarrolladores web con el fin de que puedan incrustar gráficos en sus páginas. Ofrece una gran variedad de gráficos. Puedes acceder a la web oficial en: https://developers.google.com/chart.

Crear proyecto Java Dinámico

Crea un proyecto web dinámico Java en Eclipse (en mi caso lo he llamado ProjectGoogleChart) y crea un nuevo fichero html llamado index.html.

No te preocupes por la ubicación. Eclipse es lo suficientemente listo y lo creará donde debe, en la carpeta WebContent.

Ahora incluiremos las librerías y enlaces necesarios. Como buena práctica, se suelen acceder a los enlaces oficiales, descargar el código JavaScript y alojarlo en nuestro proyecto. Yo en este caso, incluiré los enlaces directamente, tanto del fichero JavaScript de Google como del mio propio, donde desarrollaré mi código.

En mi caso he elegido el tipo de gráfico Labeling columns.

Labeling columns
Ejemplo de Labeling columns.

A continuación, se muestra el contenido del fichero index.html, donde se muestran los enlaces y el elemento div que representará nuestro gráfico:

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Mi primer gráfico con Google Charts</title>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="js/myCharts.js"></script>

</head>
<body>

	<div id="columnchart_values" style="width: 900px; height: 300px;"></div>

</body>
</html>

Crear fichero javascript

Crea un fichero javascript dentro de un directorio llamado js. Lo vamos a llamar myCharts.js.

Google Charts

El contenido del fichero será el siguiente:

myCharts.js

google.charts.load("current", {	packages : [ 'corechart' ]});

google.charts.setOnLoadCallback(drawChart);
function drawChart() {
	
	//Aquí se representa el nombre de columna, el dato y el color
	var data = google.visualization.arrayToDataTable([ 
				[ "Element", "Euros", { role : "style"} ], 
				[ "2014", 12820756, "pink" ], 
				[ "2015", 13171807, "silver" ],
				[ "2016", 13259769, "gold" ],
				[ "2017", 14063444, "blue" ],
				[ "2018", 14945692, "green" ],]);

	var view = new google.visualization.DataView(data);
	view.setColumns(
		[ 0, 1, {
			calc : "stringify",
			sourceColumn : 1,
			type : "string",
			role : "annotation"
		}, 2 ]);

	//Aquí se añade el título y tamaño del gráfico
	var options = {
		title : "Gastos internos en I+D en Euros.",
		width : 1000,
		height : 700,
		bar : {	groupWidth : "95%" },
		legend : { position : "none" },
	};
	
	var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
	chart.draw(view, options);
}

function getValueAt(column, dataTable, row) {
	return dataTable.getFormattedValue(row, column);
}

Ejecutar código y ver el resultado

Lo primero es levantar la aplicación. Para ello, selecciona el proyecto y ejecútalo sobre un servidor Apache previamente configurado. Si no sabes como configurarlo, puedes ver el tutorial Configurar Proyecto web y ver la sección Añadir Servidor Apache Tomcat a Eclipse.

Una vez arrancado el servidor, la dirección de la aplicación es: http://localhost:8080/ProjectGoogleChart/

Google Charts

Y esto es todo!! Como ves es muy fácil utilizar esta herramienta o librería JavaScript que ofrece Google. Hay muchos tipos de gráficos y te animo a que los pongas en práctica.

Espero que te haya sido de utilidad y nos vemos en el próximo tutorial.

Comparte si te ha gustado!!

También te podría gustar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *