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.
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 disponível em: http://l.unum.com.br/jsdoc/symbols/Highcharts.Chart.html.