Saltar al contenido

Cómo añadir gráficos (charts) y tablas de datos en WordPress gratis

2ZgPLKm

Ya sea que usted realice encuestas, compilación de datos o estudio estadístico, la creación de cuadros y gráficos es la mejor manera de presentar la información en su sitio web de WordPress de una manera visual. Le permite convertir conjuntos de datos y hallazgos complejos en información fácil de entender.

En este post te mostraremos cómo puedes crear gráficos y diagramas interactivos y dinámicos y añadirlos a tu sitio web de WordPress usando el plugin gratuito de Visualizador. Antes de comenzar, repasemos rápidamente algunas de las principales razones por las que debería crear cuadros y gráficos directamente en WordPress en lugar de utilizar creadores de gráficos o software de gráficos.

Por qué debería usar un plugin para hacer gráficos en WordPress

Si usted crea regularmente cuadros y gráficos para añadir a su sitio web, lo más probable es que utilice una herramienta como Excel o Google Sheets. El problema con este enfoque es el flujo de trabajo y el proceso:

  1. Crear cuadros (o gráficos) en Excel o Google Sheets.
  2. Haga una captura de pantalla de la tabla (o gráfico).
  3. Cárguelo como una imagen en su sitio web de WordPress.

Este enfoque es ideal para cualquiera que cree gráficos ocasionalmente. Pero, ¿qué pasa si desea que sus gráficos sean nativos del sitio, tengan cierta interactividad, respondan con movilidad e incluso se actualicen desde una fuente de terceros en tiempo real? Si eso te suena a ti, entonces es una mejor idea usar un plugin de gráficos y tablas de WordPress – como Visualizador.

Aquí hay algunas razones más por las que debería considerar el uso de un plugin para hacer cuadros y gráficos directamente en WordPress:

  • Le permite construir gráficos y publicarlos desde un solo lugar. Si tiene que crear cuadros y gráficos de forma regular, esto le ayudará a ahorrar mucho tiempo y a mejorar su flujo de trabajo.
  • Le permite abrir fácilmente un proyecto y realizar cambios y modificaciones rápidas. Cuando trabaje con Excel o Google Sheets, tendrá que volver atrás y encontrar el archivo en el que estaba trabajando, hacer los cambios necesarios, tomar una nueva captura de pantalla y volver a cargarlo en su sitio web.
  • Acceso a funciones interactivas para que sus cuadros y gráficos sean más interesantes. Simplemente no se pueden añadir elementos interactivos a las imágenes o capturas de pantalla.
  • Facilita la colaboración con otros usuarios. Por ejemplo, si necesita autores o editores para revisar el gráfico (y hacer cambios o adiciones), es mucho más fácil si todo el mundo es capaz de modificar el mismo gráfico de modo que no tenga múltiples versiones flotando alrededor.

En pocas palabras, un plugin de gráficos y tablas de WordPress ayuda a simplificar su flujo de trabajo y viene con la mayoría de las características que necesitará para agregar gráficos atractivos (e interactivos) a su sitio web de WordPress.

Presentamos Visualizador: Administrador de Tablas y Gráficos para WordPress

El visualizador de Themeisle: Tables and Charts Manager para WordPress es un plugin ligero que permite a los usuarios crear cuadros, gráficos y tablas directamente desde su sitio web de WordPress.
Visualizador WordPress PluginEl
plugin cuenta con una interfaz fácil de usar que permite a los usuarios crear, administrar e incrustar imágenes interactivas en mensajes y páginas. El Visualizador viene con ocho tipos de gráficos diferentes:

  1. Tabla
  2. Gráfico de tartas y donuts
  3. Gráfico de líneas
  4. Gráfico de área
  5. Gráfico geográfico
  6. Gráfico de barras
  7. Gráfico de columnas
  8. Gráfico de dispersión

Podrá personalizar las tablas, cuadros y gráficos que cree cambiando sus colores, añadiendo u ocultando texto y utilizando diferentes tipos de letra. Además, cada gráfico tiene sus propias opciones que le permiten personalizar su aspecto.

