Configuração
A configuração dos gráficos é feita a partir de um objeto
Os atributos:
- labels: Uma lista contendo as legendas do gráfico
- data: Conjunto de dados que compoem o gráfico
- options: Atributo opcional. Opções para alterar o visual do gráfico, o seu funcionamento será apresentado a seguir.
var config = {
labels: ['LABEL-1', 'LABEL-2'],
data: dados
};
var config2 = {
labels: ['LABEL-3', 'LABEL-4'],
data: dados,
options: {
...
}
};
Atributos
-
reverse - boolean
- Inverte o eixo y para decrescente
- Exemplo:
var config = {
labels: ['LABEL-1', 'LABEL-2'],
data: dados,
options: {
reverse: true
}
};
-
fill - boolean
- Preenchimento do grafico, referente ao background color
- Exemplo:
var config = {
labels: ['LABEL-1', 'LABEL-2'],
data: dados,
options: {
fill: false,
}
};
-
stacked - Object
- Se os conjuntos de dados do eixo x(xAxes) e/ou do eixo y(yAxes) devem ser agrupados.
- Exemplo:
var config = {
labels: ['LABEL-1', 'LABEL-2'],
data: dados,
options: {
stacked: {
xAxes: false,
yAxes: false,
}
}
};
-
yAxes - Object
- Configuração manual do yAxes
var config = {
labels: ['LABEL-1', 'LABEL-2'],
data: dados,
options: {
yAxes: [{
id: 'my-id',
stacked: false,
ticks: {
max: 4
},
}]
}
};
-
maxAll - boolean
- Configura para todos conjuntos de dados do eixo y possuirem o mesmo máximo
-
setpSizeAll - number(integer/float)
- Semelhante ao maxAll, mas configura o intervalo entre os números que será mostrado no gráfico
-
tooltipCallbackLabel - Object
- Personalização do texto mostrado ao colocar o mouse sobre um ponto no gráfico. Existe um subatributo chamado error que indica se a formatação deve ser para gráfico de erro ou não
- Exemplo:
var config = {
labels: ['LABEL-1', 'LABEL-2'],
data: dados,
options:{
tooltipCallbackLabl: {
error: true,
text: '%B1',
fixed: true,
}
}
};
-
yAxisID - Array of strings
- Identificadores para cada conjunto de dados do eixo y. A configuração dos próximos atributos dependem da existência do yAxisID
-
displayGridlines - Object
- Se a linhas horizontais dos gráficos devem sem disponibilizadas
-
updateMax - Object
- Atualiza o valor máximo de um determinado conjunto de dados
-
yAxesDisplay - Object
- Se os valores do eixo devem ser mostrados
-
yAxesPosition - Object
- Localização dos valores do eixo
- Exemplo:
var config = {
labels: ['LABEL-1', 'LABEL-2'],
data: dados,
options:{
yAxisID: ['y-id0', 'y-id1', 'y-id2'],
displayGridLines: {
'y-id1': false
},
updateMax: {
'y-id0': 135
},
yAxesDisplay: {
'y-id2': false
},
yAxesPosition: {
'y-id1': 'left',
'y-id0': 'right'
}
}
}
Cores
Lista de cores pré definidas
- red
- blue
- green
- purple
- blue_alpha
- ligh_blue_alpha
- brown
- orange
- light_orange
- yellow
- gray
- cyan
Funções
A seguir estão listadas todas as funções que geram os gráficos, com exemplos do que pode ser gerado.
Todos os gráficos possuem os mesmos parametros.
Parametros
- ctx: Context do canvas onde será desenhado o gráfico
- chart: As configurações do gráfico
- colors: Parametro opcional. Vetor de string contendo os nomes das cores que vão ser utilizadas
Gráficos de Linha
function build_line_chart(ctx, chart, colors=['blue_alpha', 'cyan', 'purple', 'grey'])
Chamada
var config = {...};
build_line_chart(ctx, config);
build_line_chart(ctx, config, ['blue', 'red', 'green']);
Gráficos de Barra
function build_bar_chart(ctx, chart, colors=['blue_alpha', 'cyan'])
Chamada
var config = {...};
build_bar_chart(ctx, config);
build_line_chart(ctx, config, ['yellow', 'light_blue', 'cyan']);
Gráficos de Linha/Barra
function build_line_bar_chart(ctx, chart, colors=['orange', 'blue_alpha'])
Chamada
var config = {...};
build_bar_chart(ctx, config);
build_line_bar_chart(ctx, config, ['red', 'yellow', 'blue']);
Gráficos de Linha com Erro
function build_symmetric_error_line_chart(ctx, chart, colors=['blue_alpha', 'blue'])
Chamada
var config = {...};
build_symmetric_error_line_chart(ctx, chart);
build_symmetric_error_line_chart(ctx, chart, ['red', 'yellow', 'grey', 'brown']);
Gráficos de Barra com Erro
function build_symmetric_error_bar_chart(ctx, chart, colors=['orange', 'brown', 'blue_alpha', 'blue'])
Chamada
var config = {...};
build_symmetric_error_bar_chart(ctx, chart);
build_symmetric_error_bar_chart(ctx, chart, ['blue', 'cyan']);
Exemplos
Segue um conjunto de exemplos, com a configuração e o resultado.
Exemplo 1
var mes = [
['Janeiro', [20, 13.3]],
['Fevereiro', [32, 0.5]],
['Março', [12, 15.6]],
['Abril', [18, 8.4]]
];
var config = {
data:dados,
labels: ['Valor-1', 'Valor-2'],
options:{
yAxisID: ['id1', 'id2'],
stacked: {
yAxes: false,
},
yAxesPosition: {'id2': 'left'},
fill: false,
}
}
var ctx = document.getElementById('canvas').getContext('2d');
build_line_chart(ctx, config, ['cyan', 'yellow']);
Resultado
Exemplo2
var mes = [
['Janeiro', [20, 13.3]],
['Fevereiro', [32, 0.5]],
['Março', [12, 15.6]],
['Abril', [18, 8.4]]
];
var config = {
data:dados,
labels: ['Valor-1', 'Valor-2'],
options:{
yAxisID: ['id1', 'id2'],
updateMax: {'id1': 100},
stacked: {
yAxes: false,
}
stepSizeAll: 15.5,
yAxesPosition: {'id1': 'right'},
yAxesDisplay: {'id2': false},
fill: true
}
}
var ctx = document.getElementById('canvas').getContext('2d');
build_line_chart(ctx, config, ['cyan', 'yellow']);
Exemplo3
var grupos = [
['2010', {A: 5, B: 15, C: 9}],
['2011', {A: 0, B: 2, C:18}],
['2012', {A: 7, B: 3, C:12}],
['2013', {A: 12, B: 12, C:12}],
['2014', {A: 15, B: 11, C: 7}],
['2015', {A: 5, B: 6, C: 5}],
['2016', {A: 3, B: 8, C: 9}],
['2017', {A: 7, B: 9, C:12}],
];
var config = {
data:dados,
labels: ['A', 'B', 'C'],
options:{
maxAll: true,
stacked: {
xAxes: false,
yAxes: false,
},
}
}
var ctx = document.getElementById('canvas').getContext('2d');
build_line_chart(ctx, config, ['cyan', 'yellow']);
Resultado
Exemplo4
var grupos = [
['2010', {A: 12.7, B: 6.1}],
['2011', {A: 13.5746, B: 4.35}],
['2012', {A: 7.6598, B: 3.12}],
['2013', {A: 7.516, B: 1.158}],
['2014', {A: 12.5899, B: 5.1598}],
['2015', {A: 5.1568, B: 3.6998}],
['2016', {A: 3.14995, B: 4.698}],
['2017', {A: 7.2695, B: 2.158}],
];
var config = {
data:dados,
labels: ['A', 'B'],
options:{
tooltipCallbackLabl: {
error: true,
text: '%B1',
fixed: true,
}
}
}
var ctx = document.getElementById('canvas').getContext('2d');
build_line_chart(ctx, config, ['cyan', 'yellow']);