Presidencia de la Nación

Insertar gráficos interactivos


Si necesitás insertar un gráfico interactivo simple, podés hacerlo en markdown.

A diferencia de los gráficos alimentados por una planilla de cálculo en línea que se piden por GDE, podés utilizar este recurso en el body de cualquier noticia, página o página de libro.

Los gráficos disponibles son torta, línea, barras y barras horizontales.

El código markdown tiene la siguiente estructura:

[[tipo de gráfico-{etiquetas de los datos}-{datos}-{color de poncho}-{id del gráfico}-{leyenda}-{¿es porcentaje?}]]

  • Como tipo de gráfico podemos informar Pie (torta), Line (línea), Bar (columna) u Horizontal Bar (barra horizontal), siempre con iniciales mayúsculas.
  • Entre el primer par de llaves escribimos la etiqueta de cada dato entre comillas y separadas por comas; por ejemplo: {"Enero","Febrero","Marzo"}.
  • Entre el segundo par de llaves informamos los valores de los datos separados por coma, para separar decimales usamos punto; por ejemplo: {15.7,18.9,11.2}. No usamos puntos para informar unidades de mil: si querés informar 10.500,35, escribí 10500.35.
  • Entre el tercer par de llaves informamos el nombre del color en Poncho. Si es torta, escribís cada color separado entre comas (fijate el ejemplo de abajo). El resto de los gráficos acepta un solo color.
  • El id del gráfico debe ser un nombre corto, sin espacios. Si insertás varios gráficos en una misma página, debés asignarles diferentes id, fijate los ejemplos de abajo.
  • La leyenda entre llaves identifica a qué corresponden las etiquetas: una categoría, un tipo de objetos.
  • Entre el último par de llaves informás si los valores están expresados como porcentaje (true) o no (false).

Torta ("Pie") con porcentajes

Código

[[Pie-{"Etiqueta 1","Etiqueta 2","Etiqueta 3","Etiqueta 4","Etiqueta 5","Etiqueta 6"}-{35,25,19.5,9.5,5.9,4.1}-{uva,verdin,azul,fucsia,palta,mandarina}-{grafico1}-{Texto de la leyenda}-{true}]]


Línea ("Line")

Código

[[Line-{"Etiqueta 1","Etiqueta 2","Etiqueta 3","Etiqueta 4","Etiqueta 5","Etiqueta 6"}-{15.7,18.9,11.2,4.3,4.4,1.8}-{verdin}-{grafico2}-{Texto de la leyenda}-{false}]]


Columna ("Bar")

Código

[[Bar-{"Etiqueta 1","Etiqueta 2","Etiqueta 3","Etiqueta 4","Etiqueta 5","Etiqueta 6"}-{15.7,18.9,11.2,4.3,4.4,1.8}-{mandarina}-{grafico3}-{Texto de la leyenda}-{false}]]


Barra horizontal ("Horizontal Bar")

Código

[[Horizontal Bar-{"Etiqueta 1","Etiqueta 2","Etiqueta 3","Etiqueta 4","Etiqueta 5","Etiqueta 6"}-{15.7,18.9,11.2,4.3,4.4,1.8}-{fucsia}-{grafico4}-{Texto de la leyenda}-{false}]]

Activar: 
0
Template: 
caritas3
Scroll hacia arriba