Bloco Gráfico de linha/área
Uma tendência ao longo de uma sequência ordenada — semanas, meses, estágios de funil ao longo do tempo — desenhada como uma linha traçada ou, com o alternador de preenchimento ativado, uma área sombreada abaixo dela. Até 3 séries.
Como funciona
O gráfico é renderizado como um único PNG gerado no servidor — sem biblioteca de gráficos no lado do cliente, sem JavaScript — com uma tabela de dados HTML sempre visível logo abaixo, repetindo todo número que a imagem desenha. Esse é o mesmo emparelhamento inegociável a que todo gráfico dessa família se compromete, para que a tendência continue legível em clientes somente texto, caixas de entrada que bloqueiam imagens e com as imagens desligadas.
O formato de autoria é idêntico ao do gráfico de barras: uma coluna Category (aqui geralmente um período de tempo — "Semana 1," "Seg," "T1" — embora possa ser qualquer rótulo ordenado) mais até três colunas numéricas de série. A Série 1 está sempre ativa, tomando emprestado o próprio título do gráfico como seu nome quando você não define um. As Séries 2 e 3 só se ativam quando recebem um nome, para que uma coluna de valores parcialmente preenchida sem rótulo de série nunca apareça como uma linha fantasma sem nome. Cada série ativa desenha como sua própria linha traçada com sua própria cor; uma legenda só aparece a partir de 2 ou mais séries ativas.
O alternador Filled transforma o gráfico de linha em um gráfico de área: a região abaixo de cada linha é sombreada em baixa opacidade até o eixo. É um alternador em vez de um bloco separado, já que o modelo de dados subjacente, os eixos e o formato de categoria são exatamente os mesmos de qualquer forma — só muda como a linha é renderizada. Com várias séries preenchidas, as regiões sobrepostas permanecem visualmente distinguíveis, porque cada uma mantém sua própria cor de série em baixa opacidade. Esse bloco continua recusando eixos duplos, então várias séries preenchidas sempre compartilham uma única escala de valor.
Marcadores de ponto (pequenos círculos preenchidos em cada valor de dado autorado) são desenhados sobre a linha para cada categoria, até cerca de 20 categorias. Passando desse ponto, os marcadores se tornam mais esparsos e param de ser desenhados individualmente, já que em alta densidade eles se sobreporiam em uma mancha sólida ao longo da linha em vez de ler como pontos distintos. A própria linha traçada, o eixo de valor compartilhado e a tabela de dados continuam carregando a tendência além desse limite — nada na leitura do gráfico realmente depende dos marcadores.
Campos configuráveis:
- Chart title — mostrado acima da imagem; também o nome de série de fallback quando apenas a Série 1 está ativa.
- Alternador Filled (variante de gráfico de área).
- Data — a lista de linhas (Category + Série 1/2/3), o mesmo conjunto de colunas que o gráfico de barras usa.
- Series 1/2/3 name e Series 1/2/3 color.
- Background color, padding, border, border radius no cartão.
- Pares independentes de cor/tamanho de fonte para o título e o texto da legenda/tabela.
Um gráfico de linha também pode vincular suas linhas a uma fonte de dados conectada em vez de digitá-las. Um campo Group by transforma cada valor distinto em um ponto ao longo do eixo de categoria, emparelhado com até 3 campos de série, cada um com seu próprio agregado. Um filtro opcional pode referenciar merge tags do destinatário para uma visão por destinatário da mesma tendência. Veja Vinculando gráficos a dados reais para a mecânica completa, incluindo o modo de resultados de resposta de campanha.
Exemplos
Subject
Weekly signups are trending up
Um resumo semanal de operações pode mostrar a contagem de tickets abertos ao longo das últimas 8 semanas como uma única linha, com marcadores de ponto ainda visíveis nessa contagem, dando uma leitura imediata sobre se a tendência está melhorando. Um recapitulativo de vendas pode usar um gráfico de área preenchida para receita acumulada ao longo de um trimestre, uma série por linha de produto (até 3). O leitor vê tanto a tendência individual quanto, visualmente, o sombreamento combinado se acumulando semana a semana. Um relatório de desempenho recorrente pode se vincular diretamente a uma fonte de dados delimitada por destinatário via um filtro de merge tag — "o uso da sua conta este mês" — para que o gráfico de linha de um projeto mostre uma tendência diferente a cada destinatário do mesmo envio.
Como é o fallback estático
<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
<p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Open tickets</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
alt="Line chart: Week 1 (Open tickets 42); Week 2 (Open tickets 35); Week 3 (Open tickets 28)"
style="display:block;max-width:100%;height:auto;margin:8px 0" />
<table style="width:100%;border-collapse:collapse;margin-top:4px">
<tr>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Category</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Open tickets</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Week 1</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">42</td>
</tr>
</table>
</div>
O alt text resume cada par de valor categoria/série, para que a tendência seja legível mesmo sem carregar a imagem; a tabela abaixo dela é os mesmos números como HTML simples.