apitdn/fluig_rag_docs/Plataforma Documentação técnica/Recurso de Páginas e Widgets (WCM)/Visualizador de gráficos.md

---
title: Visualizador de gráficos
source: https://tdn.totvs.com/pages/viewpage.action?pageId=80970184
path: \Plataforma  Documentação técnica\Recurso de Páginas e Widgets (WCM)\Visualizador de gráficos.md
---

# Índice

- 1 [Objetivo](#Visualizadordegráficos-Objetivo)
- 2 [Visualizador de gráficos](#Visualizadordegráficos-Visualizadordegráficos)
  - 2.1 [Passos necessários](#Visualizadordegráficos-Passosnecessários)
    - 2.1.1 [1. Registrar o serviço de dados no TOTVS Fluig Plataforma.](#Visualizadordegráficos-1.RegistraroserviçodedadosnoTOTVSFluigPlataforma.)
    - 2.1.2 [2. Serviços de Parâmetros](#Visualizadordegráficos-2.ServiçosdeParâmetros)
    - 2.1.3 [3. Serviço de Dados](#Visualizadordegráficos-3.ServiçodeDados)

# Objetivo

O objetivo deste guia é apresentar ao desenvolvedor informações sobre a visualização de gráficos na plataforma Fluig.

# Visualizador de gráficos

O Visualizador de gráficos tem como objetivo principal permitir que outras aplicações possam exibir gráficos customizados dentro da plataforma Fluig. Para isto, basta a aplicação registrar seu serviço de gráfico no Fluig e disponibilizar dois métodos REST: um que informará os parâmetros de configuração do gráfico e outro que disponibilizará os dados.

O Visualizador de Gráficos permite exibição nos formatos de tabela, gráfico de coluna e gráfico de pizza.

![](..\..\images\grafico1.png)

![](..\..\images\grafico2.png)

![](..\..\images\grid.png)

## Passos necessários

### **1. Registrar o serviço de dados no TOTVS Fluig Plataforma.**

Para registrar o serviço de dados do gráfico basta enviar uma mensagem assíncrona para o Fluig.

O desenvolvedor deverá usar o evento "REGISTER\_CHART\_SERVICE”. Será necessário passar um objeto do tipo ChartServiceVO com os dados do serviço de dados em questão.

O objeto ChartServiceVO, disponível no pacote com.totvs.technology.wcm.common.chart, é composto dos seguintes elementos:

- String id: código do serviço de gráfico
- String description: descrição do serviço de gráfico
- String ParametersRest: URL do serviço REST que retornará os parâmetros
- String dataRest: URL do serviço REST que retornará os dados do gráfico

**Exemplo:**

**ChartServiceVO**

```
ChartServiceVO ecm1 = new ChartServiceVO("ECM1", "ECM - Volumes: Espaço Utilizado (Por Volume em %)");
ecm1.setDataRest(“http://localhost:8080/portal/ecm/api/rest/ecm/volume/chartDataByVolume");
ecm1.setParametersRest(“http://localhost:8080/portal/ecm/api/rest/ecm/volume/chartParametersByVolume");
IntegrationUtil.sendAsyncMessage(WCMAsyncEvents.REGISTER_CHART_SERVICE.getEvent(), ecm1);
```

Este registro precisa ser executado cada vez que aplicação é deployada, ou seja, cada vez que a plataforma Fluig subir. Para isto sugerimos que seja criado um *servlet* em sua aplicação com a opção **loadOnStartup = 1**, que se encarregará de realizar esta tarefa.

### **2. Serviços de Parâmetros**

Este serviço REST deverá retornar uma lista de ChartParameterVO, que conterá os parâmetros que seu serviço de dados precisará para fornecer os dados do gráficos. Com base neste serviço a plataforma Fluig construirá a tela de configuração.  
O ChartParameterVO (pacote com.totvs.technology.wcm.common.chart) é composto dos seguintes elementos:

- int code id: código numérico sequencial que será usado para busca dos dados posteriormente
- String title: nome do campo como aparecerá na tela
- String type: tipo de campo (ChartParameterVO.TYPE\_STRING, ChartParameterVO.TYPE\_NUMBER, ChartParameterVO.TYPE\_DATA ou ChartParameterVO.TYPE\_BOOLEAN)
- String AllowedList: se o campo for tipo string, podem ser informadas as opções para o usuário selecionar em uma lista. Estas opções devem ser separadas por “;”
- boolean multipleSelection: true/false, caso permita ou não seleção múltipla se o AllowedList esteja em uso
- String value: Valor inicial se existir

**Exemplo:**

**ChartParameterVO**

```
List<ChartParameterVO> params = new ArrayList<>();
ChartParameterVO param1 = new ChartParameterVO();
param1.setCode(1);
param1.setTitle("Código do Item");
param1.setType(ChartParameterVO.TYPE_STRING);
param1.setAllowedList(“Item 1;Item 2;Item 3”);
param1.setMultipleSelection(ChartParameterVO.SELECTION_UNIQUE);
params.add(param1);

ChartParameterVO param2 = new ChartParameterVO();
param2.setCode(2);
param2.setTitle("Exibir somente itens ativos");
param2.setType(ChartParameterVO.TYPE_BOOLEAN);
params.add(param2);
return params;
```

### **3. Serviço de Dados**

O serviço REST deverá retornar um ChartVO, com os dados para exibição do gráfico.  
O ChartVO (pacote com.totvs.technology.wcm.common.chart) é composto dos seguintes elementos:

- String title:  título que será exibido no gráfico
- String description: descrição do gráfico
- String type: tipo do gráfico (ChartTypes.column.getName(), ChartTypes.pie.getName(), ChartTypes.table.getName()
- Map<String, Object>[] source: dados do gráfico
- ChartCategoryVO category: categorias
- ChartSerieGroupVO[] seriesGroups: grupos de séries

**Exemplo para um Gráfico de pizza**

```
ChartVO result = new ChartVO("Espaço utilizado", "Volume " + codVolFisic,ChartTypes.pie.getName());
Map<String, Object>[] source = new Map[2];
Map<String, Object> data0 = new HashMap<String, Object>();
data0.put("label","Utilizado");
data0.put("size",80);
source[0] = data0;
Map<String, Object> data1 = new HashMap<String, Object>();
data1.put("label","Livre");
data1.put("size",20);
source[1] = data1;
result.setSource(source);
ChartSerieGroupVO[] seriesGroups = new ChartSerieGroupVO[1];
ChartSerieGroupVO serieGroup = new ChartSerieGroupVO(ChartTypes.pie.getName(),"label");
ChartSerieVO[] series = new ChartSerieVO[1];
ChartSerieVO serie = new ChartSerieVO("size","label");
series[0] = serie;
serieGroup.setSeries(series);
seriesGroups[0] = serieGroup;
result.setSeriesGroups(seriesGroups);
return result;
```

**Exemplo para um Gráfico de colunas**

```
ChartVO result = new ChartVO("Espaço utilizado","Todos os volumes",ChartTypes.column.getName());
Map<String, Object>[] source = new Map[2]; 
Map<String, Object> data0 = new HashMap<String, Object>();
data0.put("label",”Item 1”);
data0.put("total",100);
data0.put("used",40);
data0.put("free",60);
source[0] = data0;
Map<String, Object> data0 = new HashMap<String, Object>();
data0.put("label",”Item 2”););
data0.put("total",120);
data0.put("used",60);
data0.put("free",60);
source[1] = data0;
result.setSource(source);
ChartCategoryVO category = new ChartCategoryVO("label");
result.setCategory(category);
ChartSerieGroupVO[] seriesGroups = new ChartSerieGroupVO[1];
ChartSerieGroupVO serieGroup = new ChartSerieGroupVO(ChartTypes.column.getName(),"Espaço(Mb)");
ChartAxiVO axis = new ChartAxiVO(20,true,"Espaço(Mb)");
serieGroup.setValueAxis(axis);
ChartSerieVO[] series = new ChartSerieVO[3];
ChartSerieVO total = new ChartSerieVO("total","Espaço Total");
series[0] = total;
ChartSerieVO used = new ChartSerieVO("used","Espaço Utilizado");
series[1] = used;
ChartSerieVO free = new ChartSerieVO("free","Espaço Livre");
series[i] = free;
serieGroup.setSeries(series);
seriesGroups[0] = serieGroup;
result.setSeriesGroups(seriesGroups);
return this.buildResponse(result);
```

**Exemplo para um Gráfico de tabelas**

```
ChartVO result = new ChartVO("Espaço utilizado","Todos os volumes",ChartTypes.table.getName());
Map<String, Object>[] source = new Map[2];
Map<String, Object> data0 = new HashMap<String, Object>();
data0.put("label",”Item 1”);
data0.put("total",100);
data0.put("used",40);
data0.put("free",60);
source[0] = data0;
Map<String, Object> data0 = new HashMap<String, Object>();
data0.put("label",”Item 2”););
data0.put("total",120);
data0.put("used",60);
data0.put("free",60);
source[1] = data0;
result.setSource(source);
ChartSerieGroupVO[] seriesGroups = new ChartSerieGroupVO[1];
ChartSerieGroupVO serieGroup = new ChartSerieGroupVO(ChartTypes.table.getName(),"Espaço(Mb)");      
ChartAxiVO axis = new ChartAxiVO(20,true,"Espaço(Mb)");
serieGroup.setValueAxis(axis);
ChartSerieVO[] series = new ChartSerieVO[4];
ChartSerieVO label = new ChartSerieVO("label","Item");
series[0] = label;
ChartSerieVO total = new ChartSerieVO("total","Espaço Total");
series[1] = total;
ChartSerieVO used = new ChartSerieVO("used","Espaço Utilizado");
series[2] = used;
ChartSerieVO free = new ChartSerieVO("free","Espaço Livre");
series[3] = free;
serieGroup.setSeries(series);
seriesGroups[0] = serieGroup;
result.setSeriesGroups(seriesGroups);
return this.buildResponse(result);
```