Gráficos com javascript

Categoria: Programação

O que é Highcharts?

Highcharts é uma biblioteca para gráficos escrita apenas com Javascript, oferecendo um modo fácil de adicionar gráficos interativos para seu site ou sistema. Highcharts suporta vários tipos de gráficos como: linha, área, colunas, barras, torta entre outros tipos de gráfico.

 

Recursos

Compatibilidade

Ele funciona em todos os navegadores modernos, incluindo o iPhone e Internet Explorer a partir da versão 6. Os navegadores usam por padrão o elemento de Canvas e em alguns casos SVG para o processamento de gráficos. Nos gráficos do Internet Explorer são desenhadas usando VML.

Licença

Você quer usar Highcharts para um site pessoal, um site da escola ou uma organização sem fins lucrativos? Então você não precisa de permissão do autor, basta ir e usar Highcharts. Para sites comerciais e projetos, consulte Licenciamento e Preços.

Veja mais em: http://www.highcharts.com/license

JS Puro

Highcharts é unicamente baseado em tecnologias cross-browser e não precisa de plugins do lado do cliente como Flash ou Java. Além disso, você não precisa instalar nada no seu servidor. No PHP ou ASP.NET. Highcharts precisa de três js para executar: O núcleo highcharts.js, um emulador de Canvas para o IE, e tanto o jQuery ou o MooTools.

Inúmeros tipos de gráfico

Highcharts suporta vários tipos de gráficos como: linha, área, colunas, barras, torta entre outros tipos de gráfico. Qualquer um destes podem ser combinadas em um gráfico.

Sintaxe de configuração simples

Definir as opções de configuração do Highcharts não requer habilidades de programação especial. As opções são dadas em uma estrutura de notação de objeto de JavaScript, que é basicamente um conjunto de chaves e valores ligados por dois pontos, separados por vírgulas e agrupados por chaves.

Rótulos Tooltip

Sobre os elementos do gráfico do Highcharts pode ser exibido uma dica de texto com informações sobre cada ponto e séries. A dica segue como o usuário move o mouse sobre o gráfico, e grandes esforços têm sido tomadas para torná-lo manter o ponto mais próximo, bem como tornar mais fácil a leitura de um ponto que está abaixo de um outro ponto.

Eixo linha de tempo

75% de todos os gráficos com um eixo X e Y têm uma data no eixo X. Portanto Highchart é muito inteligente sobre os valores de tempo. Com unidades eixo milissegundos, Highchart determina onde colocar as escalas para que eles sempre marquem o início do mês ou da semana, à meia-noite e meio-dia, a hora completa etc.

Zoom

Por zoom em um gráfico você poder examinar uma parte especialmente interessante dos dados com mais clareza. O zoom pode ser na dimensão X, Y ou ambos.

Carregamento de dados externos

Highcharts pega os dados em uma matriz de JavaScript, que pode ser definido no objeto de configuração local, em um arquivo separado ou até mesmo em um local diferente. Além disso, os dados podem ser manipulados durante a Highcharts sob qualquer forma, e uma função de retorno utilizada para analisar os dados em uma matriz.

Gráfico invertido ou eixo invertido

Às vezes você precisa virar o quadro e tornar o eixo X apareça vertical, como por exemplo, em um gráfico de barras. Invertendo o eixo, com os maiores valores primeiro, também é suportado.

Rotação para os textos dos rótulos

Todos os rótulos de texto, incluindo os rótulos dos eixos, rótulos de dados para o ponto e títulos de eixo, pode ser girada em qualquer ângulo.

 

Veja a Documentação
Referência de Opções
Exemplos
Documentação, Referência de Opções e Exemplos


Sobre o Autor
Junior Moro em Campo Grande, Mato Grosso do Sul e sou programador na dothCom.
Posts Relacionados
Comentários