Google Charts, gráficas vistosas en tu Web

Google Charts, gráficas vistosas en tu Web
Sin comentarios Facebook Twitter Flipboard E-mail
calendamaia

calendamaia

Cuando en una aplicación Web necesitamos crear algún tipo de gráfico estadístico, o de otro tipo, disponemos de varios frameworks que nos pueden hacer la vida más fácil. Google, como no podía ser de otra manera, nos ofrece su propio framework para este menester: Google Charts.

Aparte de las funcionalidad básica de presentar tablas personalizadas, tenemos otros tipos de gráficos interesantes:

  • Gráficos de barras

  • Gráficos de cajas

  • Candlestick

  • Gráficos compuestos

  • Iconos dinámicos

  • Gráficos de Línea

  • Mapas

  • Diagramas circulares

  • Etc...

Vamos a ver un ejemplo sencillo de presentación de una gráfica en Google Charts, usando los gráficos de barras. Escribiremos un sencillo código con el cual podremos ver el resultado que nos porporciona este producto.

El código completo del ejemplo es el siguiente:

<html>
<head>
<title>Mi primer ejemplo en Google Charts</title>
</head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(dibujarGrafico);
function dibujarGrafico() {
// Tabla de datos: valores y etiquetas de la gráfica
var data = google.visualization.arrayToDataTable([
['Texto', 'Valor numérico'],
['Texto1', 20.21],
['Texto2', 4.28],
['Texto3', 17.26],
['Texto4', 10.25]
]);
var options = {
title: 'Nuestro primer ejemplo con Google Charts'
}
// Dibujar el gráfico
new google.visualization.ColumnChart(
//ColumnChart sería el tipo de gráfico a dibujar
document.getElementById('GraficoGoogleChart-ejemplo-1')
).draw(data, options);
}
</script>
<body>
Comenzando con Google Charts....
<div id="GraficoGoogleChart-ejemplo-1" style="width: 800px; height: 600px">
</div>
</body>
</html>

Tras abrir el ejemplo con el navegador nos encontraremos con el gráfico que hemos utilizado, un sencillo gráfico de barras:

Nuestra primera gráfica con Google Charts

Más información | Google Chart En Genbeta Dev | Introducción al elemento canvas de HTML5 | Polychart.JS, otra opción para tus gráficas Javascript

Comentarios cerrados
Inicio
×

Utilizamos cookies de terceros para generar estadísticas de audiencia y mostrar publicidad personalizada analizando tu navegación. Si sigues navegando estarás aceptando su uso. Más información