# Gráficos

Tabelas e gráficos são representações visuais de dados usados ​​para simplificar informações complexas e torná-las mais fáceis de entender. Eles podem ajudar a destacar insights importantes e fornecer um resumo rápido de dados que, de outra forma, seriam difíceis de interpretar. Os gráficos vêm em diferentes formatos, como gráficos de barras, gráficos de linhas, gráficos de pizza, gráficos de dispersão e muito mais, cada um adequado para diferentes tipos de dados e finalidades analíticas.

PocketBlocks permite inserir vários formatos de tabelas e gráficos em seus aplicativos para satisfazer suas necessidades em diferentes casos de uso.

<figure><img src="/files/hlR6XYHw61WJ24VCxunq" alt=""><figcaption></figcaption></figure>

## Modo UI

### Formato de dados

No modo UI, o componente **Gráfico** oferece suporte à apresentação de dados armazenados como uma matriz de objetos JS. Cada campo de objeto corresponde a uma coluna em formato tabular. Os objetos na matriz a seguir contêm três campos: `data`, `fruta` e `contador`.

```json
[
  { "data": "2022-03-01", "fruta": "apple", "contador": 4 },
  { "data": "2022-03-01", "fruta": "banana", "contador": 6 },
  { "data": "2022-04-01", "fruta": "grape", "contador": 10 },
  { "data": "2022-04-01", "fruta": "apple", "contador": 3 },
  { "data": "2022-04-01", "fruta": "banana", "contador": 2 }
]
```

Você também pode usar o código JS em `{{}}` para fazer referência a dados de outros componentes ou consultas ou para transformar dados para atender a necessidades específicas.

Por exemplo, o resultado da consulta `colsulta1` é o seguinte.

```json
{
  "data": [
    "2022-03-01",
    "2022-03-01",
    "2022-04-01",
    "2022-04-01",
    "2022-04-01"
  ],
  "fruta": ["apple", "banana", "grape", "apple", "banana"],
  "contador": [4, 6, 10, 3, 2]
}
```

Você pode transformá-lo usando o transformador `transformador1` com o seguinte código JS.

```javascript
let datas = query1.data.data;
let frutas = query1.data.fruta;
let contadores = query1.data.contador;
let resultado = [];
for (let i = 0; i < datas.length; i++) {
  resultado.push({ date: datas[i], fruta: frutas[i], count: contadores[i] });
}
return resultado;
```

Em seguida, referencie o valor do transformador `{{transformador1.value}}` como dados para o gráfico.

<figure><img src="/files/vWEXJtHb6ZwI8AP1ibTE" alt=""><figcaption></figcaption></figure>

### Tipo de Gráfico

PocketBlocks oferece suporte a quatro tipos de gráficos: gráfico de barras, gráfico de linhas, gráfico de dispersão e gráfico de pizza. Você pode selecionar o tipo de gráfico em **Propriedades** > **Dados** > **Tipo de gráfico**. Você também pode personalizar o layout e o estilo do seu gráfico na guia **Propriedades**.

<figure><img src="/files/6gR3RZ0bjStaA0pcLrcd" alt=""><figcaption></figcaption></figure>

### Eixo X

Gráficos de barras, gráficos de linhas e gráficos de pizza mapeiam valores para variáveis ​​categóricas. Assim, nesses gráficos, o eixo X geralmente mostra dados não numéricos – por exemplo, data ou departamento.

<figure><img src="/files/seJUz4QRCesuxNW8ivJo" alt=""><figcaption></figcaption></figure>

Por padrão, o PocketBlocks detecta automaticamente os dados do eixo X e seu tipo. Você também pode selecionar manualmente um entre "Eixo de categoria", "Eixo de valor", "Eixo de tempo" ou "Eixo de registro". Para obter informações detalhadas, consulte [tipo de eixo X](https://echarts.apache.org/en/option.html#xAxis.type).

<figure><img src="/files/jlSkh9sPgwNHkzi4Mlqa" alt=""><figcaption></figcaption></figure>

### Série de gráficos

Na maioria dos tipos de gráficos, a **Série de gráficos** (eixo Y) apresenta valores numéricos para as categorias no eixo X. Por padrão, PocketBlocks preenche todos os campos numéricos no eixo Y. Você pode ocultar campos desnecessários em **Propriedades** > **Série de gráficos**.

<figure><img src="/files/FOAZ5n4EmpwLxmXgVcZH" alt=""><figcaption></figcaption></figure>

## Echarts em JSON

Além dos gráficos integrados, você também pode plotar seus dados com o [Apache ECharts](https://echarts.apache.org/en/index.html), uma biblioteca de visualização JS de código aberto. Você só precisa preencher o campo **Configuração** > **Opção** no formato JSON. Para informações detalhadas, consulte a [documentação do ECharts](https://echarts.apache.org/en/option.html#title) e os [exemplos do ECharts](https://echarts.apache.org/examples/en/index.html).

<figure><img src="/files/CyLKK1DHL0agrgYo4lvR" alt=""><figcaption></figcaption></figure>

Se precisar de mais opções de configuração para gráficos, crie uma issue no [Github](https://github.com/pedrozadotdev/pocketblocks/issues).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pocketblocks.pedroza.dev/portugues-brasil/construcao-de-aplicativos/component-guides/charts-and-graphs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.