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/