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)
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):
Más información: Google Charts
