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
Por favor alguien que me ayude como poner dos graficas en la misma pagina lo estuve intentand pero se me sobreponen apoyen.....
ResponderEliminarHola Juan, ¿me puedes proporcionar la url del blog o página web en la que estás haciendo las pruebas?
ResponderEliminarSi puedo echarle un vistazo, podré ayudarte :)
Un saludo!
Buenos días.
ResponderEliminarPara que los datos de las gráficas se "jalen" de una Base de Datos en sql server, como podría ser?
porque en tu código tu capturas los valores que aparecen en la gráfica, pero necesito jalar los valores de acuerdo a las consultas de sql
Hola, desde una página estática o html no puedes extraer registros de una base de datos.
ResponderEliminarPara ello tendrías que utilizar un lenguaje de programación del lado del servidor (php, java, .net, C#, etc).
Además, tendrías que parsear los datos para utilizarlos tipo array.
Un saludo y gracias por comentar!!
Quisiera colocar 2 Google Chart en la misma pagina y no funciona, como debería ser el código?
ResponderEliminarBuenos días Base De Datos,
ResponderEliminardisculpas por no haber contestado antes pero me ha sido imposible.
Evidentemente, la Api de Google está diseñada para poder cargar en una misma página html tantos gráficos como queramos.
La solución la puedes copiar de la página: how-to-add-two-google-charts-on-the-one-page
Gracias por visitar el blog.
Un saludo!!
Hola a todos:
ResponderEliminarYo tengo el mismo problema no puedo crear dos google chart en la misma página, lo estoy intentando en esta web freidora sin aceite
sculpas por no haber contestado antes pero me ha sido imposible.
ResponderEliminarEvidentemente, la Api de Google está diseñada para poder cargar en una misma página html tantos https://vikingpressagency.com/etiquetas-en-youtube-que-son-y-como-utilizarlas/