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

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

El problema con las barras y gráficos en WordPress

Hay muchos plugins de WordPress para agregar barras, tablas y gráficos con su 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 código abreviado en formatos extremadamente complicados.

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

Esto podría funcionar si usted está planeando 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 encima de una sección determinada.

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

  • Añada datos de una fuente de datos en su ordenador o en la web.
  • Rellene cuadros, pasteles, gráficos y barras utilizando sus datos.
  • Cree gráficos hermosos, interactivos, coloridos y móviles.
  • Lo más importante es que le permite actualizar los datos cuando lo desee.

Dicho esto, veamos cómo el plugin Visualizer WordPress Charts and Graphs le ayuda a hacer todo eso.

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

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

Mientras que la versión gratuita hace casi todo lo que usted necesita, también tienen Visualizer Charts y Graphs Pro que agrega características adicionales al plugin, tales como agregar datos directamente usando una hoja de cálculo como interfaz e importar datos de otros gráficos.

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

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

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

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

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

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

Puede descargar o guardar el archivo CSV en su ordenador y, a continuación, cargarlo haciendo clic en el botón «Desde el ordenador».

El archivo CSV debe tener nombres de columna en la primera fila y tipo de datos en la segunda fila. El plugin soporta estos tipos de datos: string, number, boolean, date, time date, time date, and time of day.

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

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


>
Navegador,visitantes

cadena,números

Cromo,7894

Firefox,6754

Internet Explorer,4230

Safari,2106

Opera,627

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

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

Abra su archivo de datos en las hojas de cálculo de Google y, a continuación, haga clic en Archivo » Publicar en la web .

Esto mostrará 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.

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 volver al gráfico del visualizador.

Haga clic en el botón De la Web y, a continuación, introduzca la URL del archivo csv de la hoja de cálculo de Google.

Tan pronto como ingrese la URL, el plugin 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.

Añadir un gráfico en WordPress Posts/Pages

Añadir un gráfico a tus mensajes y páginas de WordPress es tan simple como añadir imágenes.

Cree una nueva entrada / página o edite una ya existente en la que desee añadir el gráfico. En la pantalla de edición, haz clic en el botón Agregar medios encima del editor de publicaciones.

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

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

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

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

Puede editar y cambiar sus gráficos en cualquier momento. Simplemente visite Media » Visualizer Library page. Desde allí puede 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 muy fácil con Visualizador.

Si ha añadido datos de una hoja de cálculo de Google, todo lo que tiene que hacer es actualizar los datos de su hoja de cálculo y pasar a Archivo » Publicar en la web y volver a publicar su hoja de cálculo. Sus cambios se reflejarán automáticamente en su gráfico.

Por otro lado, si ha cargado un archivo CSV, deberá actualizar el archivo CSV en el equipo. 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 los mensajes o páginas en las que haya insertado ese gráfico.

Agregar un gráfico en un widget de WordPress Sidebar

El visualizador utiliza atajos para insertar gráficos. Simplemente vaya a Media » Visualizer Library , allí verá un código abreviado debajo de sus gráficos.

Copia el código abreviado y ve a Apariencia » Widgets . Arrastra y suelta un widget de texto a tu barra lateral y pega el código abreviado dentro del widget.

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

Esperamos que este artículo le haya ayudado a añadir barras y gráficos en su sitio de WordPress. También puede ver nuestra lista de 24 plugins que deben tener WordPress para sitios web de negocios

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja un comentario