Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

¿Quieres añadir barras y gráficos a tu sitio web WordPress?

Añadiendo ayudas visuales como gráficos, barras o diagramas circulares, puede presentar sus datos de forma atractiva y fácil de entender para los usuarios.

En este artículo, le mostraremos cómo crear fácilmente barras y gráficos en WordPress con Visualizer.

Adding Charts and Graphs in WordPress

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

Existen muchos plugins para añadir barras, diagramas 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 esos plugins, muchos usuarios acaban creando gráficos en sus aplicaciones ofimáticas y convirtiéndolos en una imagen para sus sitios web en WordPress.

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

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

  • Añade datos de una fuente de datos de tu ordenador o de la web.
  • Rellena cuadros, tartas, gráficos y barras con tus datos.
  • Cree gráficos atractivos, interactivos, coloridos y adaptados a dispositivos móviles.
  • Lo más importante es que te permita actualizar los datos siempre que quieras.

Añadir un gráfico con el Visualizador le ayudará a aumentar la participación de los usuarios e incluso a facilitar la comprensión de sus datos.

Dicho esto, veamos cómo añadir fácilmente barras y gráficos a su sitio WordPress.

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

Puedes crear fácilmente barras y gráficos con WordPress usando el plugin Visualizer. Es el mejor plugin de visualización de datos de WordPress del mercado que te permite crear visualizaciones de datos interactivas para tu sitio.

Incluso tiene un plan gratuito que puedes utilizar para crear barras y gráficos.

En primer lugar, es necesario instalar y activar el Visualizer: Tables and Charts Manager para WordPress plugin. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Nota: Este tutorial utilizará la versión gratuita del plugin. Si desea desbloquear las características pro, entonces usted puede comprar un plan de pago.

Una vez activado, debe visitar la página Visualizador ” Añadir nuevo gráfico desde el escritorio de WordPress.

Una vez allí, elige el tipo de gráfico que quieres crear, como una tabla, un gráfico circular, de líneas o de barras. A continuación, haz clic en el botón “Siguiente”.

Choose a chart type in the Visualizer plugin

Esto le llevará al siguiente paso, en el que deberá hacer clic en el botón “Elegir archivo” para importar los datos de la hoja de cálculo Excel desde el ordenador.

Si has guardado tu hoja de cálculo de Excel o Google como archivo CSV, puedes importarlo desplegando la pestaña “Importar datos desde URL”.

Una vez hecho esto, haz clic en el botón “Importar desde CSV”. A continuación, puede introducir la URL de su archivo CSV para incrustar el archivo.

Add CSV file URL

Tenga en cuenta que su archivo CSV debe tener los nombres de las columnas en la primera fila y los tipos de datos en la segunda. El plugin es compatible con los siguientes tipos de datos: cadena, número, booleano, fecha, hora y hora del día.

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

Pie chart data example

Si está creando un archivo CSV con un editor de texto, consulte este archivo CSV de ejemplo:

Actividades diarias,Hora
cadena,números
Trabajar,8
Dormir,7
Comer,3
Ver TV,2
Desplazarse,1

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

En primer lugar, abre tu archivo de datos en Google Spreadsheets y, a continuación, haz clic en el enlace Archivo ” Compartir ” Publicar en la web.

Click Publish to web option

Aparecerá una ventana emergente en la que deberá elegir cómo publicar este documento.

Sólo tiene que seleccionar la opción Valores separados por comas (.csv) en el menú desplegable y hacer clic en el botón “Publicar”.

Choose the CSV option from the dropdown menu

Ahora verá la URL pública de su hoja como un archivo CSV. Copie esta URL y vuelva al gráfico del Visualizador.

Tendrá que añadir esta URL en el campo “Importar desde CSV”.

Copy the URL to add it to the Visualizer

Cuando introduzcas la URL, el plugin buscará tu archivo CSV y mostrará una vista previa en directo de tu gráfico.

Ahora, puedes cambiar a la pestaña “Ajustes” de la parte superior para configurar los ajustes generales, como los estilos de fuente, el formato de los números, el tamaño y la colocación, los ajustes de tamaño y mucho más.

Cuando haya terminado, haga clic en el botón “Crear” situado en la parte inferior de la indicación.

Customize the pie chart

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

Añadir un gráfico a sus entradas y páginas de WordPress es tan sencillo como añadir imágenes.

En primer lugar, abre una página o entrada nueva o antigua en la que quieras añadir el gráfico circular. Una vez allí, haz clic en el botón “Añadir bloque” (+) situado en la esquina superior izquierda de la pantalla.

Esto abrirá el menú de bloques desde el que tiene que buscar y añadir el bloque Visualizer Chart.

Una vez hecho esto, haga clic en el botón “Mostrar un gráfico existente” del propio bloque.

Click Display an existing chart button

Se abrirá una nueva indicación en el bloque en la que deberá seleccionar el gráfico circular que acaba de crear.

Por último, haga clic en el botón “Publicar” o “Actualizar” para guardar sus ajustes.

Ahora, puede visitar su sitio WordPress para ver el gráfico circular en acción.

Pie chart preview

Editar los gráficos del visualizador en WordPress

Puede editar y cambiar sus gráficos en cualquier momento. Simplemente visite la página Visualizador ” Biblioteca de Grá ficos desde el escritorio de WordPress.

Desde ahí, puede clonar un gráfico, borrarlo o editar sus ajustes visuales utilizando los iconos situados bajo el nombre del gráfico.

Edit chart

Actualizar los datos de un gráfico existente sin cambiar el gráfico también es bastante fácil con Visualizer.

Si has añadido datos de una hoja de cálculo de Google, lo único que tienes que hacer es actualizar los datos de la hoja de cálculo, ir a la opción Archivo ” Compartir ” Publicar en la web y volver a publicar la hoja de cálculo.

