Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless

Nesta matéria vou mostrar como obter um gráfico tipo pizza a partir de uma tabela de dados.

Vamos usar o elemento canvas da HTML 5 e um código JavaScript para atingir nosso propósito. É sabido que o Internet Explorer, versões atuais, não suportam o elemento canvas, mas a novidade nesta matéria é apresentar um script denominado Explorer Canvas que faz o IE suportar o elemento canvas.

Observe na figura a seguir um screenshot da renderização do que iremos obter no final da matéria.

Visite uma página demonstração para a técnica descrita.

E aqui estão os ingredientes da receita:

1. Um elemento canvas;
2. Uma tabela de dados;
3. JavaScript para extrair os dados da tabela;
4. JavaScript para plotar os dados em canvas.

Elemento canvas

 
 
<canvas id="canvas" width="300" height="300"></canvas>

Tabela de dados

<table id="mydata">
 <thead>
  <tr>
    <th>Linguagem</th>
    <th>Valor</th>
  </tr>
 </thead>

 <tbody>
  <tr>
    <td>JavaScript</td>
    <td>100</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>200</td>
  </tr>
  <tr>
    <td>HTML</td>
    <td>300</td>
  </tr>
  <tr>
    <td>PHP</td>
    <td>50</td>
  </tr>
  <tr>
    <td>MySQL</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Apache</td>
    <td>10</td>
  </tr>
    <tr><td>Linux</td>
    <td>30</td>
  </tr>
 </tbody>
</table>

JavaScript para extrair os dados da tabela

Vamos começar com algumas configurações. Iremos informar ao script qual é o id da tabela de dados, o id do elemento canvas e a coluna que contém os dados:

 
 
// a tabela e o elemento canvas na marcação HTML
var data_table = document.getElementById('mydata');
var canvas = document.getElementById('canvas');
var td_index = 1; // qual td comtém os dados

A seguir vamos selecionar todas a linhas da tabela (tr’s) e criar um loop por elas selecionando suas células (td’s). Continuando adicionaremos os dados da tabela em um array e obteremos o total de dados na coluna. Criamos um array de cores randômicas. Colorimos cada uma das linhas da tabela com uma cor randômica selecionada (veremos a função para selecionar a cor, denominada getColor(), logo adiante)

 
 
var tds, data = [], color, colors = [], value = 0, total = 0;
var trs = data_table.getElementsByTagName('tr'); // todas as tr's
for (var i = 0; i < trs.length; i++) {
tds = trs[i].getElementsByTagName('td'); // todas as td's

if (tds.length === 0) continue; //  não há td's, vá em frente

// extrair o valor da td e atualizar o total
value  = parseFloat(tds[td_index].innerHTML);
data[data.length] = value;
total += value;

// cor randômica
color = getColor();
colors[colors.length] = color; // armazena
trs[i].style.backgroundColor = color; // colorir a tr
}

JavaScript para plotar os dados em canvas

Chegou a hora da parte divertida, desenhar! Primeiro precisamos criar o objeto contexto para canvas. A seguir estabelecer o raio e o centro do gráfico de pizza, tudo isto tendo em vista as dimensões de canvas:

 
 
// estabelecer contexto e definir raio e centro
var ctx = canvas.getContext('2d');
var canvas_size = [canvas.width, canvas.height];
var radius = Math.min(canvas_size[0], canvas_size[1]) / 2;
var center = [canvas_size[0]/2, canvas_size[1]/2];

A seguir vamos criar um loop pelos dados da tabela e colorir os segmentos do gráfico. Para desenhar um segmento usaremos os seguintes métodos do objeto contexto:

• beginPath() – inicia um setor;
• moveTo() – coloca o ponteiro de desenho no centro;
• arc() – desenha um arco de círculo;
• lineTo() – termina o setor desenhando uma linha de volta ao centro;
• closePath() e fill() fecha o setor e preenche com uma cor já selecionada.

Observe a seguir o código para o desenho:

 
 
var sofar = 0; // monitora o andamento do script
// loop por data[]
for (var piece in data) {
var thisvalue = data[piece] / total;
ctx.beginPath();
ctx.moveTo(center[0], center[1]);
// centro do gráfico
ctx.arc(  // desenha próximo arco
center[0],
center[1],
radius,
 Math.PI * (- 0.5 + 2 * sofar), // -0.5 define o início no topo
Math.PI * (- 0.5 + 2 * (sofar + thisvalue)),          false      );
ctx.lineTo(center[0], center[1]); // linha de retorno ao centro
 ctx.closePath();
ctx.fillStyle = colors[piece];    // cor
ctx.fill();
sofar += thisvalue; // incrementa o andamento do script
}

Função utilitária

O script da função para definir uma cor randômica é mostrado a seguir:

// gera uma cor randômica
function getColor() {
var rgb = [];
for (var i = 0; i < 3; i++) {
rgb[i] = Math.round(100 * Math.random() + 155) ; // [155-255] = lighter colors
}
return 'rgb(' + rgb.join(',') + ')';
}

Isto é tudo! Divirta-se com seu gráfico de pizza

Créditos:
Author: Stoyan Stefanov
URL do artigo original: http://www.phpied.com/canvas-pie/

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Livros do Maujor

                   

Esta matéria foi publicada em: 2009-12-17 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2009/12/17/suporte-para-canvas-no-ie/trackback no seu site.