Create graph with Google Charts

by Rosa · Published April 25, 2020 · Updated February 15, 2021

Sometimes it is necessary to represent data in a more visual way and for this the most ideal is to use a graph, such as those that appear in Microsoft Word or Microsoft Excel. Well, in this little tutorial you will learn how to create a graph with Google Charts in a very simple way.

What is Google Charts? It is a tool created for web developers so that they can embed graphics on their pages. It offers a wide variety of graphics. You can access the official website at: https://developers.google.com/chart.

Create Dynamic Java project

Create a dynamic Java web project in Eclipse (in my case I have called it ProjectGoogleChart) and create a new html file called index.html.

Don’t worry about the location. Eclipse is smart enough and will create it where it should, in the folder WebContent.

Now, We will include the necessary libraries and links. As a good practice, you generally access the official links, download the JavaScript code and host it in our project. In this case, I’ll include the links directly: Google’s JavaScript file and mine, where I’ll develop my code.

In my case I have chosen the type of graph Labeling columns.

Next, the content of the index.html file is shown, where the links and the div element that will represent our graphic are shown:

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>

Create file javascript

Create a javascript file inside a directory called js. We are going to call it myCharts.js.

The content of the file will be as follows:

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

The first thing is to lift the application. To do this, select the project and run it on a previously configured Apache server. If you don’t know how to configure it, you can see the tutorial Configurar Proyecto web and see the section Add Apache Tomcat Server to Eclipse.

Once the server is started, the application address is: http://localhost:8080/ProjectGoogleChart/

And that’s all!! As you can see, it is very easy to use this JavaScript tool or library offered by Google. There are many types of graphics and I encourage you to put them into practice.

I hope it has been useful to you and see you in the next tutorial.

Share if you liked it !!