Capítulo 8 Crear una gráfica

Slides:



Advertisements
Presentaciones similares
VISUALBEE. VisualBee es un software que te permite mejorar tus presentaciones mismos viejos en una presentación llena de gráficos de gran alcance. Para.
Advertisements

TRABAJAR CON JCross. Introducción de los datos del ejercicio Al arrancar JCross nos encontramos una cuadrícula en blanco.
UNIDAD 7 UNIDAD 7 UNIDAD 7 UNIDAD 7 FUNCIONES Y ESTADÍSTICA 1.
APLICAS FUNCIONES ESPECIALES Y TRANSFORMACIONES DE GRÁFICAS PROFESORA: XÓCHITL ARIANDA RUIZ ARMENTA MATEMÁTICAS 4 4TO SEMESTRE ENERO 2015 MULTIVERSIDAD.
 Para poder resolver una ecuación como ésta: x² = -4 No hay ningún número real que elevado al cuadrado nos pueda dar un resultado negativo. Ahora bien,
República Bolivariana de Venezuela Instituto Universitario Politécnico “Santiago Mariño" Estadísticas I - OV Estadística Profesor : Bachiller: Pedro Beltrán.
ALGORITMOS, DIAGRAMAS DE FLUJO ING. DIANA CRUZ. QUÉ ES UN ALGORITMO ALGORITMO PARA UNA RECETA DE COCINA ETAPAS PARA SOLUCIONAR UN PROBLEMA PROPIEDADES.
HTM L (Hyper Text Markup Language). ¿Qué es HTML? Es el lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas,
Capítulo 7 La API del CANVAS
Capítulo 6 Aplicaciones fuera de línea u offline-app
Guía de implementación
Funciones y gráficas.
Capítulo 9 Dibujo en el canvas
DESARROLLO WEB CON HTML 5 Francisco J. Arce Anguiano
INTRODUCCIÓN A BASE DE DATOS
BUCLES Realizan de forma rápida cálculos repetitivos dentro de código.
FUNCIONES, PROCESAMIENTO ELEMENTAL DE DATOS
LÍNEA MÚLTIPLE SINTAXIS Comando: _mline
Rectas en el plano cartesiano
Capítulo 10 Manejo de imágenes con el canvas de HTML5
Capítulo 13 Leer archivos JSON con AJAX
Capítulo 14 AJAX y la librería jQuery
Métodos para resolver sistema de ecuaciones de primer grado 3x3
REPASO VARIABLES 1º DECLARAR LA VARIABLE,
FUNCIONES, PROCESAMIENTO ELEMENTAL DE DATOS
Matemáticas 1º Bachillerato CT
Personalizar el blog Escribir:
CREACION DE ESM.
Uso de los accesorios principales
Ejemplos con análisis y grafico
ANÁLISIS E INTERPRETACIÓN DE DATOS
…MANEJO DE POWER POINT 2007…
MACROS AUTOMÁTICAS Una macro es una grabación que permite automatizar tareas, añadiendo por ejemplo un botón en nuestro libro que al pulsar sobre él,
Apuntes Matemáticas 2º ESO
Capítulo 4 La API File para manejar archivos
DISEÑO ASISTIDO POR COMPUTADORA
RESUMEN POWERPOINT POWERPOINT BÁSICO.
Page Composer de EBSCOhost
OPERACIONES CON NÚMEROS NATURALES Tema 1
Escuela de Trabajo Social
Tema 4 Lenguaje HTML Parte 4.
INTRODUCIR DATOS En cada una de las celdas de la hoja es posible introducir textos, números o fórmulas. Aparecerán en dos lugares: en la celda activa y.
Rectas en el plano cartesiano
SISTEMA DE ECUACIONES CON DOS INCOGNITAS
UNIDAD DIDÁCTICA Semana 11
Introducción ACTIVIDAD: magnitudes Conceptos:
Scratch Presentado por: Valentina Agudelo Huerfano J.M.
ESTADÍSTICA DESCRIPTIVA
Guía de: Cmap Tools.
¿Cómo lo vamos a realizar?
Curso de Programación Web html, java script
Tema 8: Integrales y sus aplicaciones
Capítulo 23 Potencial eléctrico.
LA ESCALA.
TABLAS DINÁMICAS Tablas dinámicas son una excelente forma de resumir, analizar, explorar y presentar los datos. Tablas dinámicas son muy flexibles y se.
Dibujo de las vistas de una pieza
Excel Macros Macros Automáticas.
LIC. LUIS GONZALO PULGARÍN R
Bimestre 5 Actividades 1er Grado.
U.D. 12 * 3º ESO E.AC. FUNCIONES LINEALES Y CUADRÁTICAS
Como sumar dos números con JavaScript
Cómo utilizar el Campus
ECUACIONES DIFERENCIALES PROBLEMA DE VALORES EN LA FRONTERA
Conversión de Binario a Decimal
CICLOS EN JAVA FOR, WHILE, DO WHILE Un ciclo en Java o bucle en Java (como prefieras llamarlo) permite repetir una o varias instrucciones cuantas veces.
MC Beatriz Beltrán Martínez Verano 2018
MANUAL DE USO WORDPRESS
1 Temario de la asignatura Introducción. Análisis de datos univariantes. Análisis de datos bivariantes. Series temporales y números índice. Probabilidad.
Concepto de Campo Un campo es toda magnitud física definida en una cierta región del espacio y para un cierto intervalo temporal. El concepto de campo.
Química U.3 La cantidad en Química Preparación de disoluciones.
Transcripción de la presentación:

