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) {
    const countByStatus = {};
    ds.iterate(function (record) {
      const status = record.u_istatus_iname;
      const count = countByStatus[status] || 0;
      countByStatus[status] = count + 1;
    });  

    const categories = [];
    const data = [];
    for (const key in countByStatus) {
      categories.push(key);
      data.push(countByStatus[key]);
    };  

    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 = {};
    ds.iterate(ds, function (record) {
      const status = record.u_istatus_iname;
      const count = countByStatus[status] || 0;
      countByStatus[status] = count + 1;
    });  
    const categories = [];
    const data = [];
    for (const key in countByStatus) {
      categories.push(key);
      data.push(countByStatus[key]);
    }
    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.