Creación de gráficos con Canvas y HTML5

Creando nuestros propios gráficos

Vamos a ver ahora una de las partes más interesantes de las que nos ofrece Canvas, vamos a ver qué opciones tenemos a la hora de generar gráficos en nuestra página Web. No existen funciones específicas para ello dentro de la API que estamos estudiando, pero utilizando las funciones que ya hemos ido viendo con anterioridad seremos capaces de generar un gráfico en función de una serie de datos.

En primer lugar vamos a colocar una imagen en nuestro lienzo de la manera que hemos visto en el punto anterior, esta imagen será nuestro gráfico completamente vacío. A continuación, vamos a ir dibujando las figuras que queramos sobre dicha imagen para ir completando nuestro gráfico, en este caso serán simples líneas rectas que unirán los puntos de medida de la información que queramos mostrar. De esta manera, en función de lo que nosotros dibujemos sobre dicha imagen, tendremos un grafico u otro. Vamos a verlo en el siguiente código:

Vemos como primero colocamos la imagen de fondo siguiendo exactamente los mismos pasos que en ejemplos anteriores. Después comenzamos a dibujar una figura sobre ella, primero nos desplazamos hasta el punto de inicio de nuestra línea, y después vamos trazando líneas rectas en función de los datos que queramos representar. Deberemos tener en cuenta las coordenadas de los puntos que queramos representar.

El resultado que obtenemos en pantalla sería el siguiente:

Por tanto, lo que nosotros visualizamos es un gráfico representado mediante una línea, que recorre los puntos de medida de nuestro gráfico. Si en lugar de una línea, quisiéramos hacer cualquier otro tipo de gráfico, solo tendríamos que cambiar la figura que dibujamos para representar nuestros datos.

Como hemos venido diciendo, lo que nos interesa cuando utilizamos Canvas, es dar cierto dinamismo a nuestros elementos, por lo tanto, vamos a ver este mismo ejemplo, pero los datos a representar los introducirá el usuario, y después crearemos el gráfico en función de estos datos.

Vamos a ver que la forma de crear el gráfico va a ser la misma, solo que el usuario va a disponer de un formulario donde introducirá los datos, en este caso las precipitaciones de cada mes, y al pulsar sobre un botón crearemos la gráfica con los datos introducidos.

Vamos a verlo en el siguiente código:

Vemos como hemos creado un formulario con un elemento de entrada de tipo number para introducir la medida de cada mes, limitadas en los valores de que dispone nuestro gráfico. Una vez introducidos los datos, al pulsar sobre el botón de "Graficar", se ejecutará la función carga(). Esta función se encargará de recoger los valores de este formulario, dibujar la imagen en nuestro lienzo, y posteriormente dibujar la línea en función de los datos que ha recogido del formulario. Al dibujar nuestra línea con los datos, hacemos un ajuste entre el valor introducido y la posición del valor a dibujar, ya que introducimos el valor de la precipitación, pero para dibujar debemos introducir las coordenadas exactas de dicho punto.

El resultado que obtenemos en pantalla sería el siguiente:

Vemos por tanto, que introduciendo los datos de que dispongamos y pulsando sobre el botón "Graficar", tenemos nuestro gráfico colocado en el lienzo dentro de nuestra página Web.

Utilizando librerías ya creadas para la generación de gráficos

Hemos visto ya, cómo generar un gráfico sobre un elemento Canvas que hayamos creado en nuestra página Web, y cómo hacerlo de alguna manera dinámico. De esta manera, podemos conseguir cosas realmente interesantes si nos ponemos a trabajar a fondo con ello. Sin embargo, tenemos otra opción que es utilizar librerías ya creadas por otros desarrolladores para crear de manera más sencilla nuestros gráficos.

En este apartado, vamos a ver un ejemplo utilizando una de las librerías disponibles en Internet y que podemos encontrar en este enlace. Su nombre es RGraph, es una librería muy completa y que si os fijáis en la página, es libre para su uso personal, pero no para su uso comercial. Podéis descargar la librería directamente desde la página, y utilizarla sin ningún tipo de problemas, siempre respetando la licencia que nos ofrecen dependiendo del uso que le vayamos a dar.

Una vez descargada y descomprimida, vamos a ver cómo utilizarla para crear un gráfico en nuestra página. En primer lugar vamos a ver cómo hemos organizado los ficheros en nuestra carpeta para que queden claras las referencias que hacemos:

Vemos que tenemos una carpeta con todo el contenido que nos hemos descargado y fuera de ella el fichero HTML donde vamos a crear nuestro lienzo y por lo tanto nuestro gráfico. El ejemplo que vamos a ver a continuación, sería el fichero graficoRGraph.html que vemos en la imagen.

Respecto al código de dicho fichero, en primer lugar, vamos a crear nuestro lienzo de la misma manera que hemos hecho hasta ahora, y vamos a agregar los ficheros JavaScript necesarios para el gráfico que queremos crear. Estos ficheros, están disponibles en la carpeta que nos hemos descargado, de ahí la ruta que ponemos para agregarlos en nuestro documento:

En este caso, vamos a crear un gráfico circular con un efecto que nos muestra una información adicional cuando pulsamos sobre alguno de los apartados, y para ello, necesitamos los ficheros que vemos, si fuéramos a crear cualquier otro tipo de gráfico, sería necesario agregar estos u otros ficheros diferentes. Los ficheros necesarios para cada tipo de gráfico, podemos consultarlos en la propia página de la librería.

Una vez tenemos los elementos JavaScript necesarios agregados de manera correcta, vamos a crear una pequeña función también de JavaScript, donde le vamos a asignar los datos y los valores que debe mostrar nuestro gráfico:

La función que hemos creado se ejecutará en el momento en el que termine de cargar la página, y lo primero que hará será crear un objeto RGraph de tipo Pie, ya que este tipo de gráficos se denominan así. Para crearlo, le indicamos el identificador del lienzo en el que queremos colocar el gráfico, y los valores que debe mostrar. Una vez tenemos creado el objeto, le vamos asignando las propiedades de la manera que vemos en la imagen. En primer lugar los colores de los apartados del gráfico, luego el margen entre los apartados que tenemos, si queremos sombra o no, los nombres de los apartados y finalmente, la información adicional que queremos mostrar cuando pulsemos alguno de los aparatados. Una vez definido el objeto por completo, mediante el método Draw(), mandamos dibujar el gráfico.

Los datos que vamos introduciendo a la hora de asignar las propiedades a nuestro gráfico, respetan el mismo orden en todos los casos. Es decir, el primer valor de la lista, corresponde con el primer color de apartado, el primer nombre de apartado y el primer contenido adicional a mostrar.

Para finalizar, el resultado que veríamos en pantalla sería el siguiente:

Vemos como de una manera sencilla tenemos un gráfico circular en nuestra página, y que además dispone de un evento que al pulsar sobre cualquier apartado, nos muestra una información adicional.