Criando Gráficos com o Highcharts

Este artigo aborda a criação de gráficos com a biblioteca Highcharts. Essa biblioteca é cliente-side mas parte de sua API está disponível server-side com algumas alterações.

Como usar:

Instancie um gráfico passando as opções:

var meuChart = new Highcharts.Chart({<<OPÇÕES>>})

Escreva o gráfico no process:

this.write(meuChart);

Exemplo:

includeOnce -1892604114 /* /products/UNUMwebFramework/uwi/widgets/highcharts.ijs */;

this.help = "Exemplo de utilização do highcharts";

this.interaction("MeuGrafico", function() {

var chart = new Highcharts.Chart({

chart: {

defaultSeriesType: 'bar'

},

title: {

text: 'Requisitos por time'

},

xAxis: {

categories: ['OUT/10', 'NOV/10', 'DEZ/10']

},

yAxis: {

title: {

text: 'Requisitos por sprint'

}

},

series: [{

name: 'Framework',

data: [10, 20, 40]

},

{

name: 'Engine',

data: [10, 27, 30]

}]

});

this.write(chart);

});

O gráfico ira ficar assim:

Na biblioteca server-side não são aceitas opções com funções. O uso de funções como parâmetros irá gerar um erro. O namespace Highcharts possui vários objetos, no entanto apenas o Highcharts.Chart é suportado pelo Web Framework.

Observação: instâncias de Date não são permitidas pela API do Highcharts. O desenvolvedor deve utilizar a função Date.UTC() ou uma data formatada como String em séries que devem exibir datas. Mais exemplos de uso você pode ver na no site do Highcharts e no JsDoc da biblioteca server-side.

Tema

As propriedades visuais não definidas na construção do gráfico serão herdadas do tema utilizado pelo usuário. Apesar do desenvolvedor poder sobre escrever os valores definidos pelo tema, não é recomendado que o faça. Manter o padrão do tema irá garantir a consistência visual dos gráficos em todos os processos e relatórios do sistema.

API

API disponível em: http://l.unum.com.br/jsdoc/symbols/Highcharts.Chart.html.