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.