Módulo F: GRÁFICAS
Anuncio
Módulo F: GRÁFICAS
Objetivo del Módulo:
Brindar una herramienta que permita la representación
gráfica de información generalmente numérica
Asociado a la generación de reportes mencionada en el módulo anterior, podemos
referenciar que nuestros usuarios suelen solicitar análisis de datos de manera amigable. Es
por ello que el desarrollador se debe encontrar en la capacidad de realizar graficas mediante
el uso de CSS3, pero con el fin de facilitar y agilizar este proceso utilizaremos un servicio
llamada google chart, el cual de manera agradable nos permite representar nuestros datos.
Debemos mencionar que es un servicio en línea (Con conexión a internet), pero
presentaremos una alternativa de presentarlas (Sin conexión a internet) aunque debemos
mencionar que para una mejor experiencia lo más recomendable es utilizar el servicio
online.
De igual forma es importante tener en cuenta que la estadística es una ciencia bastante
extensa. Para la presente guía vamos a abordar las principales formas de visualización, que
a escala del contexto llegan a convertirse en una gran herramienta para el desarrollo de
nuestro aplicativo; apoyados en la sintaxis de programación de JavaScript y PHP.
1) Pie Chart (Grafico de pastel)
Los datos se representan en un círculo, de modo que el ángulo de cada sector es
proporcional a la frecuencia absoluta (número de veces) correspondiente.
Se utilizan en aquellos casos donde interesa no solamente mostrar el número de veces que
se da una característica o atributo, de tal manera que se pueda visualizar mejor la
proporción en que aparece esa característica respecto del total. Es recomendable utilizar
para representar máximo 5 categorías.
Ejemplo 1: Para el siguiente ejemplo tomaremos el plebiscito para la paz en Colombia,
presentando la información resultante del sí y no con una muestra de población de 100
personas.
<!DOCTYPE html>
<!-- llamamos al servicio de google chart -->
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//abrimos un Nuevo script
google.charts.load('current', {'packages':['corechart']});
//Cargamos la libreria de google chart con su versión por defecto
//y especificamos que tipo de paquete en este caso circular
google.charts.setOnLoadCallback(GraficoPastel);
//Enviamos la función GraficoPastel a la libreria para ser graficada
function GraficoPastel() { //Creamos la función GraficoPastel
var datos = google.visualization.arrayToDataTable([
//En una variable de tipo array llamada datos vamos a determinar
que tipo de información vamos a almacenar
['Opción', 'Cantidad de votos'], //Para el presente ejemplo
vamos a guardar dos tipos de información
['si',80], //Asignamos Valores1
['No',20]//Asignamos Valores2
]);//Cerramos la creación de la variable datos
var Opciones = { //vamos a determinar las opciones del gráfico
title: 'Plebiscito por la paz' //Titulo
}; //Cerramos las opciones
//En la variable Gráfico vamos a obtener el elemento donde se va a
visualizar el gráfico
var Gráfico = new
google.visualization.PieChart(document.getElementById('Contenedorgrafico'
));
//Enviamos los parámetros de configuración datos y opciones para ser
dibujados
Gráfico.draw(datos,Opciones);
}
</script>
</head>
<body>
<!-- Creamos un div donde se va a presentar nuestro gráfico -->
<div id="Contenedorgrafico" style="width: 700px; height:
300px;"></div>
</body>
</html>
Obteniendo como resultado.
Opciones
En la sección de opciones del código anterior podremos añadir una serie de alternativas a
nuestros gráficos entre las llaves, opciones que deben ser separadas por una coma a
excepción de la última opción que decidamos añadir, que nos permitirán tener una mejor
experiencia de usuario
'is3D': true permite habilitar la opción de 3 dimensiones en el grafico(DIsponible
para el grafico de Pastel).
'backgroundColor':'red' permite determinar un color de fondo del grafico
'fontSize':19 permite determinar un tamaño de fuente del texto del grafico
'fontName':'times new roman' permite determinar el tipo de fuente del texto
del grafico
'pieSliceTextStyle':{ color: 'white',
fontName: 'times new roman',
fontSize: 18,
bold: true,
italic: true } permite determinar unas características especiales al texto
informativo que se encuentra en el grafico
slices: {
0: { color: 'yellow' },
1: { color: 'red' },
2: { color: 'blue' } } permite determinar el color de cada una de las opciones que
van a ser representadas en el gráfico, el orden depende de la posición de creación y
asignación en aproximadamente la línea de código 12.
De tal forma que si añadimos todas las opciones a nuestro código quedaría de la
siguiente forma.
var Opciones = { //vamos a determinar las opciones del gráfico
title: 'Plebiscito por la paz', //Titulo
'is3D': true ,
'backgroundColor':'white' ,
'fontSize':19 ,
'fontName':'times new roman',
'pieSliceTextStyle':{ color: 'white',
fontName: 'times new roman',
fontSize: 18,
bold: true,
italic: true } ,
slices: {
0: { color: 'orange' },
1: { color: 'red' }
}
}; //Cerramos las opciones
Obteniendo el siguiente gráfico
2) Column Chart (Grafico de columnas)
Un diagrama de barras, también conocido como diagrama de columnas, es una forma de
representar gráficamente un conjunto de datos o valores y está conformado por barras
rectangulares de longitudes proporcionales a los valores representados
Son principalmente utilizados para mostrar el cambio de una variable con el tiempo. Por
ejemplo, podrías usar un gráfico de barras para mostrar la precipitación mensual en un
área establecida durante el curso de un año. Las alturas de las barras corresponderían a la
precipitación, y cada mes tendría una barra que muestre su precipitación total.
Ejemplo 2: Para el siguiente ejemplo tomaremos una encuesta sobre los 3 lenguajes de
programación web más utilizados por los desarrolladores, para la muestra se emplearon
100 personas.
<?php require '../menu.php'; ?>
<!-- llamammos al servicio de google chart -->
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//abrimos un nuevo script
google.charts.load("current", {packages:['corechart']});
//Cargamos la libreria de google chart con su versión por defecto
//y especificamos que tipo de paquete en este caso circular
google.charts.setOnLoadCallback(DibujarColumnas);
//Enviamos la función GraficoPastel a la libreria para ser graficada
function DibujarColumnas() {//Creamos la función DibujarColumnas
var data = google.visualization.arrayToDataTable([
//En una variable de tipo array llamada datos vamos a determinar que
tipo de información vamos a almacenar
["Lenguaje", "Cantidad de votos", { role: "style" } ],
["Java",80, "#b87333"],//Asignamos Valores1
["Python",10, "silver"],//Asignamos Valores2
["PHP",10, "gold"],//Asignamos Valores3
]);
var options = {
title: "Lenguajes de programación más usados", //contenido del
titulo del grafico
width: 600, //Ancho del grafico
height: 400,//ALto del grafico
bar: {groupWidth: "95%"}, //espacio entre barras
};
var chart = new
google.visualization.ColumnChart(document.getElementById("columnchart_val
ues")); //Obetenemos el div donde se va a visualizar nuestro gráfico
chart.draw(data, options); //enviamos los datos de los gráficos
// y opciones correspondientes
}
</script>
<!-- Creamos un div donde se va a presentar nuestro gráfico -->
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>
<?php require '../footer.php'; ?>
Obteniendo como resultado.
Observación: Los gráficos de barras normalmente se dibujan de modo que las
barras son verticales que significa que el más alto de la barra, mayor es la
categoría. Sin embargo, también es posible trazar los gráficos de barras de modo
que las barras sean horizontales (BarChart) que significa que cuanto más tiempo la
barra, mayor es la categoría. Esta es una forma particularmente eficaz de presentar
los datos cuando las diferentes categorías tienen largos títulos que serían difíciles de
incluir por debajo de una barra vertical, o cuando hay un gran número de diferentes
categorías y hay espacio suficiente para adaptarse a todas las columnas necesarias
para un gráfico de barras verticales en la página. Para ello tendremos en cuenta el
ejercicio anterior y debemos cambiar la siguiente de línea del anterior código:
var chart = new
google.visualization.ColumnChart(document.getElementById("columnchart_values"));
Por la siguiente línea
var chart = new
google.visualization.BarChart(document.getElementById("columnchart_values"));
Obteniendo como resultado.
LineChart:
Los gráficos de líneas muestran con claridad los cambios de los datos producidos (mientras
pasa el tiempo o mientras algo más pasa). en forma de puntos y todos los puntos de la
misma serie se unen mediante una línea; de ahí su nombre. Cada valor aparece representado
por un punto que es la intersección entre los datos del eje horizontal y los del eje vertical
Ejemplo 3: Para el siguiente ejemplo tendremos un balance de ingresos y egresos de una
empresa del 2004 al 2007.
<!-- llamammos al servicio de google chart -->
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//abrimos un nuevo script
google.charts.load('current', {'packages':['corechart']});
//Cargamos la libreria de google chart con su versión por defecto
google.charts.setOnLoadCallback(GraficoLineas);
//Enviamos la función GraficoPastel a la libreria para ser graficada
function GraficoLineas() {
var data = google.visualization.arrayToDataTable([
['Año', 'Gastos', 'Ingresos'], //Determinamos el tipo de
información a almacenar
['2004',1000,400],//Asignamos Valores1
['2005',1170,460],//Asignamos Valores2
['2006',660,1120],//Asignamos Valores3
['2007',1030,540]//Asignamos Valores4
]);
var options = {
title: 'Ingresos y Egresos de la empresa xy',//Titulo
};
//Obetenemos el div donde se va a visualizar nuestro gráfico
var chart = new
google.visualization.LineChart(document.getElementById('gráfico_curva'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!-- Creamos un div donde se va a presentar nuestro gráfico -->
<div id="gráfico_curva" style="width: 700px; height: 400px"></div>
</body>
</html>
Obteniendo como resultado
Gráficas sin conexión:
Para generar gráficas sin conexión a internet es necesario usar dos archivos js,
jsapi.js
uds_api_contents.js
A continuación, visualizaremos el ejemplo de gráficas de Pastel sin conexión a internet, que
si comparamos con el ejemplo inicial su variación no es tan drástica
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Gráficas sin conexion a internet
</title>
<!-- Cargamos el servicio que contiene la generación de gráficas
almacenados en los dos siguientes archivos -->
<script type="text/javascript" src="jsapi.js"></script>
<script type="text/javascript" src="uds_api_contents.js"></script>
<!-- Cargamos el servicio que contiene la generación de gráficas -->
<script type="text/javascript">
//Abrimos un nuevo Script que contendra nuestras funciones -->
function Graficooffline() {
//Creamos nuestra función para graficar -->
var data = google.visualization.arrayToDataTable([
//En una variable de tipo array llamada datos vamos a determinar
que tipo de información vamos a almacenar
['Opción', 'Cantidad de votos'], //Para el presente ejemplo
vamos a guardar dos tipos de información
['si',80], //Asignamos Valores1
['No',20]//Asignamos Valores2
]);//Cerramos la creación de la variable datos
new google.visualization.PieChart(document.getElementById('div')).
draw( //en esta sección obtenemos el objeto donde vamos a
almacenar nuestro gráfico y sus respectivas opciones de gráfico
data,
{
title: 'Plebiscito por la paz', //Titulo
width: 500, height: 400, //Dimensiones del gráfico
}
);
}
google.setOnLoadCallback(Graficooffline); //envíamos al servicio de
google la función Graficooffline
</script>
</head>
<body >
<div id="div" style="width: 500px; height: 400px;"></div>
<!--Creamos un nuevo contenedor donde se presentará unuestro gráfico
-->
</body>
</html>
Obteniendo como resultado
Para obtener sin conexión los otros tipos de gráficos que explicamos al iniciar nuestra guía
debemos tener en cuenta el anterior código remplazar la siguiente palabra resaltada por el
tipo de gráfico que deseamos.
new google.visualization.PieChart(document.getElementById('div')).
Gráfico de Columna Vertical
new google.visualization.ColumnChart(document.getElementById('div')).
Gráfico de Linea
new google.visualization.LineChart(document.getElementById('div')).
Gráfico de Columna Horizontal
new google.visualization.BarChart(document.getElementById('div')).
EJERCICIOS:
1. Teniendo en cuenta la base de datos llamada graficas en la carpeta bd generar una
gráfica de pastel de la tabla género que permita visualizar la proporción y relación
de cantidad de hombres y mujeres
2. Teniendo en cuenta la base de datos llamada graficas en la carpeta bd generar una
gráfica de Columnas de la tabla candidatos que permita visualizar la proporción y
relación de votos recibidos
3. Teniendo en cuenta la base de datos llamada graficas en la carpeta bd generar una
gráfica de Líneas de la tabla controlpt que permita visualizar la proporción y
relación de Peso y talla de una persona
4. Teniendo en cuenta el ejercicio 1 desarrollar esa instrucción utilizando la
herramienta de gráficas offline
Lista de referencias.
https://developers.google.com/chart/
https://gist.github.com/makevoid/3999915
http://www.ehowenespanol.com/son-graficos-apropiado-circular-columnas-barras-lineainfo_292510/
