Highcharts é uma ferramenta que pode ser usada gratuitamente, desde que não seja para fins comerciais. Desenvolvida em Javascript, tem a finalidade de gerar gráficos em páginas web, esse sistema oferece inúmeros tipos e modelos de gráficos disponíveis para a utilização.

A utilização do Highcharts não é muito complicada, será preciso apenas ordenar os valores em duas listas, dependendo do tipo de gráfico que será usado.

O pacote disponível na internet oferece cinco tipos diferentes de gráficos:

• Gráfico em linhas
• Gráfico em áreas
• Colunas e barras
• Gráficos em pizza
• Combinações entre os tipos existentes.

Para cada um desses acima existem algumas opções diferentes de estilo, posições e quantidade de informações, ou seja, essa ferramenta lhe oferece muitas opções.

O download o Highcharts pode ser feito nesse link:

• http://www.highcharts.com/download

Nesse site está disponível também tutoriais sobre como montar gráficos com estilos diferentes.

Após o download, basta apenas descompactar os arquivos, de preferência na pasta www do seu servidor, já que iremos trabalhar com páginas web e php.

Ao acessar essa pasta pelo navegador, você terá uma lista com os tipos de gráficos disponíveis, exibindo informações fictícias para demonstrar a funcionalidade e aparência daquilo que foi gerado.

Detalhes que garantem o funcionamento

Se prestar atenção nos arquivos que compõem o pacote baixado, encontrará uma pasta com o nome "JS". Esse diretório é praticamente o motor que dá vida ao gráfico, ele contém os arquivos em javascript. Mas há outro arquivo muito importante que não vem no pacote e sem ele o Highcharts não funciona. No cabeçalho de qualquer arquivo da pasta "examples" encontramos as seguintes linhas:


A linha em observação faz referência a o arquivo "jquery.min.js" que está em um servidor do Google. Se tentarmos usar o Highcharts em uma rede onde o acesso a internet é restrito, como em escolas, redes lan sem conexão com internet ou em qualquer lugar onde o acesso é limitado apenas para as utilidades do trabalho, o gráfico não irá funcionar.

A maneira mais prática pra resolver essa situação é criar um arquivo jquery.min.js, dentro da pasta "JS". O primeiro passo é copiar a url que temos na linha em destaque no seu navegador:

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Dependendo do navegador, o conteúdo do arquivo será mostrado na tela ou aparecerá aquela opção pra download do arquivo. Se for a 1° caso, basta copiar todo o texto do navegador e colar num editor de texto, salva na pasta "JS" com o nome "jquery.min.js". Depois disso é só alterar a linha destacada para: