Canvas/ HTML 5/ HTML5 / CSS3/ Javascript/ JQuery

Criando gráficos do zero com Canvas e Javascript

flud-charts
[quote style=”1″]Acabei de refazer os fiddles, o Johannes Lochter trouxe o problema à tona onde não estava aparecendo Chrome e IE, era uma limitação do Fiddle e ajustei. Se alguém tiver problemas em não visualizar o conteúdo me avisem pelos comentários.[/quote]

A parte boa de vim do Flash/Flex é que em Javascript você tem toda a liberdade possível usando o canvas como instrumento de desenho, igual o Stage branco do flash e uma API semelhante para fazer formas geometricas, dignas de 8 anos atrás.

Apesar de ser um rascunho Canvas, é um elemento amplamente adotado no novo padrão HTML5, sem ele basicamente o HTML5 seria ainda HTML 4.1, ele é o máximo das novidades que eu coloco em pauta.

Definindo gráfico

[quote style=”1″]Suponha que você precise mostrar esses resultados de forma mais convincente do que a tradicional forma em números. É ai onde entra o gráfico, ele representa o desenho daqueles números que você possui disponível, é uma forma de atalho para mostrar que A+B = C.[/quote]

Sem mais delongas, gráficos são excelentes, enche os olhos de qualquer pessoa que os vê. Eles não só representam uma forma geométrica, representam métricas de dados reais e isso reflete e muito na tomada de decisão que uma pessoa faz ao usa-los.

Nessa série de posts, eu vou comentar um pouco sobre os gráficos mais comuns e existentes no mercado criando-os em javascript com Canvas do HTML5 e CSS3.
Existem N bibliotecas para criar gráficos usando esse recurso, a idéia é você aprender o que está por trás dessas bibliotecas, quais técnicas, quais calculos de trigonometria você precisa ficar por dentro e assim, só assim você pode entender como gráficos são feitos.

Eu sempre quis fazer algo semelhante sem precisar usar bibliotecas de terceiros, quando você chega nesse grau de curiosidade só assim você consegue enxergar o campo todo e aperfeiçoar bibliotecas existentes, colaborar com projetos já existentes ou até mesmo criar as suas.

A lista de gráficos que vou comentar é essa:

  • Gráfico de Area
  • Gráfico de Barras
  • Gráfico de Colunas
  • Gráfico de Gauge
  • Gráfico de Linhas
  • Gráfico de Pizza

Embora esses não sejam os únicos gráficos existentes. Existe uma boa chance, 90% dos casos onde você vai se deparar com eles. Se você quer criar gráficos sem se preocupar em como fazê-los, pode parar de ler por aqui e adotar essas bibliotecas abaixo:

É biblioteca o bastante para fomentar qualquer um por gráfico, elas são excepcionais e faz o trabalho de maneira perfeita. Melhor ainda é aprender como gráficos são feitos.

O primeiro que decidi fazer nessa série é o gráfico de Gauge, mais conhecido como velocimetro, gauge de agulha. Bastante usado em automóveis, medição de stress, pressão e por ai vai.

gauges
Créditos da foto : http://500px.com/photo/4573670

Matemática por trás da medição

É trigonometria na sua mais pura forma, seno, coseno e tangente, para saber o angulo, arco você tem que usar ambos os calculos, embora possa parecer difícil, criar isso é ridicularmente simples, especialmente quando o Canvas do HTML já vem com o calculo pronto para você, basta você passar os valores necessários e pimba! Gráfico está feito.

Desenhando um arco simples

O interessante da API do canvas é justamente essa facilidade, não é o desenho de um arco perfeito, dá para o gasto para o propósito final que queremos.

A mesma lógica por trás do desenho do Gauge é o desenho do gráfico de pizza, tudo parte do principio do ponto atual, o angulo que começa o gráfico e onde ele termina para começar o próximo.

Vejamos como você pode mitigar isso da seguinte forma.

Desenhando um gráfico de Pizza ou Torta(pie) como dizem pelas gringas

Desenhando um gráfico de Barras

Outro gráfico bastante usado em dashboards é o gráfico de Barras, ele basicamente é um indicador de quando cresceu ou diminuiu determinado valor em um intervalo de tempo ou de número. Eu já comentei aqui como criar um desses usando puramente JQuery e CSS, dessa vez usando o elemento Canvas.

O único método é o rect (desenha um retangulo), bem conhecido pelos desenvolvedores de Actionscritpt 2.0.

Ou Até animado.

Desenhando um gráfico de Colunas

O mesmo gráfico só que com o eixo invertido, ao invés de incrementar apenas o eixo X, incremento o Y e ele vai sendo exponencialmente incrementado conforme a ordem que foi criada do dataProvider.

Desenhando um gráfico de Linha

É bastante comum usar o gráfico de linha, é basicamente um indicativo de onde você chegou e onde você etá, é o preferido do mercado de ações da bolsa. O gráfico de linha sempre é acompanhado do primeiro elemento e a única série que muda é a série vertical, os pontos horizontais de um gráfico de linhas sempre são baseados na constante (largura disponível / número de registros) vezes o valor de cada registro.

Já a posição Y que sempre está variando para que a linha mude “lineTo()”, seja constante, exemplo pegue o último valor registrado e começe daquele ponto, sempre é feita pela constante. ( altura disponível / valor máximo encontrado) vezes o valor que se tem nos dados.

A mesma lógica do gráfico de linhas pode ser aplicada ao gráfico de Area, afinal a diferença é que você pode mostrar uma área (path), acompanhando os pontos da linha.

Trigonometria é a essência dos gráficos, fique livre para fazer um fork, alterar e hackear, por exemplo implementar a exibição dos eixos X,Y, implementar o click em determinado item do Gráfico, criar um plugin para JQuery ou até mesmo para criar eles animados. Nesse ponto eu prefiro fazer os gráficos não usando imagem simples do Canvas, mais sim um elemento avançado como o SVG, fica muito mais fácil fazer tais interações e integrar com uma biblioteca de afinamento de efeito ‘easing’.

Até o próximo post.