Capítulo 8 Crear una gráfica

8.1 Dibujar la cuadrícula de la gráfica La rutina para dibujar una cuadrícula dentro de nuestro lienzo que nos servirá como guía para graficar los datos. En este archivo introducimos algunos cambios a los ejercicios del capítulo anterior, como añadir los estilos en cascada para centrar el canvas y el título, así como ampliar un poco el lienzo a 510 pixeles de ancho para que la cuadrícula quede exacta. En la primer parte de este script estamos definiendo algunas variables fuera de las funciones, las cuales utilizaremos más adelante, pero es bueno definirlas desde un inicio. Observe que estamos definiendo afuera de la función onload a las variables canvas y ctx, a diferencia de la unidad anterior. Esto es porque las necesitaremos como referencias en otras funciones. En la función pintaGrid() estamos dibujando una línea de medio pixel, que es lo más delgado que podemos dibujar una línea u objeto. Por medio de esta función pasamos tres parámetros: la distancia en el eje de las “equis”, la distancia en el eje de las “yes” y el color de la línea como una cadena. En este caso, en realidad, el cuadro mide 15 x 15, lo cual debemos de considerar más adelante. Intente pasando diferentes valores y observe el resultado. Regrese al valor del original para coincidir en las siguientes secciones. Guarde su archivo.

Crear una cuadrícula, archivo canvasGrid.html

Crear una cuadrícula, archivo canvasGrid.html

Crear una cuadrícula, archivo canvasGrid.html

8.2 Dibujar los ejes Pintar los ejes de las “equis” y de las “yes”, aunque es una tarea sencilla; se trata de sólo dibujar dos líneas, la realizaremos por medio de parámetros para que sea lo más fácil de modificar, si fuera necesario. Abra el archivo canvasGrid.html y renómbrelo como canvasEjes.html. Como habíamos comentado, se usa el código de la función pintaGrid(). Primero creamos una variable que almacena el tamaño de nuestro cuadro, en este caso es 15 pixeles (en JavaScript la única medida son los pixeles). Luego calculamos la distancia de inicio y fin de los ejes por medio de número de cuadritos. En este caso son tres arriba y abajo, o derecha e izquierda. Utilizamos las propiedades width() y height() para las coordenadas iniciales y finales de los ejes. También empleamos una variable llamada lineaColor.

8.3 Pintamos las líneas de cada eje Una gráfica que se respete debe tener las líneas divisorias para las cantidades. Abra el archivo canvasEjes.html y renómbrelo como canvasLineas.html. En la rutina pintaLineas() estamos calculando el número de líneas que vamos a dibujar en las variables lineasY y lineasX por medio de una sencilla división. Luego escribimos dos ciclos, uno para cada eje. Iniciamos dibujando la línea a partir del primer cuadro. Cambie el valor inicial de los ciclos a cero y ejecute su archivo en un navegador. Aparecerá una línea al inicio de cada eje. Si regresa el valor inicial de los ciclos a uno, desaparece la primer línea. Observe que estamos utilizando el operador módulo para calcular la longitud de la línea. Cada cinco líneas dibujamos una del doble de longitud para que sea más sencillo de visualizar. Guarde su archivo. Ahora estamos listos para leer nuestros datos.

8.4 Lectura de los datos Ahora que ya tenemos nuestra gráfica básica (a la que luego haremos algunos cambios), nos corresponde leer los datos y graficarlos. La información acerca del crecimiento del Producto Interno Bruto de México, proviene de la página del Banco Mundial, de manera que los datos son, desafortunadamente, ciertos. Puede consultarlos en: http://datos.bancomundial.org/pais/mexico. Usted puede cambiarlos por los datos que le parezcan convenientes. Esta información la almacenamos en el archivo mexico.xml y se encuentra en la misma carpeta que la página html. Su formato lo puede observar en el siguiente listado:

