Jun 072014
 
Artículo WordPress

A menudo, la mejor manera de visualizar la información contenida en un conjunto de datos numéricos es representándolos gráficamente en un diagrama. En este artículo explicamos cómo incorporar distintos tipos de gráficos a una página o artículo de un blog de WordPress.

Para generar un diagrama de tarta, un gráfico de barras, etc… a partir de los datos, existen muchas soluciones entre las cuales la librería javascript “charts.js” ofrecida por Google es una de las más completas y utilizadas actualmente.

En WordPress, existen también muchos plugins que implementan esta funcionalidad, y entre ellos, el plugin “Visualizer”, que utiliza el API de Visualización de Google, es uno de los más conocidos y utilizados para la generación de gráficos.

Instalación de Visualizer

El plugin Visualizer de Maxpixels se instala como cualquier otro plugin de WordPress, Accediendo a “Escritorio > Plugins > Añadir nuevo”, e introduciendo “Visualizer” en la caja de búsqueda. En nuestro caso, hemos instalado la versión 1.4.2.3. Una vez instalado, procedemos a activarlo.

Preparación de los datos a visualizar

Los datos a presentar en un gráfico deben estar disponibles en formato CSV (Comma Separated Values, valores separados por comas).

  • La primera línea debe contener los nombres de los campos
  • La segunda línea contiene el tipo de dato de cada uno de los campos
  • Las lineas siguientes contienen un registro por línea, con los valores de los campos entre comillas.

Ejemplo. Para la elaboración de este artículo, preparamos un fichero “datos.csv” con el siguiente contenido:

Los tipos de datos que se pueden utilizar en la segunda línea son:

  • string – Cadena de texto
  • number – Número genérico (entero o con decimales. El separador decimal es el carácter “.”)
  • boolean – “true” o “false”
  • date – Fecha.El formato recomendado para este tipo de valor es YYYY/MM/DD. Otros formatos pueden no ser correctamente interpretados en algunos navegadores como Firefox.
  • datetime – Fecha y hora, p.ej. “2014/02/22 11:26”
  • timeofday – Hora del día, p.ej. “11:26”

Inserción de un gráfico

Para insertar un gráfico, editamos una página o artículo del blog, colocamos el cursor en donde queremos insertar el gráfico, y pulsamos el botón “Añadir objeto” en la parte superior de la ventana.

En la ventana emergente que aparece, seleccionamos “Visualizations” en el menú de la izquierda.

insertar-grafico

 

y a continuación seleccionamos la pestaña “Create New” en la parte superior:

tipos-grafico

 

Seleccionamos el tipo de gráfico deseado de entre las nueve posibilidades que se nos ofrecen, y pulsamos el botón “Next” en la parte inferior derecha. A continuación, se presenta una pantalla en donde se nos da la opción de cargar un fichero CSV con los datos a presentar en el gráfico, desde nuestro ordenador o desde la web:

upload-csv

Hacemos click en el botón “From Computer”, y seleccionamos el fichero “datos.csv” que habíamos preparado anteriormente. Con esto, se presenta en pantalla una previsualización del gráfico resultante, y un menú a la derecha en donde podemos seleccionar numerosas opciones para cambiar el aspecto del gráfico: Título, leyenda, colores, etc:

configurar-grafico

Una vez que estamos satisfechos del resultado final, pulsamos el botón “Insert Chart” que aparece en la parte inferior derecha, y podemos comprobar que en el artículo o página que estamos editando, se ha insertado un shortcode “visualizer”:

Tras guardar el artículo, seleccionamos “Ver entrada”, y podemos ver el resultado final, con el gráfico insertado en el artículo:

[visualizer id=”5512″]

 Publicado por en 2:50 pm

 Deja un comentario

(requerido)

(requerido)