Gráficos en la respuesta

```
```
```
 
Pregunta a un agente de soporte cuánto cuesta cada plan y obtendrás un párrafo. Pregunta a una persona y esbozará cuatro barras. El agente hace lo segundo: cuando una respuesta ya contiene un conjunto de números comparables, los dibuja — **sin que se le haya pedido**, en medio de una conversación ordinaria.
 
Cada gráfico en esta página se renderiza mediante el mismo componente que ven tus visitantes, a partir de la misma especificación que emite el modelo. Aquí nada es una captura de pantalla.
 
## Lo que realmente escribe el modelo
 
Un bloque delimitado, junto a las palabras:
 
{"type": "bar", "source": "passage:kb", "title": "Registration fee by market", "unit": "USD",
 "labels": ["Brazil", "Mexico", "Colombia", "Chile", "Peru", "Argentina"],
 "series": [{"name": "standard", "values": [4200, 2800, 1900, 2100, 2450, null]},
            {"name": "expedited", "values": [6300, 4100, 2600, 3050, 3400, null]}]}
 
que se renderiza como:
 
```chart
{"type": "bar", "source": "passage:kb", "title": "Registration fee by market", "unit": "USD",
 "labels": ["Brazil", "Mexico", "Colombia", "Chile", "Peru", "Argentina"],
 "series": [{"name": "standard", "values": [4200, 2800, 1900, 2100, 2450, null]},
            {"name": "expedited", "values": [6300, 4100, 2600, 3050, 3400, null]}], "cite": 1}
```
 
Tres cosas en ese ejemplo son fundamentales.
 
**`null`, no `0`.** La tarifa de Argentina no está publicada en el material, por lo que no hay número — y una barra de cero sería una afirmación que el material nunca hizo. Cero es un valor significativo; "desconocido" no es cero, y la posición vacía lo indica donde un `0` habría mentido.
 
**La prosa permanece.** El gráfico complementa la respuesta, nunca la reemplaza. Telegram, WhatsApp y los lectores de pantalla reciben el mismo contenido que una tabla compacta, por lo que un agente que respondiera solo con una imagen no respondería nada en la mitad de sus canales.
 
**`source` es obligatorio.** Un gráfico sin procedencia es un número sin cita, y la insignia en la esquina indica de qué tipo de material proviene. Cuando un único pasaje recuperado contiene las cifras, esa insignia es una cita en vivo que puedes abrir.
 
## Los números deben estar en tu material
 
Esta es la parte que importa más que el dibujo.
 
Los gráficos `passage:` son el caso común: los números provienen de tu base de conocimientos, y el modelo los copia. Copiar es confiable — medido a través de tres modelos extrayendo una tabla de precios de un texto recuperado, con un precio desactualizado sentado en el mismo pasaje que un distractor: 9 de 9 correctos, ninguno engañado por el señuelo.
 
La aritmética no lo es. Los mismos modelos, los mismos pasajes, se les pidió calcular una factura a partir de una tarifa base más una tasa por exceso: **12 de 12 incorrectos**. Cada multiplicación fue correcta y cada fórmula fue incorrecta.
 
Por lo tanto, antes de que se renderice un gráfico, se ejecuta una verificación determinista sobre él: cada par de etiqueta y valor debe aparecer en el material que el agente recuperó *esta vez*. Un par que no se encuentra significa **que se desecha todo el bloque** — la respuesta conserva sus palabras y pierde su imagen. A diferencia de las marcas de fundamentación a nivel de oración en otras partes del producto, esta se niega en lugar de anotar: una barra mal dibujada ha terminado de hacer su punto mucho antes de que alguien lea una nota al pie.
 
<Callout tone="warning">
La verificación compara números, en todas las formas escritas que toman — `4,200` y `4200`, `25M` y
`25000000`, `2500万` y `25 million`. No verifica unidades, y no siempre puede decir a cuál de
dos etiquetas en una oración pertenece un número. Es un piso bajo la fabricación, no una prueba de corrección.
</Callout>
 
## Las figuras derivadas se calculan, no se escriben
 
Las acciones, las tasas de crecimiento y los totales acumulados son exactamente lo que el modelo se equivoca, y exactamente lo que hace que un gráfico valga la pena mirar. Por lo tanto, el modelo no los calcula.
 
Entrega las figuras literales a una herramienta, nombra la derivación que desea — participación del total, cambio porcentual, total acumulado — y la plataforma calcula la serie **en código**. El resultado permanece en el servidor; el modelo escribe una referencia, y los números se completan antes de que se envíe el bloque. Nunca tiene la oportunidad de escribir mal lo que el código acaba de calcular.
 
El gráfico lo dice: una serie calculada de esta manera se etiqueta en el propio gráfico, porque "copiado de tu material" y "calculado para ti" son garantías diferentes y un lector merece saber cuál está mirando.
 
## Gráficos con los que puedes hablar
 
Haz clic en una barra — o en una fila de una tabla — y el agente recibe una pregunta de seguimiento sobre esa categoría, como si el visitante la hubiera escrito. El gráfico deja de ser salida y se convierte en entrada: alguien que no puede articular qué porción de los datos desea simplemente puede señalarla.
 
Cada gráfico también se exporta a CSV, y las barras / horizontales / líneas / áreas son la misma frase contada de cuatro maneras, por lo que un lector puede cambiar entre ellas. Los gráficos de pastel, embudo, radar y dispersión son *diferentes* frases — composición, abandono, forma, correlación — por lo que no ofrecen el cambio.
 
## Los nueve tipos, y cuándo es correcto cada uno
 
Un tipo entre el que el modelo no puede elegir es lo mismo que tener un solo tipo. Cada uno responde a una pregunta diferente, y elegir el incorrecto es peor que no dibujar en absoluto: el gráfico sigue ahí, diciendo silenciosamente otra cosa.
 
### `bar` — ¿cómo se comparan estas categorías?
 
El predeterminado. Recurre a él cuando nada más específico encaja.
 
```chart
{"type":"bar","source":"tool:x","title":"Cases closed by team","unit":"cases",
 "labels":["Intake","Triage","Review","Drafting","Filing","QA","Appeals","Renewals","Archive"],
 "series":[{"name":"closed","values":[128,116,94,88,61,54,37,29,22]}]}
```
 
### `hbar` — la misma pregunta, con etiquetas largas
 
Los nombres de categoría que son nombres de país o de producto dejan de caber debajo de las barras verticales y el eje comienza a rotarlos 45°. Girados horizontalmente simplemente caben. La plataforma cambia a esto por sí misma más allá de doce categorías — **no** a una línea, porque estas categorías no tienen orden y una línea inventaría una tendencia.
 
```chart
{"type":"hbar","source":"tool:x","title":"Leads by market",
 "labels":["United Kingdom","Germany","France","Spain","Poland","Netherlands","Italy","Sweden","Portugal","Ireland","Denmark"],
 "series":[{"name":"leads","values":[812,640,455,390,210,180,164,131,98,76,54]}]}
```
 
### `line` — ¿hacia dónde se dirige esto?
 
Para categorías que genuinamente tienen un orden: meses, etapas, versiones. Los huecos se unen en lugar de romperse, porque una ruptura se lee como dos series separadas en lugar de un número faltante.
 
```chart
{"type":"line","source":"tool:x","title":"Monthly recurring revenue","unit":"k",
 "labels":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
 "series":[{"name":"new business","values":[12,15,14,19,23,28,31,29,35,41,44,52]},
           {"name":"expansion","values":[3,4,6,5,9,11,10,14,16,15,19,24]}]}
```
 
### `area` — la misma tendencia, cuando el volumen es el punto
 
Úsalo cuando la cantidad acumulada importa más que la tasa de cambio.
 
```chart
{"type":"area","source":"tool:x","title":"Tickets received","stacked":true,
 "labels":["W1","W2","W3","W4","W5","W6","W7","W8","W9","W10","W11","W12"],
 "series":[{"name":"answered by the agent","values":[40,62,58,90,120,138,151,144,166,180,175,198]},
           {"name":"escalated to a person","values":[22,25,21,28,31,27,24,20,18,17,15,12]}]}
```
 
### `stacked` — una comparación que también tiene partes
 
No es un tipo propio, un modificador en `bar`, `hbar` y `area`: sigue siendo una comparación, pero cada barra se abre para mostrar de qué está hecha.
 
```chart
{"type":"bar","source":"tool:x","stacked":true,"title":"Revenue by quarter","unit":"k",
 "labels":["Q1 24","Q2 24","Q3 24","Q4 24","Q1 25","Q2 25","Q3 25","Q4 25"],
 "series":[{"name":"new","values":[30,45,50,62,68,74,81,96]},
           {"name":"renewal","values":[20,25,40,44,52,58,66,71]},
           {"name":"expansion","values":[6,9,11,15,18,21,27,34]}]}
```
 
### `pie` — ¿de qué está hecho este todo?
 
Solo cuando las partes suman genuinamente la cosa. Una serie, sin negativos, a lo sumo ocho rebanadas — más allá de eso nadie puede decir qué rebanada es cuál, y se degrada a barras.
 
```chart
{"type":"pie","source":"tool:x","title":"Where the questions come from",
 "labels":["Website widget","WhatsApp","Telegram","Email hand-off","Embedded in-app","Shared link"],
 "series":[{"name":"conversations","values":[6200,2700,1100,640,380,210]}]}
```
 
### `funnel` — ¿dónde se están yendo las personas?
 
Cada etapa debe ser un subconjunto de la que está encima. Una serie que no desciende no es un embudo, es un conjunto de números lado a lado — y la plataforma lo dibuja como barras en su lugar.
 
```chart
{"type":"funnel","source":"tool:x","title":"From visit to paid",
 "labels":["Visits","Started a chat","Left an email","Signed up","Activated","Paid"],
 "series":[{"name":"people","values":[4200,1980,1140,860,410,120]}]}
```
 
### `radar` — ¿qué forma tiene cada opción?
 
Varias cosas comparadas a través de las mismas pocas dimensiones. Necesita que las dimensiones estén en escalas comparables: pon una calificación de 0-10 junto a un recuento de 0-1,000,000 y un eje se queda pegado mientras el otro se aplanó, por lo que la plataforma vuelve a las barras.
 
```chart
{"type":"radar","source":"tool:x","title":"Vendor comparison","labels":["Speed","Cost","Support","Coverage","Ease"],"series":[{"name":"agent4.io","values":[9,7,8,9,8]},{"name":"Incumbent","values":[5,9,6,4,5]}]}
```
 
### `scatter` — ¿están relacionadas estas dos cosas?
 
Exactamente dos series: la primera es x, la segunda es y, y las etiquetas nombran los puntos.
 
```chart
{"type":"scatter","source":"tool:x","title":"Answer length against satisfaction",
 "labels":["A","B","C","D","E","F","G","H","I","J","K","L","M","N"],
 "series":[{"name":"words in the answer","values":[40,55,70,85,95,110,130,145,160,180,205,230,260,300]},
           {"name":"satisfaction %","values":[62,68,74,79,83,86,88,87,84,80,74,69,61,55]}]}
```
 
### `table` — cuando ninguno de los anteriores es honesto
 
Dos medidas en escalas diferentes, o datos que siempre fueron una tabla. También es donde aterriza cada otro tipo cuando su premisa se rompe.
 
```chart
{"type":"table","source":"passage:kb","title":"Registration by market",
 "labels":["Brazil","Mexico","Colombia","Chile","Peru","Argentina"],
 "series":[{"name":"days","values":[90,60,45,55,70,null]},
           {"name":"fee (USD)","values":[4200,2800,1900,2100,2450,null]}]}
```
 
## Cuando se queda en silencio
 
Tres números es el piso. "Aumentó de 120k a 150k" es una oración, no un gráfico de barras, y dibujarlo es ruido. Las preguntas de sí/no y las búsquedas de un solo valor obtienen una respuesta, no una imagen. A lo sumo dos gráficos en una respuesta, y un segundo solo cuando las dos medidas están en unidades diferentes — la plataforma cuenta, por lo que el modelo no puede hablarse a sí mismo para un tercero.
 
Y si no se recuperó nada esta vez, no hay nada que dibujar. El agente dice lo que sabe y lo que no sabe, que es lo mismo que hace con las palabras.
 
## Activarlo
 
Nada que activar. Cualquier agente con una base de conocimientos o herramientas ya hace esto, y la puerta de contención significa que un gráfico que no debería haber dibujado nunca llega al visitante. Los gráficos se almacenan con el mensaje, por lo que volver a abrir la conversación un mes después muestra la misma imagen, no un hueco en el medio de una respuesta que aún la discute.