Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home Webmaster Diseño Web

Google Charts, gráficas en tu Web

23 mayo, 2013
en Diseño Web
0
Google Charts, gráficas en tu Web
Share on FacebookShare on Twitter

Cuando necesites realizar algun gráfico estadístico, o de otro tipo, puedes utilizar el frameworks que ofrecen Google: 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
  • Gráficos de tablas
  • 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 proporciona este producto.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tutorial Monsters: Mi primer ejemplo en Google Charts</title>
<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: 'Ejemplo con Google Charts: Gráfico de barras'
}
// 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>
</head>

<body>
Ejemplo con Google Charts....
<div id="GraficoGoogleChart-ejemplo-1" style="width: 800px; height: 600px">
</div>
<div style="padding-top:15px"><a href="https://www.tutorialmonsters.com/google-charts-graficas-en-tu-web/" title="Google Charts">www.tutorialmonsters.com</a></div>
</body>
</html>

Si abres el ejemplo con el navegador verás el gráfico que hemos utilizado, un sencillo gráfico de barras: (ver online)

Google Chart
Ejemplo gráfico columnas

Veamos otro ejemplo, gráfico de columnas:

<html>
<head>
<title>Tutorial Monsters: Ejemplo en Google Charts</title>
<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', 'Ventas', 'Gastos'],
['2004',  1000,      400],
['2005',  1170,      460],
['2006',  660,       1120],
['2007',  1030,      540]
]);

var options = {
title: 'Informe de Ventas/Gastos',
hAxis: {title: 'Años', 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>
<div style="padding-top:15px"><a href="https://www.tutorialmonsters.com/google-charts-graficas-en-tu-web/" title="Google Charts">www.tutorialmonsters.com</a></div>
</body>
</html>

En el navegador veríamos esto (ver online):

Grafico Columnas Google Chart
Grafico Columnas Google Chart

Más información: Google Charts

Etiquetas: frameworksGoogleGoogle ChartsGraficos
ANUNCIO
Post anterior

Cómo crear un motivo en Photoshop

Próximo Post

CSS3 Patterns Gallery

Otros Posts

Diseño de páginas web, el mejor escaparate digital para un negocio

Diseño de páginas web, el mejor escaparate digital para un negocio

3 septiembre, 2021
0

Cualquier negocio que se precie debe estar presente en internet, es la única manera de ampliar clientes y crecer cada vez más. Las empresas que están presentes en internet presentan unas cuentas de resultados mucho...

Manual diseño web: Planificación y configuración de un sitio web

Cómo hacer una página web paso a paso

15 agosto, 2021
0

Es fácil sentirse un poco perdido cuando estás construyendo su primer sitio web. Es posible que estés sentado allí pensando, ¿cómo hacer una página web paso a paso?  Crear una página web es la oportunidad...

Recomendados

El Photoshop que se imaginan los clientes

1 marzo, 2011
Reglas CSS por defecto para los navegadores

Cómo incluir hojas de estilo en una página web

23 diciembre, 2010
Opinión sobre mi experiencia estudiando el Máster en Dirección de Marketing y Ventas en EAE en modalidad online

Opinión sobre mi experiencia estudiando el Máster en Dirección de Marketing y Ventas en EAE en modalidad online

12 noviembre, 2020
Tutorial crear efecto metálico en un botón

¿Por que en Photoshop el cursor de mi pincel se cambia solo?

4 febrero, 2011

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .