Cómo crear barras y gráficos en WordPress con el Visualizador

¿Quieres añadir barras y gráficos en WordPress? Las ayudas visuales como los gráficos, las barras, los gráficos circulares y otros son una forma perfecta de añadir datos de forma bonita a tu contenido. En este artículo, te mostraremos cómo crear barras y gráficos en WordPress con el plugin Visualizer WordPress Charts and Graphs

El problema de las barras y los gráficos en WordPress

Hay muchos plugins de WordPress para añadir barras, tablas y gráficos a tu contenido. Sin embargo, la queja más común que hemos escuchado de nuestros usuarios es que estos plugins suelen ser demasiado complicados de usar

Algunos de estos plugins incluso esperan que los usuarios añadan datos dentro de un shortcode en formatos extremadamente complicados.

En lugar de utilizar estos plugins, muchos usuarios acaban creando gráficos en sus aplicaciones ofimáticas y convirtiéndolos en una imagen

Esto puede funcionar si piensas no cambiarlo nunca. Sin embargo, una imagen no sustituye a un gráfico interactivo en el que aparecen datos útiles cuando el usuario pasa el ratón por una sección concreta

Una solución ideal de gráficos y diagramas te permitiría

• Añadir datos desde una fuente de datos en tu ordenador o en la web.
• Rellena diagramas, pasteles, gráficos y barras con tus datos.
• Crea gráficos bonitos, interactivos, coloridos y aptos para móviles.
• Y lo más importante, debe permitirte actualizar los datos siempre que quieras.

Dicho esto, vamos a ver cómo el plugin Visualizer WordPress Charts and Graphs te ayuda a hacer todo eso

Crear barras y gráficos en WordPress con Visualizer

Lo primero que tienes que hacer es instalar y activar el Visualizador de gráficos y diagramas de WordPress plugin. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Aunque la versión gratuita hace casi todo lo que necesitas, también tienen Visualizer Charts and Graphs Pro, que añade funciones adicionales al plugin, como añadir datos directamente mediante una interfaz similar a la de una hoja de cálculo e importar datos de otros gráficos

Cuesta 79 dólares por una licencia para un solo sitio con un año de soporte profesional y actualizaciones

Nota: Este tutorial es sobre la versión gratuita del plugin.

Tras la activación, tienes que visitar Medios " Biblioteca del Visualizador página. Aquí es donde aparecerán todas tus tablas y gráficos

Tienes que hacer clic en el botón Añadir nuevo para añadir tu primer gráfico

Esto hará que aparezca una ventana emergente en la pantalla. Verás diferentes tipos de gráficos disponibles con el plugin. Simplemente selecciona el tipo de gráfico que quieres añadir y haz clic en el botón siguiente para continuar.

El siguiente paso es añadir tu fuente de datos en formato CSV. Si has guardado tus datos como hoja de cálculo utilizando Excel, Google Sheets o cualquier otro programa, entonces puedes simplemente exportarlos como archivo CSV

Puedes descargar o guardar tu archivo CSV en tu ordenador y luego subirlo haciendo clic en el botón "Desde el ordenador"

Tu archivo CSV debe tener los nombres de las columnas en la primera fila y el tipo de datos en la segunda. El plugin admite estos tipos de datos: cadena, número, booleano, fecha, fecha de la hora y hora del día

Echa un vistazo a este archivo de ejemplo que hemos creado en Google Sheets

Si vas a crear un archivo CSV con un editor de texto, echa un vistazo a este archivo CSV de ejemplo


Browser,visitors
string,numbers
Chrome,7894
Firefox,6754
Internet Explorer,4230
Safari,2106
Opera,627


Añadir un gráfico en WordPress utilizando una hoja de cálculo de Google Drive

Si tienes los datos de tu gráfico guardados como una hoja de cálculo en Google Drive, puedes añadirlos a tu gráfico sin necesidad de exportarlos

Abre tu archivo de datos en Google Spreadsheets y luego haz clic en Archivo " Publicar en la web

Aparecerá una ventana emergente en la que tienes que seleccionar cómo quieres publicar este documento. Tienes que seleccionar Valores Separados por Comas (.csv) en el menú desplegable

No olvides hacer clic en el botón "Publicar"

Ahora verás la URL pública de tu hoja como un archivo CSV. Tienes que copiar esta URL y volver al gráfico del Visualizador

Haz clic en el botón Desde la Web e introduce la URL del archivo csv de tu hoja de cálculo de Google

En cuanto introduzcas la URL, el plugin recuperará tu archivo CSV y mostrará una vista previa en vivo de tu gráfico

Ahora puedes hacer clic en el botón de crear el gráfico para guardarlo

Añadir un gráfico en las entradas/páginas de WordPress

Añadir una tabla o un gráfico a tus entradas y páginas de WordPress es tan sencillo como añadir imágenes

Crea un nuevo post / página o edita uno existente donde quieras añadir el gráfico. En la pantalla de edición, haz clic en el botón Añadir Medios, encima del editor de la entrada

Esto hará que aparezca la ventana emergente de carga de medios de WordPress. Tienes que hacer clic en la pestaña de visualizaciones de la columna de la izquierda. Se cargarán todos los gráficos que hayas creado y guardado en este sitio

Haz clic en el icono de inserción que hay debajo de tu gráfico. La ventana emergente desaparecerá y verás tu gráfico añadido a tu entrada de WordPress como un shortcode

Ahora puedes guardar tu entrada o página de WordPress y visitar tu sitio web para ver el gráfico incrustado en tu entrada de WordPress

Editar tus gráficos del visualizador en WordPress

Puedes editar y cambiar tus gráficos en cualquier momento. Simplemente visita Medios " Biblioteca del visualizador página. Desde ahí puedes clonar un gráfico, eliminarlo o editar su configuración visual.

Actualizar los datos de un gráfico existente sin cambiar el gráfico es bastante fácil con el Visualizador

Si has añadido datos desde una hoja de cálculo de Google, lo único que tienes que hacer es actualizar los datos en tu hoja de cálculo e ir a Archivo " Publicar en la web y vuelve a publicar tu hoja de cálculo. Tus cambios se reflejarán automáticamente en tu gráfico.

Por otro lado, si has subido un archivo CSV, tienes que actualizar el archivo CSV en tu ordenador. Una vez hecho esto, selecciona el gráfico que quieres actualizar y haz clic en el enlace de edición que hay debajo del gráfico

En la sección Cargar archivo CSV simplemente sube tu nuevo archivo CSV. Los cambios en los datos se reflejarán automáticamente en las entradas o páginas donde hayas insertado ese gráfico.

Añadir un gráfico en un widget de la barra lateral de WordPress

El Visualizador utiliza códigos cortos para insertar gráficos. Sólo tienes que ir a Medios " Biblioteca del Visualizadorallí verás un shortcode debajo de tus gráficos

Copia el shortcode y ve a Apariencia " Widgets. Arrastra y suelta un widget de texto en tu barra lateral y pega el shortcode dentro del widget

Si el shortcode no funciona en el widget de texto, consulta nuestra guía sobre cómo utilizar los shortcodes en los widgets de la barra lateral de WordPress.

Esperamos que este artículo te haya ayudado a añadir barras y gráficos en tu sitio de WordPress. Quizás también quieras ver nuestra lista de 24 plugins de WordPress imprescindibles para sitios web de empresas

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.