Gráficos

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’.

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
        }
    ]
    }
}
}

Caso o usuário queira customizar o tooltip (dica 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 o cursor 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.