Criando gráficos com sap.viz em 6 simples passos

Do que adianta um ERP com dados precisos e históricos, um banco de dados in memory, uma arquitetura moderna, o uso de padrões abertos, análise preditiva, se nada disso pode gerar informações nas quais as empresas absorvam com facilidade? Felizmente, o SAPUI5 tem uma API chamada sap.viz (de visualization) que permite que gráficos sejam construídos de maneira relativamente fácil. Saber um pouco de Javascript é sempre bem vindo. Assim, lhe é permitido como desenvolvedor representar muita informação em pouco espaço de tela e de uma maneira elegante. Vamos aprender neste post como criar gráficos usando a API sap.viz de maneira simples. Afinal, uma imagem vale mais que mil palavras.

Exemplo de gráficos usando sap.viz

Abaixo estão alguns exemplos do que pode ser feito com a API sap.viz. Eles foram extraídos do SAPUI5 Demo Kit.

Gráficos usando sap.viz

Gráficos usando sap.viz

Passo-a-passo para criar gráficos usando sap.viz

Passo 0 – Importar a biblioteca sap.viz

Antes de mais nada, precisamos importar a biblioteca sap.viz no bootstrap

Passo 1 – Carregar o modelo (sap.ui.model.Model)

Todos os passos a partir daqui serão feitos dentro de uma visão. Mas lembre-se do MVC! Ninguém aqui é contra ele. Apenas quero simplificar o exemplo. Não deixe seu controller carente.

Instancie e carregue um modelo (via JSON, XML, oData, não importa). Ele conterá os dados que poderão (mas não necessariamente estarão) no gráfico. Este passo não possui nada de especial para o uso do sap.viz.

Passo 2 – Defina um dataset

É no dataset que as informações que serão apresentadas no gráfico são definidas. A única classe concreta que nos permite fazer isso é a sap.viz.ui5.data.FlattenedDataset (pelo menos foi a única que achei no help). O seu construtor não tem nada de muito sofisticado.

Passo 3 – Crie seu gráfico

O gráfico é meramente a apresentação. Note que é possível mudar o tipo do gráfico sem precisar rescrever seu modelo ou dataset.

Passo 4 – Conectar gráfico com dataset

Basta ligar os pontos de agora em diante. Você pode ainda fazer o passo 4 junto do 3 conforme acima. Caso queira fazer um “lazy link”, use o método .setDataset.

Passo 5 – Conectar gráfico com model

Esta parte é importante apesar de última. Definimos a ligação entre o gráfico e o modelo. Como de costume, alterações no model são refletidas em quem os utiliza. Com gráficos não é diferente.

Resultado Final

Ativando o projeto e o executando, temos o seguinte resultado. Note que na imagem abaixo a um destaque quando clicamos em cada uma das areas, no caso, a verde. O cálculo das porcentagens não precisou ser feito e o tooltip branco que aparece no meio do gráfico também veio de brinde. Tudo isso pode ser alterado via API sap.viz. Sugiro fortemente que faça este exemplo para ver como fica a interatividade com o gráfico, algo que não pode ser percebido por uma imagem.

Gráfico com sap.viz

Gráfico com sap.viz

Vantagens da sap.viz

Alguns pontos vantajosos da sap.viz a se mencionar:

  • Clara separação entre modelo (Model) e formato (gráfico)
  • Informação apresentada (dataset) independente do formato (mude o gráfico de Pie para Bar por exemplo)
  • É possível adaptar o tamanho do gráfico ao tamanho da janela do navegador
  • Há capacidade para criar gráficos voltados para mobile
  • Interatividade muito bacana
  • Formatação adaptável

Desvantagens

Código Fonte

Você pode encontrar o código fonte completo deste exemplo no meu repositório do GitHub. Não deixe de colocar uma estrelinha se gostou e comentar aqui no site também!

Aquele abraço!

5 thoughts on “Criando gráficos com sap.viz em 6 simples passos

  1. Diego dos Santos

    Olá!

    Você botou como uma vantagem a capacidade de criar gráfico voltados para mobile, teria como me informar mais sobre isso? Eu estou utilizando o sap.viz.ui5 para criar gráficos que serão utilizados no mobile, porém ele apenas se adapta ao tamanho da tela, não tem nada em especial, gostaria de saber mais sobre isso.

    Abraço

  2. fabiopagoti Post author

    Oi Diego,

    Talvez não tenha ficado claro mas a vantagem de mobile é justamente a adaptação ao tamanho da tela. Isso sim é muito bom e especial.

    Apesar de nunca ter aberto o fonte do sap.viz.. (ops.. esta parte não é aberta).. imagino que ele use o D3 internamente, que permite que você crie escalas para todos os elementos do seu gráfico e ajuste seus tamanhos de acordo com a tela, por exemplo.

    Você notou algum outro problema no sap.viz relacionado a mobile ou esperava algum outro recurso pela minha frase?

    Abraços!

  3. Diego dos Santos

    Claro, eu utilizo o sap viz.ui5 exatamente por ser responsivo, mas pela frase achei que tivesse algo a mais. Hoje tenho apenas problemas com rolagem com o gráfico, quando tento rolar a página clicando sobre o gráfico nada acontece, apenas nas bordas ou acima do gráfico para rolar a página.

    Tentei utilizar o Makit também, para mobile ele até que é bom, mas para desktop não funciona, ele não detecta clicks do mouse e não é “elegante”.

    E parabéns pelo post!

    Abraço

  4. fabiopagoti Post author

    Hmm.. entendi.. realmente não sei de cabeça como poderia resolver esta questão da rolagem.

    Boa sorte e obrigado!

  5. Fabio

    Muito bom !!!
    Muito obrigado por compartilhar, e muito bom saber que temos conteúdo de qualidade sobre HANA gerado aqui no Brasil.
    Fabio

Leave a Reply

Your email address will not be published. Required fields are marked *