Además, también puede cambiar el tipo de gráfico que se muestra en el front-end de su sitio web. Por ejemplo, puede cambiar fácilmente un gráfico circular por un gráfico lineal con sólo hacer clic en el botón de edición y elegir el tipo de gráfico al que desea cambiar. Las tablas, cuadros y gráficos que se crean con Visualizador se renderizan utilizando tecnología HTML5 y SVG. En otras palabras, son totalmente receptivos y portátiles entre plataformas.

El plugin de Visualizador también tiene una versión premium, Visualizer Pro, que comienza en $59 para una licencia de un solo sitio. La versión premium del plugin desbloquea tipos de gráficos adicionales (gráfico de calibres, gráfico de velas, línea de tiempo, combo, área polar y gráfico de radar/ araña) y ofrece características avanzadas que incluyen:

  • Otorgar permisos de edición a los usuarios.
  • Construcción privada de gráficos y diagramas.
  • Sincronice automáticamente los gráficos con su archivo en línea.
  • Acceso al editor en vivo para una edición de datos rápida y sencilla.
  • Importación de datos directamente desde otros gráficos.

Ahora que sabemos lo que es el plugin del Visualizador y lo que puedes hacer con él, vamos a repasar un tutorial rápido paso a paso que explica cómo empezar a crear cuadros y gráficos en WordPress.

Cómo crear gráficos y gráficos en WordPress utilizando Visualizador

Visualizer es uno de los mejores (y más intuitivos) plugins disponibles para crear tablas, cuadros y gráficos en WordPress. Aquí, le guiaremos a través del tutorial paso a paso para crear cuadros y gráficos visualmente atractivos y mostrarlos en el front-end de su sitio.

Paso #1: Instalar y Activar el Plugin

El primer paso es instalar el plugin del Visualizador en tu sitio web de WordPress. Dado que se trata de un plugin gratuito, puede hacerlo directamente desde el panel de administración dirigiéndose a Plugins > Añadir nuevo.

Una vez que haya instalado el plugin, haga clic en el botón Activar. Verá que se ha añadido un nuevo elemento de menú en el menú de la barra lateral llamado Visualizador.

Paso #2: Añadir un nuevo gráfico

Una vez que haya instalado el plugin del Visualizador, haga clic en el elemento de menú Visualizador del panel de administración para acceder a la Biblioteca del Visualizador.

Desde aquí, haga clic en el botón Agregar nuevo para comenzar a crear su primer gráfico.

En la pantalla emergente, verá algunos tipos de gráficos entre los que puede elegir.

Haga clic en el botón de opción junto al tipo de gráfico que desea agregar a su sitio web de WordPress. Para el propósito de este tutorial, lo demostraremos creando un sencillo gráfico de columnas. Haga clic en el botón Siguiente en la parte inferior de la pantalla para continuar.

Paso #3: Importar datos al gráfico

En este paso, le mostraremos cómo puede importar datos y agregarlos a su tabla, gráfico o gráfica. El visualizador agrega automáticamente datos de muestra a su gráfico para que pueda ver cómo se vería en el front-end.

Para sustituir los datos ficticios por los suyos propios, puede seleccionar uno de los siguientes métodos de importación de datos:

  • Importar datos de un archivo
  • Importar datos de la URL
  • Importar desde otro gráfico (disponible con la versión Pro)
  • Importar desde WordPress (disponible con la versión Pro)
  • Importar desde la base de datos (disponible con la versión Pro)
  • Importar datos manualmente

Con fines de demostración, importaremos un conjunto de datos de un archivo CSV. Para ello, haga clic en el botón Seleccionar archivo en la opción Importar datos de archivo y busque el archivo CSV en el escritorio. Presione el botón Importar para continuar.