Los cambios se reflejarán automáticamente en el gráfico.

Por otra parte, si usted subió un archivo CSV, entonces usted necesita actualizar el archivo CSV en su ordenador. Una vez hecho esto, seleccione el gráfico que desea actualizar y haga clic en el enlace de edición situado debajo del gráfico.

En la sección “Importar 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 haya insertado ese gráfico.

Bonificación: Crear un organigrama de empresa en WordPress

También puede añadir un organigrama de empresa en WordPress si tiene un sitio de pequeña empresa. Este organigrama mostrará cómo está estructurada su empresa, desde el director general hasta los distintos equipos y empleados de cada equipo.

Un organigrama ayuda a los clientes potenciales a saber más acerca de su empresa y facilita la comunicación entre los equipos.

An org chart, created using WordPress

Para crear un organigrama, basta con instalar y activar el plugin Organigrama. Para más detalles, consulte nuestro tutorial sobre cómo instalar un plugin de WordPress.

Una vez activado, visite la página Wpdevart Chart ” Charts y haga clic en el botón ‘Add New’. Esto le llevará a una nueva pantalla donde podrá añadir un nombre para el gráfico.

A continuación, añada la imagen y el título del director general de su empresa en el elemento de la pantalla. A continuación, haz clic en el icono de la flecha.

Start building an organizational chart

Esto añadirá otro elemento en el que puede añadir un título y una imagen para la persona que viene después del Director General. A continuación, haga clic de nuevo en el elemento para ver los múltiples iconos de flecha en diferentes direcciones.

Esto le ayudará a crear una estructura de empresa con varias ramas / equipos.

Customizing a company employee chart

Una vez que hayas terminado, sólo tienes que hacer clic en el botón “Guardar” para guardar tus ajustes.

Ahora abre la página donde quieres añadir el organigrama y añade el bloque ‘WpDevArt organigrama’. A continuación, seleccione el gráfico que ha creado en el menú desplegable dentro del propio bloque.

Por último, haz clic en el botón “Publicar” o “Actualizar” para guardar tus ajustes. Para más información, consulte nuestro tutorial sobre cómo crear el organigrama de su empresa en WordPress.

Adding a block to a WordPress website

Esperamos que este artículo te haya ayudado a añadir barras y gráficos a tu sitio de WordPress. Puede que también quieras ver nuestra guía para principiantes sobre cómo personalizar los colores en tu sitio web WordPress y nuestras selecciones de expertos sobre los plugins WordPress imprescindibles para sitios web de negocios.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

22 comentariosDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Adam says

    I am able to generate the chart and publish it on my site, but how to I edit the height and width once the shortcode?

  3. Judith Hollies says

    Thank you so much for this clear tutorial. I’m trying to create a pie chart in wordpress and have successfully activated the visualizer plug-in. But when I copy the info over from either excel or google drive (following your steps) both times the first row of stats is omitted in the pie chart. I’ve tried re-ordering the stats, placing them in different locations, but it’s always the first row that gets omitted! Can you help me! Judith

  4. mandeep says

    How we comparison between two app like app A and app B and now for i want to make a graph chart both of them in blog of wordpress?How i do it?Can you tell me here?

  5. Felix says

    Thanks for the review. How do you handle values with a comma eg. 2.232,42 if you have to use commata as a seperator for the Visualizer?

  6. david says

    Hi Great plugin, I solved all my problems except one.
    How do you edit a chart in the visualizer library, when I click on the edit icon all I get is a blank screen, is this just me – plugin conflict or something, or is there a problem with the Visualizer plugin
    Any ideas?
    Thanks
    David

  7. david says

    Hi, I’m trying to replicate your example above from “Adding a Chart in WordPress using a CSV file”, but when I click “From Computer” in “Upload csv file” and select the file I copied from your example I get: “CSV file is broken or invalid. Please, try again”
    Any ideas what the problem may be, any help greatly appreciated.
    Thanks
    David

  8. Richard G says

    Hello

    Thank you for this post

    However maybe you can help me for one of my client. He has a group of students, each one have a private area

    My client wants to integrate somes customs fields. Basicly each student will enter his datas into this custom fields, and these datas will be convert into a chart or a curve (tracking weight loss or mass gain for exemple)

    Any idea?

    Thank you
    Richard

  9. Chad says

    Thanks for the great tutorial. When I drop down the “upload CSV file” I am unable to click on the button for “From Web”, as it is not highlighted in blue. So I must add the data “from Computer”. I noticed that in the screen shot above the “from Web” button is also not highlighted. Has anybody else had this problem and figured out a solution?
    Thanks Again

  10. Artur says

    Thanks a lot !!!!!!

    I love you guys, you solve my very long issue.
    Thanks for this excellent plugin.

    Recommended to all.

  11. Franco Castillo says

    I just downloaded the Visualizer plugin, and I opened it in Winrar. Can anyone tell me how to activate the plugin in Winrar?

  12. Richard says

    Hello

    Yes very interesting indeed thanks!

    I have the same question (and sorry for my english), i need to create personnal charts from datas feed by a user thrue a table on the website(and insert the final chart in the profil page of the user). Do you think it can be done? do you have any clues?

    Thanks

  13. Stephen says

    Great looking plugin. Have been waiting for something like this for ages. :)

    How feasible is it to be able to read data from custom fields, instead of a CSV file or a Google Drive spreadsheet?

    Is this a feature that you may consider implementing?

    That way, data could be kept in the WordPress database, and be updated from the front end of the website.

    For me, that would be really useful!

    – Stephen

  14. Jotpreet Singh says

    hey, Awesome. Can this be done via google docs or any other online method. I’m running a blog on wordpress.com. Hope something, would come out. Do you have any ?

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.