Guía Google Charts

En este documento es una gua para aprender a utilizar los servicios de Google Charts desde una
pgina web HTML utilizando Javascript.
Google Charts proporciona una forma perfecta para visualizar los datos en nuestra pgina web.
Desde los grficos de lneas simples a complejos mapas de rbol jerrquicos, la galera
proporciona un gran nmero de tipos de grficos listos para utilizar.
La forma ms comn del uso de grficos de Google es con JavaScript, que se incluye en nuestra
pgina web.
Los grficos se construyen en sencillos pasos:
1. Cargamos algunas bibliotecas de grficos de Google.

2. Generamos los datos para el grfico.
3. Personalizamos nuestro grfico.
4. Creamos un objeto grfico con un identificador.
5. Creamos un <div> en nuestro html para mostrar el grfico generado.
1
Tipos de grficos
Aqu se muestran algunos ejemplos de grficos que podemos generar con Google Charts
Grfico de barras Grfico de torta Gauges Tablas
Grfico de burbujas Lnea de tiempo Histograma Mapas
EJEMPLO DE UTILIZACIN DE GOOGLE CHARTS EN NUESTRA PGINA WEB
En primer lugar, en nuestro archivo html, dentro de la etiqueta <head>, incluimos el script que
corresponde a la biblioteca de charts de google.
Adems incluimos nuestro archivo js, que ser utilizado para cargar el grfico en pantalla.
<html>
<head>
<title>Demo Google Chart</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
Nota: es importante que los archivos .js se incluyan en este orden para que todo funcione
correctamente.
Luego en el archivo script.js, debemos incluir cdigo javascript para generar nuestro grfico.
Este primer bloque de cdigo debe incluirse para cualquier tipo de grfico, por lo que debemos
incluirlo siempre en nuestro script (una vez).
2
//Cdigo que permite cargar los paquetes de charts en nuestro proyecto
google.load('visualization', '1.0', {'packages':['corechart']});
//Establecemos el grfico debe dibujarse al cargar google charts API

google.setOnLoadCallback(drawChart);
Luego, definimos la funcin que va a cargar los datos a nuestro grfico y lo va a dibujar en el div
que hemos creado.
function drawChart() {
var data = new google.visualization.DataTable();
//Agregamos las columnas (slo para grficos de torta)

data.addColumn('string', 'Carrera');
data.addColumn('number', 'Estudiantes graduados');
//Agregamos las filas (datos) que corresponden a cada columna

data.addRows([
['Electrnica', 300],
['Sistemas', 185],
['Biotecnologa', 87],
['Telecomunicaciones', 58],
]);
//Establecemos parmetros de configuracin como el ttulo del grfico y su tamao

var options = {'title':'Distribucin de graduados de la FI en 2015',
'width':800, 'height':500};
//Creamos el grfico de torta y lo dibujamos en el div creado

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Si abrimos el documento html en el

navegador, visualizaremos el
siguiente grfico.
3
Ejemplo de grfico de barras
Si asumimos ya incluidos los scripts anteriormente mencionados, para generar un grfico de

barras, en el script incluimos el siguiente cdigo en nuestro archivo javascript:
google.load('visualization', '1.0', {'packages':['corechart']});

google.setOnLoadCallback(drawChart);
function drawChart() {
/* Establecemos los datos a representar en el grfico. Generamos una matriz con varias
filas: la primera se encuentran los encabezados y las siguientes seran las disciplinas
(arrays) y sus correspondientes cantidades de torneos. */
var data = google.visualization.arrayToDataTable([
['Disciplina', 'Torneos ganados'],
['Tenis', 3],
['Basketball', 9],
['Futsal', 12],
['Natacin', 5],
]);
//Establecemos parmetros de configuracin como el ttulo del grfico y su tamao

var options = {
title: "Cantidad de torneos ganados en cada disciplina deportiva",
width: 600,
height: 400,
legend: { position: "none" },
};
//Creamos el grfico de barras y lo dibujamos en el div creado

var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
El grfico generado por el cdigo anterior, es similar a la siguiente imagen:

Guía Google Charts

Cargado por

Copyright:

Formatos disponibles

Guía Google Charts

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guía Google Charts

Cargado por

Copyright:

Formatos disponibles

En este documento es una gua para aprender a utilizar los servicios de Google Charts desde una

pgina web HTML utilizando Javascript.

Los grficos se construyen en sencillos pasos:

1. Cargamos algunas bibliotecas de grficos de Google.

Grfico de barras Grfico de torta Gauges Tablas

Grfico de burbujas Lnea de tiempo Histograma Mapas

EJEMPLO DE UTILIZACIN DE GOOGLE CHARTS EN NUESTRA PGINA WEB

//Establecemos el grfico debe dibujarse al cargar google charts API

var data = new google.visualization.DataTable();

//Agregamos las columnas (slo para grficos de torta)

//Agregamos las filas (datos) que corresponden a cada columna

//Establecemos parmetros de configuracin como el ttulo del grfico y su tamao

//Creamos el grfico de torta y lo dibujamos en el div creado

Si abrimos el documento html en el

Si asumimos ya incluidos los scripts anteriormente mencionados, para generar un grfico de

google.load('visualization', '1.0', {'packages':['corechart']});

//Establecemos parmetros de configuracin como el ttulo del grfico y su tamao

//Creamos el grfico de barras y lo dibujamos en el div creado

El grfico generado por el cdigo anterior, es similar a la siguiente imagen:

También podría gustarte