Utilizando visualizações com gráficos

Introdução

O Sistema UNUM permite que se criem visualizações em gráficos da consultas automatizadas.

Pré-requisitos

Para se construir visualizações em gráfico, é necessário conhecer a biblioteca Highcharts. Sua documentação está disponível em http://www.highcharts.com/ref/.

Conceitos básicos do sistema UNUM

Buscando um alinhamento conceitual, voltado para a nomenclatura básica do Sistema UNUM, sugerimos a leitura dos itens abaixo:

• DataSource

• DataSourceVisualization

• Highcharts

Criando a visualização

A visualização em gráfico se comporta de maneira semelhante à visualização em relatório.

No entanto, devido ao dinamismo da construção de um gráfico, é utilizado um método implementado pelo desenvolvedor para se montar parte de suas definições. O método se chama onGetOptions e sua implementação na definição da visualização é obrigatória. Esse método recebe o objeto de visualização sendo construído e deve retornar um objeto JSON com as opções para a construção de um gráfico.

As opções que o objeto pode conter estão documentadas em http://www.highcharts.com/ref. É obrigatória a passagem das opções 'chart' e 'title'.

Exemplo

Segue um exemplo da definição de um DataSourceVisualization do tipo 'highcharts':

{ type: 'highcharts', dataSourceQuery: -1891504223, /* Usuários habilitados.idsq */ filters: [ {name: "begin", label: "Data inicial", required: true}, {name: "end", label: "Data final", required: true} ], onGetOptions: function (dsv, ds) { var countByStatus = {}; uwl.dataset.forEach(ds, function (record) { var status = record.u_istatus_iname; var count = countByStatus[status] || 0; countByStatus[status] = count + 1; }); var categories = []; var data = []; goog.object.forEach(countByStatus, function (value, key) { categories.push(key); data.push(value); }); return { chart: { defaultSeriesType: 'column' }, title: { text: dsv.title }, xAxis: { title: 'Usuários por status', categories: categories }, yAxis: { title: { text: 'Quantidade' } }, series: [ { name: 'Usuários', data: data } ] } } }

Customizando o tooltip dos pontos do gráfico

Caso o usuário queira customizar o tooltip (hint que aparece quando o mouse é posicionado sobre um ponto do gráfico) basta adicionar a propriedade "hints" às séries. Por exemplo:

{ type: 'highcharts', dataSourceQuery: -1891504223, /* Usuários habilitados.idsq */ filters: [ {name: "begin", label: "Data inicial", required: true}, {name: "end", label: "Data final", required: true} ], onGetOptions: function (dsv, ds) { var countByStatus = {}; uwl.dataset.forEach(ds, function (record) { var status = record.u_istatus_iname; var count = countByStatus[status] || 0; countByStatus[status] = count + 1; }); var categories = []; var data = []; goog.object.forEach(countByStatus, function (value, key) { categories.push(key); data.push(value); }); return { chart: { defaultSeriesType: 'column' }, title: { text: dsv.title }, xAxis: { title: 'Usuários por status', categories: categories }, yAxis: { title: { text: 'Quantidade' } }, series: [{ name: 'Framework', data: [40, 30, 50], hints: ["Serie 1 Customização 1", "Serie 1 Customização 2", "Serie 1 Customização 3"] }, { name: 'Engine', data: [1, 20, 40], hints: ["Serie 2 Customização 1", "Serie 2 Customização 2", "Serie 2 Customização 3"] }] } } }

Vale observar que cada valor do array de "hints" será atribuído ao valor presente no array "data" na posição correspondente. Então, se mouse for posicionado no valor 40 da série "Framework", o valor mostrado no tooltip será "Serie 1 Customização 1".

Observações

• • A definição da visualização em gráfico deve declarar o tipo 'highcharts'.

  • Atualmente, não é suportado o uso de funções como parâmetros para eventos ou opções no objeto retornado no método onGetOptions.