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

Que son las Máscaras en Photoshop

Que son las Máscaras en Photoshop

15 febrero, 2014
Tutorial crear efecto metálico en un botón

Escala segun contenido en Photoshop

19 marzo, 2012
Términos básicos para trabajar con campañas online

Aspectos a tener en cuenta para elegir una Agencia de Marketing Digital

17 diciembre, 2020
Reglas CSS por defecto para los navegadores

Centrar un elemento div horizontal y verticalmente con CSS y Dreamweaver

18 enero, 2012

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 .