graficos

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']);

Resultado

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']);

Resultado