Criando gráficos com amCharts

Criando gráficos com amCharts

Em qualquer sistema feito para análise de resultados, os gráficos tem papel de destaque, já que servem para demostrar de forma fácil resultados.

Hoje você vai aprender como criar gráficos com JavaScript utilizando a biblioteca amCharts. Ela não necessita de nenhuma dependência para funcionar. Ela permite criar gráficos de forma fácil, e permite exportar os gráficos como imagem.

Os gráficos suportados pelo amCharts vão desde os gráficos mais comuns, como linha, área, colunas, barras e pizza, além de gráficos mais complexos, como gauges, funil, Gantt ou mapas.

Primeiro, vamos montar a estrutura do arquivo HTML que vamos utilizar. 

Vamos criar dois gráficos, um gráfico de pizza e um gráfico de colunas. Para isso, adicione duas divs, com os nomes de "chart_pizza" e "chart_colunas". Para ambas, inserimos um style inline para definir uma altura fixa de 300 pixels.

No final do arquivo fizemos o include dos arquivos do amCharts, foram adicionados o arquivo "amcharts", que é o arquivo base da biblioteca, o arquivo "serial" que serve para criar gráficos de colunas ou barras, o arquivo "pie" que serve para criar gráficos de pizza, e dois arquivos "export" que são o plugin de exportação, que permite exportar o gráfico como imagem.

No final da página, sem um tag "script" com um comentário, informando onde vamos inserir a programação.

Vamos começar criando o primeiro gráfico, que é o gráfico de pizza. Insira o seguinte código abaixo do comentario "//Aqui vai a programação para ativar os gráficos":

 

var chart = AmCharts.makeChart("chart_pizza", {

  "type": "pie",

  "theme": "light",

  "dataProvider": [{'indicador':'SP', 'valor': 25},{'indicador':'RJ', 'valor': 15},{'indicador':'MG', 'valor': 12},{'indicador':'RS', 'valor': 5}],

  "valueField": "valor",

  "titleField": "indicador",

   "balloon":{

   "fixedPosition":true

  },

  "export": {

"enabled": true

  }

});

 

No exemplo acima, usamos o construtor "makeChart" para definir o gráfico, o primeiro parâmetro é o "id" da div onde o gráfico vai ser criado. O "type" se refere ao tipo de gráfico, no caso "pie" é o gráfico de pizza. O "dataProvider" é um array com informações no formato JSON, em nosso exemplo, o array possui objetos com dois campos, "indicador" e "valor".

Na propriedade "valueField" informamos qual o campo que possui os valores, e no campo "titleField", informamos o campo que vai servir de rótulo. No final da programação, ativamos a exportação. Salve o seu HTML e abra no seu navegador. O botão de exportar aparece no canto superior direito.

Agora vamos criar nosso próximo gráfico, que é o gráfico de colunas. Adiciona abaixo da programação do gráfico de pizza o seguinte código:

 

var chart = AmCharts.makeChart("chart_colunas", {

"theme": "light",

"type": "serial",

"dataProvider":[{'indicador':'SP', 'valor': 25},{'indicador':'RJ', 'valor': 15},{'indicador':'MG', 'valor': 12},{'indicador':'RS', 'valor': 5}],

"valueAxes": [{

"title": "Valores em reais"

}],

"graphs": [{

"balloonText": "Valor in [[category]]:[[value]]",

"fillAlphas": 1,

"lineAlpha": 0.2,

"title": "Valor",

"type": "column",

"valueField": "valor",

"labelText": "[[value]]",

"labelPosition":"inside"

 

}],

"depth3D": 20,

"angle": 30,

"rotate": false,

"categoryField": "indicador",

"categoryAxis": {

"gridPosition": "start",

"fillAlpha": 0.05,

"position": "left"

},

"export": {

"enabled": true

}

});

 

Perceba algumas semelhanças em relação ao gráfico de pizza. O "dataProvider", que são os dados, são os mesmos do gráfico anterior. Existe também o "export" e o "type", que ao invés do valor "pie", tem o valor "serial".

As diferenças são relacionadas ao formato do gráfico. As propriedades "depth3D" e "angle" servem para ajustar o efeito 3D das colunas. A propriedade "graphs" é um array com a configuração de cada coluna, e a propridade "valueAxes" serve para configurar o eixo base, que é o eixo "X".

O gráfico de colunas pode ser alterado para um gráfico de colunas na horizontal alterando a propriedade "rotate" de "false" para "true".

Esse mesmo gráfico pode ser alterado para um gráfico de área se você apagar o "type": "column", localizado dentro da propriedade "graphs".

Quer ver mais exemplos? Confira o link a seguir:

https://www.amcharts.com/demos-v3/

 

 

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

 

Outros conteudos que podem ser de seu interesse

Upload de arquivos com validação em javascript
17/11/2019JAVASCRIPT

Upload de arquivos com validação em javascript

Aprenda a validar a extensão e o tamanho do arquivo antes de fazer upload com JS

Saiba mais...
Recursos gratuitos para você utilizar em seu frontend
21/08/2022JAVASCRIPT

Recursos gratuitos para você utilizar em seu frontend

Geradores de CSS e bancos de imagens para melhorar o seu projeto

Saiba mais...

Conteúdo sobre banco de dados sem complicação!