Google Charts a través de su API ofrece la posibilidad de visualizar datos en tu sitio web. La galería gráfica provee diferentes tipos de gráficos listos para su uso: desde gráficos de barras o líneas simples a mapas de árboles jerárquicos complejos.
Los gráficos se representan mediante la tecnología HTML5 / SVG (Scalable Vector Graphics) para garantizar la compatibilidad entre navegadores (incluyendo VML o Vector Markup Language para versiones anteriores de Internet Explorer) y la portabilidad entre plataformas para iPhones, iPads y Android. Los usuarios no tendremos que instalar plugins o software adicional, sólo es necesario disponer de un navegador web.
La forma común de mostrar los gráficos en tu sitio web es mediante la inserción de código javascript en un documento html. Sólo tenemos que indicar los parámetros correspondientes a cada gráfico a utilizar.
- Gráfico de Líneas (Line Chart)
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Año', 'Ingresos', 'Gastos'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Balance de la Compañía'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Cargando gráfico de líneas... por favor, espere
Si queremos presentar las líneas de forma curva añadimos el parámetro curveType:
Información detallada de todos los parámetros de configuración: Line Chart
- Gráfico de Barras (Column Chart)
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Año', 'Ingresos', 'Gastos'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Balance de la Compañía',
hAxis: {title: 'Año', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Cargando gráfico de barras... por favor, espere
Hay tres maneras diferentes de definir los colores de las columnas: valores RGB, nombres de los colores en inglés, y estilos css:
Información detallada de todos los parámetros de configuración: Column Chart
- Gráfico Circular (Pie Chart)
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Tareas', 'Horas por día'],
['Trabajo', 11],
['Comida', 2],
['Transporte', 2],
['Televisión', 2],
['Dormir', 7]
]);
var options = {
title: 'Mi actividad diaria',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>
Cargando gráfico circular... por favor, espere
El parámetro is3D con valor true indica que el gráfico se visualiza en tres dimensiones. Para mostrarlo en dos dimensiones, cambiamos su valor a false.
Información detallada de todos los parámetros de configuración: Pie Chart
Tal vez te interese instalar esta extensión en tu navegador Google Chrome para generar gráficos en 3D e imprimirlos de forma sencilla:
Crea gráficos online de 2D o 3D. El modo edición es fácil e intuitivo. Además puedes imprimir el gráfico generado.
Todos los ejemplos de gráficos se pueden encontrar en Chart Gallery, así como otros añadidos por la comunidad Additional Charts Gallery
