Gráficas en páginas web con «Google Charts»

El proyecto de este post lo puedes descargar pulsando AQUI.

Hace tiempo hablamos en la entrada de "Gráficas en páginas web con Highcharts" de como crear gráficas en Javascript  para páginas web.  “Highcharts JS” ofrece sin duda un API muy bueno para la creación de gráficas, pero tiene el inconveniente de que son de pago y las que son gratis aparecen en las gráficas el icono de Highcharts y un enlace a su web.

Como no podía ser de otra manera, la gente de Google ha creado un API  para crear infinidad de gráficas y a parte tiene la ventaja de que son mucho más fáciles de entender que las de Highcharts. En el siguiente enlace: Google Charts (Google for Developers), podéis acceder a la documentación de este API en la que también vienen muchos ejemplos de como hacer estas gráficas.

En esta web ya hemos empezado a utilizar en la sección de visitas este tipo de gráficas (cuyos datos los obtenemos de google analytics) y en esta entrada vamos a contar como las hemos hecho. Como digo en la documentación de google viene muy bien explicado todo, así que si queréis hacer cualquier otro tipo de gráfica no tenéis más que seguir sus instrucciones.

Vamos a empezar con una gráfica lineal que es la que mostramos a continuación en la que se muestra el número de vistas, visitantes únicos y páginas vistas que tienen nuestra web hasta la fecha de realización de esta entrada:

Para hacer esta gráfica lo primero que vamos a mostrar es el contenido de Javascript. En el nos vamos a crear una función (dibujarGraficaVistas2013) en la que pondremos en un array los datos de las visitas y en la variable «options», le pondremos las opciones que tenga la gráfica. En este caso le hemos puesto que los puntos tengan un tamaño de ‘5’, y les hemos puesto nombre a la ordenada y abscisa. Le podíamos haber puesto alguna otra opción como el título, pero mirad en la documentación para poner más opciones. Una vez hecho esto le vamos a decir que nos pinte la gráfica en el «<div>» llamado «graficaVisitas2013_div» del html.

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(dibujarGraficaVistas2013);

 function dibujarGraficaVistas2013() {
 var visitas2013 = google.visualization.arrayToDataTable([
 ['Mes', 'Visitas', 'Visitantes Únicos','Páginas Vistas' ],
 ['Avg2012', 1161, 910, 2053 ],
 ['Ene13', 4505, 3655, 6482 ],
 ['Feb13', 8090, 6400, 11503 ],
 ['Mar13', 7493, 5818, 11937 ],
 ['Abr13', 7048, 5581, 9751 ],
 ['May13', 11408, 8529, 16061 ],
 ['Jun13', 10886, 8261, 15643 ],
 ['Jul13', 11095, 8372, 16258 ],
 ['Ago13', 12900, 9848, 18585 ],
 ['Sep13', 15428, 11805, 21873 ],
 ['Oct13', 19978, 15455, 27169 ],
 ['Nov13', 20159, 15531, 27470 ],
 ['Dic13', 15093, 11358, 20863 ],
 ['Ene14', 16311, 12036, 24678 ],
 ['Feb14', 20572, 15450, 29638 ],
 ['Mar14', 25625, 19129, 36395 ],
 ['Abr14', 27106, 20059, 37410 ],
 ['May14', 34810, 25617, 48192 ],
 ['Jun14', 35255, 25868, 49291 ],
 ['Jul14', 37605, 27251, 53759 ]
 ]);

 var options = {
 legend: { position: 'bottom' },
 pointSize: 5,
 hAxis: {title: 'Meses', titleTextStyle: {color: '#0000FF'}},
 vAxis: {title: 'Número de Visitas', titleTextStyle: {color: '#0000FF'}},
 curveType: 'function',
 };

 var graficaVisitas2013 = new google.visualization.LineChart(document.getElementById('graficaVisitas2013_div'));
 graficaVisitas2013.draw(visitas2013, options);
 }

Ahora habrá que pintar la gráfica en el html. Para ello necesitaremos importar la librería de google que lo haremos de la siguiente forma en el "head":

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Una vez hecho esto ya podemos pintar la gráfica en el "div" correspondiente:

<div id="graficaVisitas2013_div"style="width: 1000px; height: 500px;"></div>

Para que veáis como queda todo el html, lo mostramos a continuación:

<html>
 <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
   <script type="text/javascript" src="https://www.google.com/jsapi"></script>
   <script src="charts.js"></script>
 </head>
 <body>
   <div align="center">
     <div id="graficaVisitas2013_div" style="width: 1000px; height: 500px;"></div>
   </div>
 </body>
</html>

Otra de las gráficas que también teníamos eran las gráficas circulares. Estas las llaman «Pie Chart» y la que vamos a hacer es la siguiente:

Para hacer esta gráfica no necesitamos calcular nosotros el porcentaje (ya lo hace el API), solo tenemos que ponerle los valores y listo. En Javascript sería el siguiente:

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(porcentajeVisitasPaises);
 function porcentajeVisitasPaises() {
 var porcentajeVisitas = google.visualization.arrayToDataTable([
 ['Pais', 'Visitas'],
 ['España', 111740],    ['Mexico', 75735],
 ['Colombia', 36998],   ['Peru', 24517], 
 ['Chile', 19345],      ['Argentina', 18872],
 ['Ecuador', 13148],    ['Venezuela', 9827], 
 ['Bolivia', 6799],     ['Costa Rica', 5300], 
 ['Guatemala', 4857],   ['United States', 4042],
 ['Otros', 26330],
 ]);

 var options = {
 title: 'Porcentaje de vistas por paises'
 };

 var porVisitasChart = new google.visualization.PieChart(document.getElementById('porcentajePaises_div'));
 porVisitasChart.draw(porcentajeVisitas, options);
 }

