Gráficos Line e Bar com Chart.js

Criando gráficos com Chart.js

Os gráficos de linhas e barras são gráficos muito utilizados no mundo empresarial. O gráfico de linha é usado para mostrar tendências, comparar conjuntos de dados, mostrar evoluções e diminuições de algum fenômeno. Apresenta a variação de valores dos dados em determinado período.

Se você ainda não viu o artigo Iniciando com Chart.js, acesse-o no link:https://www.mundojs.com.br/iniciando-com-chart-js/

LINHA:

O gráfico de linhas é uma maneira de mostrar os pontos de dados em uma linha. O gráfico em linha permite que um número de propriedades seja especificado para cada um dos conjuntos de dados.

Ao criar o seu documento HTML base, você deverá adicionar um Canvas na sua página.

<!-- adicione a tag canvas no seu HTML -->
<canvas id="myChart"></canvas>

Com o Canvas adicionado, você precisará incluir a biblioteca Chart.js na sua página.

<!-- o link a seguir direciona para a biblioteca online do Chart.js -->
<!-- a biblioteca também está disponível para download no site do Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

Para criar um gráfico do tipo Linha, você usará o seguinte código:

// criando um novo objeto, contendo o tipo, os dados
// e as opções que o gráfico terá.
let ctx = document.getElementById('myChart');

let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

Onde:

Type:

É o tipo de gráfico que será feito;

Data:

Os dados que serão inseridos no gráfico.

Options:

As customizações que você fará no seu gráfico.

TYPE:

Este valor define de qual tipo será o gráfico. Você deve utilizar ‘line’ para o formato LINHA.

// type:'line'

DATA:

Para a construção do gráfico, é necessário que os datasets contenham os valores a ser inseridos no gráfico. Para isto, cria-se um vetor com os valores necessários.

Você também poderá inserir uma legenda (label) para a linha do gráfico.

// O objeto data possui os valores dispostos no gráfico
data: {
    // Legendas das Linhas
    labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho'],
    datasets: [{
        // Legenda
        label: 'Meu primeiro gráfico',
        // Define-se a cor da linha.
        borderColor: 'rgb(245,222,179)',
        // Dados a serem inseridos nas barras
        data: [0, 10, 5, 2, 20, 12, 1],
    }]
}

OPTIONS:

Esse objeto define as opções a serem inseridas no seu gráfico. Confira as diversas customizações disponíveis para o seu tipo de gráfico em: https://www.chartjs.org/docs/latest/charts/line.html.

O exemplo a seguir utilizará a opção tension, que define se as linhas serão retas ou possuirão algum tipo de curvatura.

// Esta opção define se as linhas serão curvadas ou retas,
// use 0 para retas.
options: {
    elements: {
        line: {
            tension: 0
        }
    }
}

BARRAS:

O gráfico de barras mostra os valores dos dados com barras verticais. É muito utilizado para mostrar dados de tendências e comparação de vários conjuntos de dados. Cada barra retangular é correspondente a uma categoria e proporcional ao valor do dado na respectiva categoria.

De maneira semelhante à criação do gráfico em linhas, utilizaremos a mesma estrutura HTML para o gráfico de barras.

Para criar um gráfico do tipo Barra, você usará o seguinte código:

// criando um novo objeto, contendo o tipo, os dados
// e as opções que o gráfico terá.
let ctx = document.getElementById('myChart');
let myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

TYPE:

Este valor define de qual tipo será o gráfico. Você deve utilizar ‘bar’ para o formato BARRA VERTICAL e ‘horizontalBar’ para o formato BARRA HORIZONTAL.

// type: 'bar'
// type: 'horizontalBar'

DATA:

Assim como no gráfico em Linhas, é necessário que os datasets contenham um vetor com os valores a ser inseridos no gráfico. Você deve especificar também as cores de cada retângulo, sendo uma cor para cada valor no vetor. Também pode inserir legendas. Confira mais opções em: https://www.chartjs.org/docs/latest/charts/bar.html

// O objeto data possui os valores dispostos no gráfico
data: {
    // Legendas das Barras
    labels: ['Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
    datasets: [{
        // Legenda geral
        label: '$ em Vendas',
        // Dados a serem inseridos nas barras
        data: [10, 9, 12, 19, 21, 7],
        // Define as cores de preenchimento das barras
        // de acordo com sua posição no vetor
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        // Define as cores de preenchimento das bordas das barras
        // de acordo com sua posição no vetor
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
         ],
         // Define a espessura da borda dos retângulos
         borderWidth: 1
    }]
},

