JavaScript

Em por

Criar gráficos na web, hoje em dia está cada vez mais trivial conforme o avanço das tecnologias de desenvolvimento, na qual muitas linguagens dão suporte para esse recurso. Hoje vamos aprender a criar gráficos em JavaScript utilizando da tecnologia do HTML5, onde temos o canvas juntamente a biblioteca JS Chart.js.

Criando Gráficos com Chart.js

Chart.JS

O Chart.JS é uma biblioteca em JavaScript que auxilia na criação de gráficos utilizando apenas HTML, CSS e JS para renderizar os gráficos na tela do usuário, para isso, utiliza-se o elemento canvas do HTML5.

O Chart.JS possui vários temas diferentes para gráficos, entre os tradicionais como barra, pizza e linha. Na nova versão da biblioteca foi adicionado suporte responsivo, legenda para os gráficos e opções de gráficos interativos e modulares.

Criando nosso Gráfico Chart.JS com legenda

Para começarmos nosso desenvolvimento precisamos baixar nossa biblioteca, para isso basta entrar no site do //www.chartjs.org/ e realizar o download. É possível também conferir a documentação em //www.chartjs.org/docs/ para poder saber como utilizar seus recursos de maneira correta.

Para nosso exemplo ficar mais “bunitinho” criei um pequeno arquivo css para dar uma estilizada em nossa legenda como mostro abaixo:

 body { font-family: Sans-Serif; } #fork { position: absolute; top: 0; right: 0; border: 0; } .legend { width: 150px; height:auto; padding:15px; border: 1px solid rgb(200, 200, 200); } .legend .title { display: block; margin-bottom: 0.5em; line-height: 1.2em; padding: 0 0.3em; } .legend .color-sample { display: block; float: left; width: 1em; height: 1em; border: 2px solid; /* Comment out if you don't want to show the fillColor */ border-radius: 0.5em; /* Comment out if you prefer squarish samples */ margin-right: 0.5em;}

Muito bem, para melhor entendimento fiz uma separação dos arquivos para ficarem mais limpos nossos códigos.

Em um diretório chamado vendor/ coloquei nosso arquivo baixado do chart.js, depois criei mais um diretório chamado src/ para alocarmos nossos outros dois arquivos, legend.js e demo.js, ficando dessa maneira nossa chamada:

 <link href="css/demo.css" rel="stylesheet" type="text/css"> <script src="vendor/Chart.js"></script> <script src="src/legend.js"></script> <script src="src/demo.js"></script>

Você pode fazer da maneira que achar melhor, eu fiz assim para exemplo no tutorial.

Agora vamos criar nossas funções para criar nossos gráficos, é muito simples veja:

 function lineChart() { var data = { labels : ["January","February","March","April","May","June","July"], datasets : [ { fillColor : "rgba(220,220,220,0.5)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", data : [65,59,90,81,56,55,40], label : 'Tigers' }, { fillColor : "rgba(151,187,205,0.5)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", data : [28,48,40,19,96,27,100], label : 'Bears' } ] }; var ctx = document.getElementById("lineChart").getContext("2d"); new Chart(ctx).Line(data); legend(document.getElementById("lineLegend"), data); }

Definimos uma variável data com os atributos e propriedades do gráfico, onde setamos as labels que são os títulos abaixo no eixo X, e os seus respectivos valores. Depois definimos as propriedades dos valores, como cor da linha dentre outros que você pode conferir na documentação no link mais acima.

Depois de criado todos os parâmetros criamos uma var que vai pegar nossa div (lineChart) que será onde nosso gráfico irá aparecer em formato 2D como descrito na chamada, logo depois instanciamos a chamada da função com o tipo Line, pois nosso gráfico será de linha, se fosse de barras seria .Bar, essas definições estão todas na doc.

Logo abaixo criei uma função legend passando dois parâmetros nossa div lineLegend, que seria o local onde nossa legenda irá aparecer e o valor delas.

