Insertar gráfico interactivo
Presentá información estadística de manera visual y dinámica.
En esta página
Si aún no lo hiciste, primero leé atentamente la sección en la que explicamos los estándares de uso de gráficos interactivos.
Tipos de gráficos
En markdown contás con cuatro tipos de gráficos interactivos.
Torta («Pie»)
El gráfico de torta informa qué parte o proporción de un total le corresponde a cada categoría que compone una variable (al menos dos).
Supongamos que preguntaste a un grupo de personas (el total de casos) «¿Te gusta el color rojo?» (la variable). La pregunta tiene tres respuestas (categorías) posibles: «Sí», «No» y «*No sé».
A partir de las respuestas que obtenés, podés graficar qué parte del total respondió «Sí», «No» y «*No sé».
Cada categoría tiene su color. Sin tener que leer cifras ni porcentajes se ve a simple vista que más de la mitad respondió «Sí» (color uva). Si ponés el cursor arriba de una parte vas a ver su valor correspondiente como cantidad o porcentaje; en este caso, informa el porcentaje sobre el total.
Línea («Line»)
El gráfico de línea muestra de izquierda a derecha la evolución de una categoría a lo largo de un período.
Supongamos que al grupo de personas del ejemplo anterior le hiciste la misma pregunta («¿Te gusta el color rojo?») cada día de la semana pasada. Luego querés saber si varió a lo largo de la semana (y cuánto) la cantidad de gente que respondió «Sí».
Como es una sola variable (la categoría «Sí»), la mostramos con un solo color y, como queremos saber cómo cambia a lo largo de la semana, la expresamos en cantidades, no en porcentajes.
A simple vista se nota que el «Sí» creció mucho la primera parte de la semana, aunque bajó un poco al final.
Si ponés el cursor sobre cada punto, vas a ver el valor que le corresponde.
Columna («Bar»)
El gráfico de columna o barra permite comparar de izquierda a derecha los valores de una categoría a lo largo de un período (como la que compone el gráfico de línea) o las categorías de una variable (como las que componen el gráfico de torta).
Todos los valores se muestran con el mismo color.
El ejemplo del gráfico de línea de arriba se puede mostrar del siguiente modo.
¿Cuál es la diferencia? Como línea se destacaba la tendencia a lo largo del tiempo, como columna se destacan las cantidades (cuál día más, cuál día menos).
Si necesitás comparar varias categorías a lo largo de un período (siguiendo el ejemplo de arriba, comparar los valores de «Sí», «No» y «*No sé» de lunes a domingo), tenés que usar los gráficos que se piden por GDE.
El gráfico de torta de arriba también se puede representar como columna. ¿Con cuál diferencia? Que la torta destacaba la participación de cada respuesta en el total, mientras que la columna destaca cuál recibió más o menos respuestas.
Elegir columna en lugar de línea o torta dependerá de lo que quieras informar: columna compara cantidades, línea presenta tendencia y torta resalta participación en un total.
Barra horizontal («Horizontal Bar»)
El gráfico de barra horizontal permite comparar de arriba a abajo las categorías de una variable.
Todos los valores se muestran con el mismo color.
Comparada con la columna, te conviene usar esta visualización si hay muchas barras o si una barra se destaca respecto de los demás.
Código markdown y configuración
Para insertar un gráfico, copiá el siguiente código, editalo y pegalo entre dos párrafos con una línea libre arriba y abajo.
[[tipo de gráfico-{"Etiqueta del valor 1","Etiqueta del valor 2","Etiqueta del valor n"}-{número valor 1,número valor 2,número valor n}-{color de poncho}-{nombre único del gráfico}-{Texto de la leyenda}-{¿es porcentaje?}]]
En tipo de gráfico escribí Pie, Line, Bar u Horizontal Bar según corresponda. No borres el guion que está antes de la llave que le sigue, si no se va a romper el código.
Entre las siguientes llaves escribí los nombres (etiquetas) de las categorías que graficás. Cada etiqueta va entre comillas dobles, entre una etiqueta y otra va coma.
Entre las siguientes llaves escribí los valores de las categorías. Si el número tiene decimales, marcalo con punto, porque la coma está reservada para separar un valor de otro.
Si informás los números de una torta como porcentajes, verificá que sumados den 100 para evitar errores de visualización y confusiones.
En color de poncho informá el color de Poncho entre llaves. Elegilo de la paleta de Poncho, copiá el nombre del color que se ajuste a la información y pegalo en tu código.
Si graficás una torta, que tiene varios colores, separa el nombre de cada color con coma.
En nombre único del gráfico asignale entre llaves un nombre único al gráfico: si en un contenido insertás varios gráficos, cada uno debe tener un nombre distinto. El nombre debe ser una sola palabra sin espacios.
En Texto de la leyenda entre llaves escribí el nombre de la variable que contiene las categorías.
Por último, escribí entre las llaves del final false si los números expresan cantidades o true si expresan porcentajes.
Por ejemplo, el código
[[Pie-{"Nombre de categoría 1","Nombre de categoría 2","Nombre de categoría 3"}-{55.70,34.30,10}-{fucsia,palta,mandarina}-{codigotorta}-{Nombre de variable que contiene las categorías}-{true}]]
muestra el siguiente gráfico de torta con porcentajes (por eso pusimos true). Dos números tienen decimales (55.70 y 34.30), por lo que los escribimos con punto. Como es torta, informamos un color para cada categoría.
El gráfico de línea
que tiene un solo color y muestra cantidades lleva el siguiente código.
[[Line-{"Nombre de categoría 1","Nombre de categoría 2","Nombre de categoría 3"}-{55.70,34.30,10}-{fucsia}-{codigolinea}-{Nombre de variable que contiene las categorías}-{false}]]
El gráfico de columna
que tiene un solo color y muestra cantidades lleva el siguiente código.
[[Bar-{"Nombre de categoría 1","Nombre de categoría 2","Nombre de categoría 3"}-{55.70,34.30,10}-{fucsia}-{codigocolumna}-{Nombre de variable que contiene las categorías}-{false}]]
Por último, el gráfico de barra horizontal
que tiene un solo color y muestra cantidades lleva el siguiente código.
[[Horizontal Bar-{"Nombre de categoría 1","Nombre de categoría 2","Nombre de categoría 3"}-{55.70,34.30,10}-{fucsia}-{codigohorizontal}-{Nombre de variable que contiene las categorías}-{false}]]
Si el gráfico se actualiza periódicamente o necesitás un tipo no disponible en markdown, tenemos otra versión de gráficos que se alimenta con datos de una planilla de cálculo en línea, tiene más opciones y se pide por GDE.