OPTIONS:

Esse objeto define as opções a serem inseridas no seu gráfico. Você também pode conferir as diversas opções de customização na documentação do Chart.js.

Neste exemplo será utilizada a opção beginAtZero, que tem a função de começar a barra no valor 0 do eixo X.

// Customização que define onde irá começar a ser erguida a barra
// começando pelo ZERO, no eixo X.
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

 

Gráficos Pie e Doughnut com Chart.js

Criando gráficos com Chart.js

Os gráficos Donut(Doughnut) e Pizza(Pie) são, provavelmente, os gráficos mais utilizados atualmente. Eles são divididos em segmentos, e cada segmento é proporcional ao valor de cada dado. Esses segmentos são divididos na forma de arcos.

Se você ainda não leu o artigo Iniciando com Chart.js, acesse-o no link: https://www.mundojs.com.br/iniciando-com-chart-js/

Estes dois tipos de gráficos são excelentes para demonstrar as proporções entre os dados inseridos.

O gráfico do tipo Donut e do tipo pizza são do mesmo tipo no Chart.js, com a diferença de um único objeto, denominado cutoutPercentage. Este valor define o tamanho do espaço central vazio do gráfico, e possui como valor padrão 50%.

Ao criar o seu documento HTML base, você deverá adicionar um Canvas na sua página:

<!-- adicione a tag canvas no seu HTML -->
<canvas id="myChart"></canvas>

Com o Canvas adicionado, você precisará incluir o Chart.js na sua página.

<!-- o link a seguir direciona para a biblioteca online do Chart.js -->
<!-- a biblioteca também está disponível para download no site do Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

Para fazer um gráfico do tipo Donut, você usará o seguinte código:

// Criando um novo objeto, contendo o tipo, os dados
// e as opções que o gráfico terá.
let meuDonutChart = new Chart(ctx, {
    type: 'doughnut',
    data: dados,
    options: opcoes
});
Onde:

type: É o tipo de gráfico que será feito.

data: Os dados que serão inseridos no gráfico.

options: Serão as customizações que você fará no seu gráfico.

TYPE:

Este valor define de qual tipo será o gráfico. Você deve utilizar ‘pie’ para o formato PIZZA e ‘doughnut’ para o formato DONUT.

// type: 'doughnut'
// type: 'pie'

DATA:

Para construir o gráfico, é necessário que os datasets contenham um vetor com os valores a serem inseridos. Estes valores serão somados em um total e calculados levando em consideração a proporção relativa de cada dado.

Você poderá inserir uma legenda (label) para cada pedaço do gráfico. Verifique a estrutura no código abaixo:

// Cria-se um objeto chamado dados onde:
let dados = {
    datasets: [{
        // cria-se um vetor data, com os valores a ser dispostos no gráfico
        data: [10, 20, 30],
        // cria-se uma propriedade para adicionar cores aos respectivos valores do vetor data
        backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 199, 132)', 'rgb(55, 99, 132)']
    }],

    // cria-se legendas para os respectivos valores do vetor data
    labels: ['Vermelho', 'Amarelo', 'Azul']
};

OPTIONS:

Este objeto define as opções a ser inseridas no seu gráfico. Confira as diversas opções de customizações para o seu gráfico no link: https://www.chartjs.org/docs/latest/charts/doughnut.html.

O exemplo a seguir utilizará a opção cutoutPercentage, que, juntamente com o atributo “type”, define se o gráfico será do padrão Pizza ou Donut. Se esta opção não estiver definida, trará como valor padrão 50%. Se você utilizar o valor 0, retornará um gráfico sem espaço central. Confira no código abaixo:

// Crie um objeto que defina as opções customizáveis
// do seu gráfico.
let opcoes = {
    cutoutPercentage: 40,
};

Confira o código completo realizando o download: Exemplo Chart.js

Neste artigo, foi realizada a configuração de dois gráfico, Pizza e Donut, utilizando a biblioteca Chart.js. Gostou? Comente ou tire suas dúvidas!