google-visualizationEmpezando con la visualización de google
Observaciones
La visualización de Google proporciona un marco flexible basado en javascript para crear una amplia variedad de gráficos interactivos que se pueden incrustar en las páginas web. Esos tipos de gráficos incluyen:
- Geo Gráficos
- Gráficos de dispersión
- Gráficos de columnas
- Gráfica de barras
- Histogramas
- Gráficos combinados
- Gráficos de área
- Gráficos de área escalonada
- Gráficos de líneas
- Gráficos de burbujas
- Gráficos circulares
- Gráficos de anillos
- Organigramas
- Mapas de arboles
- Mesas
- Líneas de tiempo
- Calibradores
- Gráficos de candelstick
Los gráficos creados con Google Visualization pueden usarse datos de una variedad de fuentes, incluyendo JSON, Google Spreadsheets, así como matrices codificadas en Javascript.
La API de visualización de Google también le permite filtrar los datos, así como vincular varios gráficos a una única fuente de datos para crear tableros interactivos que muestran varias dimensiones de los mismos datos.
Versiones
| Versión | Sintaxis para seleccionar esta versión | Fecha de lanzamiento |
|---|---|---|
| Corriente | google.charts.load('current', {packages: ['corechart']}); | 2016-02-23 |
| 44 | google.charts.load('44', {packages: ['corechart']}); | 2016-02-23 |
| 43 | google.charts.load('43', {packages: ['corechart']}); | 2015-10-02 |
| 42 | google.charts.load('42', {packages: ['corechart']}); | 2015-04-30 |
| 41 | google.charts.load('41', {packages: ['corechart']}); | 2015-02-23 |
Lista completa de versiones anteriores aquí .
Cargando y corriendo
Actualmente, Google tiene dos formas de cargar la biblioteca JS para Google Visualization (también conocido como Google Charts), gstatic loader ( https://www.gstatic.com/charts/loader.js ) y jsapi ( https://www.google.com/jsapi ).
Se recomienda el cargador gstatic porque Google está haciendo la transición desde jsapi al cargador gstatic. Ver referencia de transición
En cualquier caso, primero debe incluir uno de los cargadores con una etiqueta de script , normalmente en el head de su documento, como este:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
Una vez que haya incluido el cargador en su página web, puede usarlo para cargar los paquetes de biblioteca deseados llamando a una función de load .
Para loader.js
google.charts.load('current', {packages: ['corechart']});
Para jsapi
google.load('visualization', '1', {'packages':['corechart']});
Pero después de cargar los paquetes de la biblioteca, debe esperar a que terminen de cargarse antes de utilizarlos. La forma de esperar es configurar una devolución de llamada llamando a una función setOnLoadCallback .
Código de muestra (para el cargador gstatic):
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Group');
data.addColumn('number', 'Gender');
data.addRows([
['Males', 10],
['Females', 5]
]);
var options = {
'title':'Gender distribution',
'width':300,
'height':300};
var chart = new google.visualization.PieChart(
document.getElementById('gender_chart'));
chart.draw(data, options);
}
</script>
HTML:
<div id="gender_chart"></div>
