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

¿Quieres agregar barras y gráficos en WordPress? Las ayudas visuales como gráficos, barras, gráficos circulares y otros son una manera perfecta de agregar datos de manera hermosa con su contenido. En este artículo, le mostraremos cómo crear barras y gráficos en WordPress con el complemento Visualizer WordPress Charts and Graphs.

Agregar tablas y gráficos en WordPress

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

Hay muchos complementos de WordPress para agregar barras, cuadros y gráficos con su contenido. Sin embargo, la queja más común que hemos escuchado de nuestros usuarios es que estos complementos suelen ser demasiado complicados de usar.

Algunos de estos complementos incluso esperan que los usuarios agreguen datos dentro de un código abreviado en formatos extremadamente complicados.

En lugar de usar esos complementos, muchos usuarios terminan creando gráficos en sus aplicaciones de oficina y convirtiéndolos en una imagen.

Esto podría funcionar si planeas no cambiarlo nunca. Sin embargo, una imagen no sustituye a un gráfico interactivo donde aparecen datos útiles cuando el usuario pasa el mouse sobre una sección en particular.

Una solución ideal de tablas y gráficos le permitiría:

  • Agregue datos de una fuente de datos en su computadora o en la web.
  • Rellene cuadros, tartas, gráficos y barras utilizando sus datos.
  • Cree gráficos hermosos, interactivos, coloridos y aptos para dispositivos móviles.
  • Lo más importante, debería permitirle actualizar los datos cuando lo desee.

Habiendo dicho eso, veamos cómo el complemento Visualizer WordPress Charts and Graphs lo ayuda a hacer todo eso.

Creación de barras y gráficos en WordPress con Visualizer

Lo primero que debe hacer es instalar y activar el Visualizador de tablas y gráficos de WordPress enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Si bien la versión gratuita hace casi todo lo que necesita, también tienen Visualizer Charts y Graphs Pro, que agrega funciones adicionales al complemento, como agregar datos directamente usando una interfaz similar a una hoja de cálculo e importar datos de otros gráficos.

Cuesta $ 79 por una licencia de un solo sitio con un año de soporte profesional y actualizaciones.

Nota: Este tutorial trata sobre la versión gratuita del complemento.

Tras la activación, debe visitar Medios » Biblioteca de visualizadores página. Aquí es donde aparecerán todos sus cuadros y gráficos.

Añadir nuevo gráfico

Debe hacer clic en el botón Agregar nuevo para agregar su primer gráfico.

Esto abrirá una ventana emergente en la pantalla. Verá diferentes tipos de gráficos disponibles con el complemento. Simplemente seleccione el tipo de gráfico que desea agregar y haga clic en el botón siguiente para continuar.

Seleccione un tipo de gráfico

El siguiente paso es agregar su fuente de datos en formato CSV. Si ha guardado sus datos como una hoja de cálculo utilizando Excel, Google Sheets o cualquier otro programa, simplemente puede exportarlos como un archivo CSV.

Puede descargar o guardar su archivo CSV en su computadora y luego cargarlo haciendo clic en el botón ‘Desde la computadora’.

Agregue su archivo CSV como fuente de datos para el gráfico

Su archivo CSV debe tener nombres de columna en la primera fila y tipo de datos en la segunda fila. El complemento admite estos tipos de datos: cadena, número, booleano, fecha, hora, fecha y hora del día.

Eche un vistazo a este archivo de ejemplo que hemos creado en Hojas de cálculo de Google.

Archivo CSV de ejemplo

Si está creando un archivo CSV con un editor de texto, eche un vistazo a este archivo CSV de ejemplo:


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

Agregar un gráfico en WordPress usando la hoja de cálculo de Google Drive

Si tiene los datos de su gráfico guardados como una hoja de cálculo en Google Drive, puede agregarlos a su gráfico sin exportarlos.

Abra su archivo de datos en las hojas de cálculo de Google y luego haga clic en Archivo » Publicar en la web.

Publicar en la web

Aparecerá una ventana emergente en la que deberá seleccionar cómo desea publicar este documento. Debe seleccionar Valores separados por comas (.csv) en el menú desplegable.

Publica tu hoja como CSV

No olvide hacer clic en el botón ‘Publicar’.

Ahora verá la URL disponible públicamente de su hoja como un archivo CSV. Debe copiar esta URL y volver al gráfico del visualizador.

Haga clic en el botón Desde la web y luego ingrese la URL del archivo csv de su hoja de cálculo de Google.

Agregar URL al archivo CSV de su hoja de cálculo de Google

Tan pronto como ingrese la URL, el complemento obtendrá su archivo CSV y mostrará una vista previa en vivo de su gráfico.

Ahora puede hacer clic en el botón Crear gráfico para guardar su gráfico.

Agregar un cuadro o gráfico en publicaciones/páginas de WordPress

Agregar un cuadro o gráfico a sus publicaciones y páginas de WordPress es tan simple como agregar imágenes.

Cree una nueva publicación / página o edite una existente donde desee agregar el gráfico. En la pantalla de edición, haga clic en el botón Agregar medios sobre el editor de publicaciones.

Añadir botón multimedia

Esto abrirá la ventana emergente de carga de medios de WordPress. Debe hacer clic en la pestaña de visualizaciones de la columna izquierda. Cargará todos los gráficos que haya creado y guardado en este sitio.

Inserte el gráfico en sus publicaciones o página de WordPress

Haga clic en el icono de inserción debajo de su gráfico. La ventana emergente desaparecerá y verá su gráfico agregado a su publicación de WordPress como un código abreviado.

Código abreviado de gráfico

Ahora puede guardar su publicación o página de WordPress y visitar su sitio web para ver el gráfico incrustado en su publicación de WordPress.

Edición de sus gráficos de visualizador en WordPress

Puede editar y cambiar sus gráficos en cualquier momento. Simplemente visite Medios » Biblioteca de visualizadores página. Desde allí, puede clonar un gráfico, eliminarlo o editar su configuración visual.

Edite o administre sus gráficos en WordPress

Actualizar datos para un gráfico existente sin cambiar el gráfico es bastante fácil con Visualizer.

Si agregó datos de una hoja de cálculo de Google, todo lo que necesita hacer es actualizar los datos en su hoja de cálculo e ir a Archivo » Publicar en la web y vuelva a publicar su hoja de cálculo. Sus cambios se reflejarán automáticamente en su gráfico.

Por otro lado, si cargó un archivo CSV, entonces necesita actualizar el archivo CSV en su computadora. Una vez hecho esto, seleccione el gráfico que desea actualizar y haga clic en el enlace de edición debajo del gráfico.

En la sección Cargar archivo CSV, simplemente cargue su nuevo archivo CSV. Los cambios en los datos se reflejarán automáticamente en las publicaciones o páginas donde haya insertado ese gráfico.

Agregar un gráfico en un widget de barra lateral de WordPress

Visualizer utiliza códigos abreviados para insertar gráficos. Simplemente ve a Medios » Biblioteca de visualizadoresallí verá un código abreviado debajo de sus gráficos.

Copia el shortcode y ve a Apariencia » Widgets. Arrastre y suelte un widget de texto en su barra lateral y pegue el código abreviado dentro del widget.

Si el código corto no funciona en el widget de texto, consulte nuestra guía sobre cómo usar códigos cortos en los widgets de la barra lateral de WordPress.

Esperamos que este artículo le haya ayudado a agregar barras y gráficos en su sitio de WordPress. Es posible que también desee ver nuestra lista de 24 complementos de WordPress que deben tener los sitios web de negocios

.

Deja un comentario