Nossa função legend ficara assim:

 function legend(parent, data) { legend(parent, data, null); } function legend(parent, data, chart) { parent.className = 'legend'; var datas = data.hasOwnProperty('datasets') ? data.datasets : data; // remove possible children of the parent while(parent.hasChildNodes()) { parent.removeChild(parent.lastChild); } var show = chart ? showTooltip : noop; datas.forEach(function(d, i) { //span to div: legend appears to all element (color-sample and text-node) var title = document.createElement('div'); title.className = 'title'; parent.appendChild(title); var colorSample = document.createElement('div'); colorSample.className = 'color-sample'; colorSample.style.backgroundColor = d.hasOwnProperty('strokeColor') ? d.strokeColor : d.color; colorSample.style.borderColor = d.hasOwnProperty('fillColor') ? d.fillColor : d.color; title.appendChild(colorSample); var text = document.createTextNode(d.label); text.className = 'text-node'; title.appendChild(text); show(chart, title, i); }); } //add events to legend that show tool tips on chart function showTooltip(chart, elem, indexChartSegment){ var helpers = Chart.helpers; var segments = chart.segments; //Only chart with segments if(typeof segments != 'undefined'){ helpers.addEvent(elem, 'mouseover', function(){ var segment = segments[indexChartSegment]; segment.save(); segment.fillColor = segment.highlightColor; chart.showTooltip([segment]); segment.restore(); }); helpers.addEvent(elem, 'mouseout', function(){ chart.draw(); }); } }

Esse bloco de códigos vai ser responsável por criar nossa legenda colorida conforme for à cor correspondente no gráfico para uma melhor visualização.

Se tudo estiver correto seu gráfico ficará da seguinte forma.

Grafico de linhas com legenda

Como já falamos, a biblioteca do Chart.JS possui diversos temas para gráficos web, foi mostrados como se criar um gráfico de linhas, porém há gráficos de barras, pizza, rosquinha e todos eles seguem quase a mesma lógica, só mudando sua chamada na hora de instanciar, colocando seus respectivo nome do gráfico.

Vou fazer mais um exemplo criando um gráfico de barras para melhor entendimento.

Para criamos basta chamar a função abaixo que segue a mesma lógica apenas mudando o final dela com a chamada (.Bar) em vez de (.Line).

 function barsChart() { var data = { labels : ["January","February","March","April","May","June","July"], datasets : [ { fillColor : "rgba(220,220,220,0.5)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", data : [65,59,90,81,56,55,40], label : 'Tigers' }, { fillColor : "rgba(151,187,205,0.5)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", data : [28,48,40,19,96,27,100], label : 'Bears' } ] }; var ctx = document.getElementById("barsChart").getContext("2d"); new Chart(ctx).Bar(data); legend(document.getElementById("barsLegend"), data); }

Ficando desta maneira:

Grafico chart.js de barras com legenda

Prontinho, temos mais um gráfico de barras lindo criado.

Para fazer download de mais exemplos de gráficos com Chart.js

Dúvidas críticas ou sugestões comentem abaixo que teremos o prazer em tentar ajuda-los.laugh

Veja Também:

Artigos Relacionados a categoria: JavaScript

Olá, deixe seu comentário para Criando Gráficos com Chart.js com legenda

Já temos 7 comentário(s). DEIXE O SEU :)
Rodrigo

Rodrigo

Rapaz, parabéns pela prestação de serviço !
★☆☆☆☆ DIA 05.11.15 10h11 RESPONDER
Leonardo Martins
Enviando Comentário Fechar :/
Leonardo Martins

Leonardo Martins

Rodrigo muito obrigado pelo seu comentário e que bom que gostou, é sempre um prazer poder ajudar....
★☆☆☆☆ DIA 09.11.15 14h11 RESPONDER
N/A
Enviando Comentário Fechar :/
PEDRO ALEXANDRE DOS SANTOS FERREIRA

PEDRO ALEXANDRE DOS SANTOS FERREIRA

Obrigado pela dica, Mas como tratar horas?
Por exemplo Segunda 20:00, Terça 30:00, resumindo o meu resultado e horas.
★☆☆☆☆ DIA 31.01.16 08h01 RESPONDER
N/A
Enviando Comentário Fechar :/
Débora Moura dos Santos

Débora Moura dos Santos

Muito bom esse post, poderiam me ajudar?
Como eu faço para colocar a porcentagem no grafico dentro de cada cor?
Ex: no de pizza
★★★★★ DIA 06.07.16 23h02 RESPONDER
N/A
Enviando Comentário Fechar :/
Anderson Oliveira

Anderson Oliveira

Boa tarde, alguém pode me ajudar, criar um gráfico de linha com preenchimento interno das linhas... como este ai acima...
★★★★★ DIA 05.12.16 18h59 RESPONDER
N/A
Enviando Comentário Fechar :/
Leonardo Martins

Leonardo Martins

Boa tarde Anderson, logo abaixo temos um botão para poder baixar os exemplos acima e adapta-los a sua necessidade!
★★★★★ DIA 13.12.16 10h03 RESPONDER
N/A
Enviando Comentário Fechar :/
Jackson Fernandes

Jackson Fernandes

Bom dia Leonardo,
Como faço para adicionar os valores nos rótulos, sem precisar passar o mouse sobre a barra para exibir o valor?
★★★★★ DIA 11.04.17 09h04 RESPONDER
N/A
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/

...AINDA NÃO VIU NOSSO PORTFÓLIO?

Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite e veja agora mesmo e tenha um site de qualidade para o seu negócio!

[contato]
Ver o Portfólio Agora