En el panel izquierdo, debería poder ver una vista previa de cómo serán los nuevos datos importados. Si necesita hacer cambios en su conjunto de datos, puede actualizar su archivo CSV y volver a importarlo.

Pro-tip: Si no está seguro de cómo formatear los datos en su archivo CSV, puede descargar un archivo CSV de ejemplo desde el plugin. Una vez que haya seleccionado el tipo de gráfico, habrá un enlace de texto al ejemplo CSV en el panel derecho de la ventana emergente (como se muestra arriba). Haga clic aquí para descargar el ejemplo de archivo CSV correspondiente.

Paso #4: Personalizar el Gráfico

Ahora que ha seleccionado un tipo de gráfico e importado su conjunto de datos, puede personalizar su tabla, gráfico o gráfico. Aquí está el cómo:

Desde la misma pantalla, verá un enlace llamado Avanzado directamente debajo de las opciones de importación de datos. Haga clic en el enlace para ver las opciones de personalización disponibles para el tipo de gráfico que eligió.

En términos generales, debería ver los ajustes generales (títulos de los gráficos, fuentes, leyendas, sugerencias y animaciones), acciones de front end, configuraciones manuales y ajustes de tamaño y ubicación de los gráficos. Dependiendo del tipo de gráfico que haya elegido crear, es posible que vea opciones ligeramente diferentes en la sección Configuración del gráfico.

Una de las características destacadas que obtiene con Visualizer es su capacidad de permitirle habilitar opciones de front-end para sus gráficos. Puede acceder a estos ajustes dirigiéndose a Ajustes de Gráficos > Acciones de Frontend > Acciones.

Las opciones disponibles incluyen:

  • Imprimir. Para habilitar la impresión del gráfico o la tabla.
  • CSV. Para permitir la descarga de los datos como CSV directamente desde el front-end.
  • Excel. Para habilitar el download de los datos como una hoja de cálculo de Excel.
  • Copiado. Para permitir la copia de los datos en el portapapeles.

Cuando haya personalizado su gráfico y habilitado todas las opciones de interfaz que desea que estén disponibles, haga clic en el botón Crear gráfico.

Paso #5: Agregar el código corto del gráfico a una página o mensaje

Una vez que haya creado el gráfico, se le redirigirá automáticamente a la pantalla de la biblioteca del visualizador desde la que comenzó. Debería poder ver el cuadro o gráfico que acaba de crear. El siguiente paso es añadir el gráfico al front-end de su sitio. Para ello, deberá copiar el código abreviado del gráfico. Esto es lo que tienes que hacer:

Debería poder ver el código abreviado del gráfico en la esquina inferior izquierda del gráfico directamente debajo de la vista previa. Simplemente cópielo en su portapapeles.

A continuación, cree una nueva entrada o página en la que desee añadir el gráfico. (También puede abrir un mensaje o una página existente.) Simplemente pegue el código abreviado del gráfico en el lugar en el que desee mostrarlo.

Haga clic en el botón Vista previa para obtener una vista previa de su mensaje o página en el front-end de su sitio. Debería ser algo así:

Debe tomarse un momento para asegurarse de que todo funciona correctamente (por ejemplo, las animaciones y las opciones de front-end). Si todo se ve bien, puedes seguir adelante y publicar el post o la página.

Sin embargo, si necesita hacer modificaciones a su tabla, gráfico o gráfica, simplemente regrese a Visualizer > Chart Library desde el panel de administración y edite su gráfico. Puede personalizar aún más el gráfico, habilitar (o deshabilitar) las opciones, cambiar las posiciones de la leyenda e incluso reemplazar el conjunto de datos.

Dado que el código abreviado del gráfico sigue siendo el mismo incluso después de la edición, no tendrá que volver al mensaje o a la página y actualizarlo manualmente. Cualquier cambio que realice en el gráfico desde Visualizador se reflejará automáticamente en el front-end de su sitio.

Ejemplos de gráficos interactivos