Los datos a graficar, archivo mexico.xml

Los datos a graficar, archivo mexico.xml

Procedimiento Abra el archivo canvasLineas.html y guárdelo como canvasDatos.xml. El resultado de estas rutinas será la salida de los datos en la división correspondiente y el cambio del título y subtítulo. Observe que estamos llenando un arreglo llamado “puntos” por medios de objetos, que utilizaremos más adelante. Vaciamos la información en las etiquetas correspondientes. Estamos llamando a la función graficaDato(), que de momento está comentada y en otra línea llamamos a la función dibujaLinea(). Si ejecuta el script obtendrá los datos a graficar en la parte inferior de la gráfica. Guarde su archivo.

8.5 Graficar cada dato y dibujar la línea Ahora que ya tenemos los datos procederemos a dibujarlos en la gráfica. Este proceso lo dividimos en dos funciones: la primera, dibuja el cuadrito cada vez que leemos los datos del objeto XML; la segunda, ya que hemos leído todos los datos, dibuja la línea que los une. Abra el archivo canvasDatos.html y guárdelo como canvasGrafica.html. En la función graficaDato() tomamos a cada uno de los puntos y los dibujamos en la gráfica. Tenemos que centrar el cuadro, así que restamos la mitad, tanto de arriba como de la izquierda, para que quede centrado. Este mismo ajuste lo regresamos (los sumamos) y lo almacenamos en el objeto y, por tanto, en el arreglo. La función de dibujaLinea() toma igualmente como base el arreglo puntos, de inicio a fin, y procede a unir los puntos por medio de una línea. Guarde su archivo y ejecútelo en un navegador y podrá observar que hay dos datos que salen de la gráfica. Estos son números negativos debido a las tremendas crisis que ha sufrido México y que salen del plano. Para solucionarlo hay que ajustar los ejes. Guarde su archivo y pasemos a la siguiente sección.

Las funciones crear la gráfica, archivo canvasGrafica.xml

8.6 Ajustar la gráfica a negativos Ahora vamos a utilizar la variable ajuste, que habíamos creado desde un inicio. Esta variable es el producto de la longitud del cuadro por cierto número de ellos, en este caso cinco, ya que son 16 cuadros, y el mayor número negativo es -5, así que vamos a subir 5 cuadritos al eje delas “equis”. El algoritmo para encontrar el punto medio de una gráfica, tanto en “equis” como en el eje de la “yes” es más complejo, pero para fines prácticos con este ajuste nos bastará. Necesitamos hacer la modificación en tres funciones: pintaEjes(), pintaLineas() y graficaDato(). La modificación es bastante sencilla, una simple resta, pero no se había mencionado hasta presentar la problemática respectiva. Abra su archivo canvasGrafica.html y renómbrelo como canvasAjusta.html. Una vez que haya realizado los ajustes, salve su archivo y visualice la gráfica. Deberán aparecer graficados correctamente incluso los número negativos -5 y -4.

8.7 Rotular los ejes de la gráfica Finalmente rotularemos los ejes con sus datos respectivos. Estos nos representan dos pequeños problemas a resolver: en el eje de las “equis” las fechas son muy largas, incluso si hacemos los números muy pequeños, y queremos mantener los cuatro dígitos del año. La otra dificultad es que tenemos números negativos en el eje de las “yes”. El primer punto lo resolveremos rotando los textos de los años y el segundo con una sencilla resta. Abra el archivo canvasAjustar.html y guárdelo como canvasRotulo.html. Dentro de este archivo quite los comentarios en la función dibujaLínea() que llaman a la función rotulaGrafica().

La función rotula, archivo canvasRotula.xml

Para el eje de la “equis”, como los años no caben en los cuadritos o en su defecto se ven muy encimados, procedemos a rotarlos 90 grados. Para ello utilizamos un PROCESO que se llama “DE LOS 5 PASOS”, pues el canvas de HTML5 no contiene una propiedad para rotar elemento, como en este caso serían los textos. 1. Salvamos el estado del canvas. 2. Trasladamos el origen a donde queremos rotar el texto. 3. Utilizamos la propiedad rotate(), que en realidad rota todo el lienzo. 4. Creamos el texto en estas condiciones. 5. Restauramos el canvas. Para solucionar la cuestión del eje de las “yes” utilizamos un ciclo inverso y hacemos una resta. Como son 16 casillas, y queremos que empiece en 9, simplemente le restamos 7 unidades. Guarde su archivo y ejecútelo. Por último, comente o borre la línea donde se almacena la información en la cadena, en la función procesaXML(), así tendrá terminada la gráfica del Producto Interno Bruto de México, de 1988 a 2014.