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/

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.