Aquí hay algunos ejemplos interactivos en vivo de las tablas, cuadros y gráficos que puede crear usando la versión gratuita del plugin Visualizador:

Demostración de Pie Chart

WorkEatCommuteWatch TVSleep45.8%29.2%8.3%8.3%8.3%8.3%

TareaHoras por día
Trabajo11
Comer2
Viaje al trabajo2
Ver la televisión2
Dormir7
Dormir

Demostración de Geo Chart

25251,6001,600
1,600

Demostración de Gráfico de Columnas

Populat…Populat…MilanNápolesTurínPalermoGénovaBoloniaFlorencia0250,000500,000750,0001,000,0001,250,0001,500,000

CiudadPoblación en 2012Población en 2011Población en 2010
Milán1,324,110907,563607,906
Nápoles959,5741,324,1101,137,128
Turín907,563959,5741,080,181
Palermo655,875371,282907,563
Génova607,906580,181707,563
Bolonia380,181655,875480,181
Florencia371,282607,906655,875
Población en 2010

Demostración de Gráfico de Líneas

CatsBlanket1Blanket2ABCDEFGHIJKLMN02468

xGatosManta1Manta2
A110.5
B20.51
C410.5
D80.51
E710.5
F70.51
G810.5
H40.51
I210.5
J3.50.51
K310.5
L3.50.51
M110.5
N10.51
Manta2

Demostración de Gráfico de Área

BoliviaEcuadorMadag…PapuaNuevaGuineaRwanda2004/05/012005/06/012006/07/012007/08/012008/09/0102505007501,0001,2501,500

MesBoliviaEcuadorMadagascarPapúa Nueva GuineaRuanda
2004/05/01165938522998450
2005/06/011351,1205991,268288
2006/07/011571,167587807397
2007/08/011391,110615968215
2008/09/011366916291,026366
Ruanda

Demostración de Gráfico de Barras

AustriaBulgariaDinamarcaGrecia0500,0001,000,0001,500,0002,000,0002003200420052005200620072008

AñoAustriaBulgariaDinamarcaGrecia
20031,336,060400,3611,001,582997,974
20041,538,156366,8491,119,450941,795
20051,576,579440,514993,360930,593
20061,600,652434,5521,004,163897,127
20071,968,113393,032979,1981,080,887
20081,901,067517,206916,9651,056,036
Grecia

Demostración de Scatter Chart

MasculinoFemenino020406002040406080

DispersiónMasculinoFemenino
107554
2064
332223
5516
1461
48352
Femenino

Ejemplo de tabla de datos

MesBoliviaEcuadorMadagascarPapúa Nueva GuineaRuanda
2004/05/01165938522998450
2005/06/011351,1205991,268288
2006/07/011571,167587807397
2007/08/011391,110615968215
2008/09/011366916291,026366

Conclusión

Excel o Google Sheets puede no ser la forma más eficiente de añadir tablas, cuadros y gráficos a su sitio web de WordPress, especialmente si necesita hacerlo con frecuencia. En su lugar, le recomendamos que utilice el Visualizerplugin gratuito que le permite:

  • Cree, edite y administre todas sus tablas, cuadros y gráficos sin tener que salir de su sitio web de WordPress.
  • Ofrezca mejores experiencias a los usuarios incrustando gráficos interactivos y visualmente atractivos en sus mensajes y páginas.
  • Personalice fácilmente los cuadros y gráficos que cree para que coincidan con la marca de su sitio.
  • Active las opciones de interfaz que permiten a los visitantes imprimir gráficos, descargar conjuntos de datos (como hojas de cálculo CSV y Excel) y copiar datos directamente en su portapapeles.

Además, siempre que esté listo para llevar las cosas al siguiente nivel, puede actualizar a Visualizer Pro para desbloquear tipos de gráficos adicionales y acceder a funciones avanzadas. ¿Cuáles son algunos de los diferentes tipos de tablas y gráficos que necesitas añadir a tu sitio web de WordPress? Háganoslo saber comentando a continuación.