Skip to content

A
adega_v3

graficos

Last edited by João Denis Rodrigues
Page history

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

line_config

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 line_config2

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

canvas

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 error_line