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

¿Desea agregar barras y gráficos en WordPress? Las ayudas visuales como el gráfico, las barras, el gráfico circular y otras son una forma perfecta de agregar datos de forma hermosa con su contenido. En este artículo, le mostraremos cómo crear barras y gráficos en WordPress con el plugin de Visualizer WordPress Charts and Graphs.

Agregar Gráficos y Gráficos en WordPress

El problema con las barras y 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 breve en formatos extremadamente complicados.

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

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

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

  • Agregue datos de una fuente de datos en su computadora o en la web.
  • Rellena tablas, pasteles, gráficos y barras usando tus datos.
  • Crea gráficos bonitos, interactivos, coloridos y fáciles de usar.
  • Lo más importante es que debería permitirle actualizar los datos siempre que lo desee.

Habiendo dicho eso, veamos 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 debe hacer es instalar y activar el plugin Visualizer WordPress Charts and Graphs. Para más detalles

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

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

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

Tras la activación, debe visitar Media »Visualizer Library página. Aquí es donde aparecerán todos sus cuadros y gráficos.

Agregar nuevo gráfico

Debe hacer clic en el botón Agregar nuevo para agregar su primer cuadro.

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 siguiente botón 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 usando Excel, Hojas de cálculo de Google o cualquier otro programa, entonces simplemente puede exportarlo como 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 origen 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, fecha y hora del día.

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

Ejemplo de archivo CSV

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


Navegador, visitantes
cuerda, números
Chrome, 7894
Firefox, 6754
Internet Explorer, 4230
Safari, 2106
Opera, 627

Agregar un gráfico en WordPress usando Google Drive Spreadsheet

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

Abra su archivo de datos en Google Spreadsheets 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 olvides 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 regresar a la tabla Visualizer.

Haga clic en el botón Desde la web y luego ingrese la URL del archivo csv de la 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 buscará 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 gráfico 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 la tabla. En la pantalla de edición, haga clic en el botón Agregar multimedia sobre el editor de publicaciones.

Agregar botón multimedia

Esto abrirá la ventana emergente de carga multimedia de WordPress. Debe hacer clic en la pestaña 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áginas de WordPress

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

Código shortcode

Ahora puede guardar su publicación o página de WordPress y visitar su sitio web para ver la tabla incrustada en su publicación de WordPress.

Edición de gráficos de Visualizer en WordPress

Puede editar y cambiar sus gráficos en cualquier momento. Simplemente visita Media »Visualizer Library 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 los datos de 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 y acceder a Archivo »Publicar en la web y republique su hoja de cálculo. Sus cambios se reflejarán automáticamente en su tabla.

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 publicaciones o páginas donde haya insertado ese gráfico.

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

Visualizer usa códigos cortos para insertar gráficos. Simplemente ve a Media »Visualizer Library , allí verá un código corto debajo de sus gráficos.

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

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