Gráficos em Highcharts

O Highcharts é uma ferramenta desenvolvida em Javascript com a finalidade de gerar gráficos em páginas web, de diferentes tipos e com variadas funcionalidades. Ele utiliza funções jQuery - uma biblioteca JavaScript desenvolvida para simplificar os scripts client side que interagem com o HTML.

Para utilizar o jQuery, adicione a seguinte linha no cabeçalho (ou baixar o arquivo e indicar o caminho no campo src):


A versão mais recente pode ser vista no site do jQuery - a versão do exemplo é a 2.2.4 compacta (ou seja, sem formatação, com o objetivo de ser mais rápida do que uma versão com identação). Essa linha deve vir antes da chamada do highcharts, se não vai aparecer o erro "Uncaught TypeError: $(...).highcharts is not a function" no console do browser e o gráfico não vai aparecer.

Para usar o highcharts, inclua a seguinte linha no cabeçalho (ou baixar o arquivo e indicar o caminho no campo src). Também adicione uma div com um id e defina uma largura e uma altura para o gráfico.



<div id="grafico" style="width:100%; height:400px;"></div>

Adicione a tag JavaScript em qualquer lugar da página (preferencialmente no head), contendo o código para jQuery (a id da div utilizada é referenciado no objeto jQuery).

Algumas versões de highcharts são incompatíveis com outras. Para fixar a referência com a versão que está trabalhando, coloque o número logo depois do domínio no endereço inserido na tag de javascript do head - por exemplo, o endereço para a versão 4.2.5 fica "http://code.highcharts.com/4.2.5/highcharts.js".

Veja esse exemplo do javascript para montar o gráfico em Highcharts:


Obs.: se for inserir em um código que já tenha uma função, pode incluir as linhas na própria função, e aí não precisa do "$(function () { });" da primeira e última linhas.

Exemplo de gráfico gerado pelo código acima: Velocidade de cruzeiro (em km/h), autonomia média (em km, com peso máximo de decolagem) e altitude de cruzeiro (em metros) de algumas aeronaves comerciais

Exemplo de gráfico gerado pelo código acima: Velocidade de cruzeiro (em km/h), autonomia média (em km, com peso máximo de decolagem) e altitude de cruzeiro (em metros) de algumas aeronaves comerciais; tooltip em destaque quando passa o cursor do mouse sobre a barra (no caso, velocidade do Embraer 190)

Outros tipos de gráficos além do "bar" podem ser vistos tanto em código como demonstrações de uso no Highcharts Demos.

O Highcharts usa uma estrutura de objeto JavaScript para definir as opções ou configurações de um gráfico (veja mais cada uma delas no link). Para colocar as informações, note que basta criar uma linha com os dados separados por vírgula dentro de colchetes, sendo as strings geralmente são expressas entre aspas simples.

Os dados podem ser organizados em um array usando PHP ou mesmo no próprio JavaScript. Para arredondar o valor exibido, usar ":.0f", onde 0 é o número de casas depois da vírgula nesse exemplo.

Além dos conceitos básicos de gráfico (título, subtítulo, eixos, séries legendas, etc), existe o "tooltip": um retângulo que aparece com mais informações do ponto quando o cursor do mouse passa em cima.

Para usar dados de arquivo CSV, deve-se incluir no cabeçalho o seguinte código:


Também deve-se envolver o código com a seguinte função para leitura dos dados - e também incluir a variável "csv" no campo "data":

$.get('data.csv', function(csv) {
	//CÓDIGO
	$('#grafico').highcharts({
		data: {
			csv: csv
		}
	});
});

Veja no link como configurar o arquivo CSV a ser lido.

Para testar os gráficos em si, existe uma versão gratuita na nuvem que permite compartilhar o gráfico gerado: Highcharts Cloud.

Fontes

Compartilhe o link desse texto, mas se for copiar algum trecho, cite a fonte. Valorize nosso trabalho.
Mais informações na licença de uso do site.