Gráficos dinâmicos com JavaScript e <canvas>

É comum encontrarmos scripts para gerar gráficos dinamicamente como imagens, utilizando PHP, ou em Flash, porém também é extremamente fácil gerar gráficos utilizando apenas padrões web, com JavaScript e <canvas> ou SVG.

Recebi hoje um e-mail de um estudante de engenharia elétrica solicitando ajuda para gerar gráficos dinamicamente em um microcontrolador utilizando apenas HTML, CSS, XML e JavaScript. Embora sempre tenha utilizado PHP para gerar gráficos em imagens, já sabia que isto seria perfeitamente possível apenas com linguagens client-based, mas nunca me preocupei em desenvolver algo do tipo.

Pesquisando um pouco sobre o assunto, pude encontrar vários plugins e scripts para gerar gráficos utilizando JavaScript, como por exemplo, existem pugins para gerar gráficos utilizando jQuery ou Dojo, mas um que me chamou a atenção é um extremamente simples e fácil de usar, o Javascript Chart Widget.

O script pode desenhar gráficos utilizando <canvas>, SVG ou mesmo <div>. O padrão é que seja utilizado <canvas>, por ser mais rápido e proporcionando um visual mais bonito que os demais, podendo inclusive ser visualizado no MSIE, com a adição do JavaScript ExplorerCanvas.

Para utilizar o Chart Widget em uma página, primeiro é necessário adicionar os scripts chart.js, canvaspainter.js e o CSS canvaschart.css, adicionalmente, o excanvas.js deve ser incluído para suporte ao MSIE.

<script src="includes/excanvas.js" type="text/javascript"></script>
<script src="includes/chart.js" type="text/javascript"></script>
<script src="includes/canvaschartpainter.js" type="text/javascript"></script>
<link href="includes/canvaschart.css" rel="stylesheet" type="text/css" />

Após os scripts estarem incluídos corretamente, basta adicionar um elemento <div> ao corpo do documento HTML, com a largura e altura desejadas para exibir o gráfico:

<div id="chart" class="chart" style="width: 400px; height: 200px;"></div>

Então baste adicionar o código Javascript para criar o gráfico. É importante verificar que este código deve ser executado no evendo load da página, ou então ser adicionado logo após o elemento <div> que exibirá o gráfico.

ieCanvasInit('includes/iecanvas.htc');
 
var c = new Chart(document.getElementById('chart'));
c.setDefaultType(CHART_AREA | CHART_STACKED);
c.setGridDensity(5, 5);
c.setVerticalRange(0, 100);
c.setHorizontalLabels(['mon', 'tue', 'wed', 'thu', 'fri']);
 
c.add('Spam',            '#4040FF', [ 5, 10, 20, 10, 40, 52, 68, 70, 70, 60]);
c.add('Innocent',        '#8080FF', [ 8,  7, 12, 20, 24, 16, 36, 28, 28, 45]);
c.add('Missed Spam',     '#A5A5FF', [ 8,  7, 12, 20, 24, 16, 36, 36, 18,  5]);
c.add('False Positives', '#DEDEFF', [ 1,  2,  3,  2,  1,  4, 18, 12,  8,  7]);
 
c.draw();

A primeira linha do script carrega os ExplorerCanvas, sendo necessária para compatibilidade com MSIE, as cinco linhas subseqüentes criam o objeto canvas (importante especificar o id utilizado no div), definem o tipo de gráfico, a densidade da grade do gráfico, a distância vertical, e os rótulos horizontais do gráfico, respectivamente. As linhas a seguir definem as cores e valores de cada linha do gráfico, e a legenda, e o método draw(), finalmente exibe o gráfico.

O resultado, é como exibido na imagem abaixo (lembrando que o resultado real não é uma imagem <img>, mas um elemento <canvas>:

Fonte: http://webfx.eae.net/dhtml/chart/usage.html

Se você gostou deste artigo, inscreva-se em meu RSS feed!