El html para cargar esta web sería la siguiente

<div id="porcentajePaises_div"></div>

Otras gráficas que están muy chulas son las «Geochart» que muestran información a partir de mapas. En la siguiente gráfica vemos el número de vistas que tenemos por países (con más de 10 visitas) en todo el mundo. A esta gráfica le damos un rango de colores y en función del número de vistas, pintará a los países de un color o de otro:

Para hacer esta gráfica tenemos el siguiente código Javascript:

// Mapa
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(visitasPorPaisesMap);

 function visitasPorPaisesMap() {
 var visitas = google.visualization.arrayToDataTable([
 ['Pais', 'Visitas'],
 ['España', 111740], ['Mexico', 75735], ['Colombia', 36998],
 ['Peru', 24517], ['Chile', 19345], ['Argentina', 18872],
 ['Ecuador', 13148], ['Venezuela', 9827], ['Bolivia', 6799],
 ['Costa Rica', 5300], ['Guatemala', 4857], ['Estados Unidos', 4042],
 ['Uruguay', 3221], ['El Salvador', 3201], ['Republica Dominicana', 2806],
 ['Paraguay', 2510], ['Nicaragua', 1546], ['Honduras', 1436],
 ['Panama', 1384], ['Brazil', 1245], ['Cuba', 961],
 ['Alemania', 939], ['India', 620], ['Francia', 618],
 ['United Kingdom', 598], ['Italia', 286], ['Puerto Rico', 240],
 ['Canada', 218], ['Portugal', 197], ['Suiza', 147],
 ['Indonesia', 147], ['Irlanda', 136], ['Polonia', 113],
 ['Australia', 103], ['Belgium', 99], ['Belgica', 98],
 ['Japón', 94], ['Andorra', 91], ['Marruecos', 72],
 ['Suecia' , 72], ['Russia' , 63], ['Noruega' , 59],
 ['Austria', 49], ['Turkia' , 48], ['Rumania', 43],
 ['Finlandia', 42], ['Ucrania', 40], ['Republica Checa', 39],
 ['Dinamarca', 35], ['China', 31], ['Korea del sur', 30],
 ['Tunisia', 30], ['Taiwan' , 29], ['Greece' , 26],
 ['Israel' , 25], ['Vietnam', 25], ['Pakistan', 24],
 ['Angola' , 23], ['Thailand', 21], ['Luxenburgo' , 20],
 ['Emiratos Arabes', 18], ['Algeria', 18], ['Saudi Arabia', 18],
 ['Sri Lanka', 16], ['Belarus', 14], ['Iran', 14],
 ['Malaysia', 13], ['Serbia' , 13], ['Estonia', 11],
 ['Slovakia', 11], ['Hungria', 10], ['Malta', 10],
 
 ]);

 var options = {
 colorAxis: {colors: ['#FFEDED', '#3399ff']},
 };

 var visitasPorPaises = new google.visualization.GeoChart(document.getElementById('paises_div'));
 visitasPorPaises.draw(visitas, options);
 };

En el html lo cargamos de la siguiente forma:

<div id="paises_div"></div>

Por último vamos a mostrar una gráfica que solo incluye la región de España, pero podría incluir cualquier otro país del mundo. La gráfica sería la siguiente y nos indica el número de vistas que tenemos en determinadas regiones de España:

En el javascript le vamos a indicar el número de vistas por región y ya se encarga el propio API de saber dónde está situada cada región:

google.load('visualization', '1', {'packages': ['geochart']});
 google.setOnLoadCallback(puntosMapSpain);

 function puntosMapSpain() {
 var visitasPorRegion = google.visualization.arrayToDataTable([
 ['Ciudad', 'Visitas'],
 ['Madrid', 28280], ['Barcelona', 9055],
 ['Valencia', 4442], ['Sevilla', 4323],
 ['Malaga', 2523], ['Zaragoza', 2417],
 ['Vigo', 1826], ['Granada', 1792],
 ['A Coruna', 1741], ['Murcia', 1670],
 ['Bilbao', 1650], ['Valladolid', 1553],
 ['Palma de Mallorca', 1526], ['Las Palmas de Gran Canaria', 1424],
 ['Pamplona', 1388], ['Alicante', 1270],
 ['Oviedo', 1173], ['Santa Cruz de Tenerife', 1133],
 ['Alcobendas', 1124], ['Salamanca', 989],
 ['Leon', 942], ['Cordoba', 926],
 ['San Sebastian', 917], ['Girona', 906],
 ['Santiago de Compostela', 852], ['Almeria', 842],
 ['Toledo', 838], ['Santander', 781],
 ['Tarragona', 741], ['Jaen', 734],
 ['Huelva', 687], ['Gijon', 682],
 ['Albacete', 679], ['Lleida', 679],
 ['Castellon de la Plana', 640], ['Burgos', 612],
 ['Vitoria-Gasteiz', 569], ['Ciudad Real', 566],
 ['Getafe', 561], ['Benidorm', 94],
 ['Plasencia', 72]
 ]);

 var options = {
 region: 'ES',
 displayMode: 'markers',
 colorAxis: {colors: ['red', 'blue']}
 };

 var regionesChart = new google.visualization.GeoChart(document.getElementById('regiones_div'));
 regionesChart.draw(visitasPorRegion, options);
 };

Para cargarlo en el html lo ponemos de la siguiente forma:

<div id="regiones_div"></div>

Este API de gráficas de google tiene muchas opciones y podríamos seguir incluyendo más gráficas, pero hemos mostrado solamente 4 de ellas para poner algunos ejemplos. En función de vuestras necesidades podéis customizarlas  a vuestro antojo. En resumen este API está muy bien y es muy sencillo de utilizar a parte de ser gratuito.