sexta-feira, 21 de janeiro de 2011

jQuery Google charts

Pra quem precisa criar gráficos (charts) no seu site, fica a dica...

http://maxb.net/scripts/jgcharts/include/demo/

Biblioteca em jQuery que usa o Google Charts para criação de gráficos.
Pode-se criar gráficos tanto em barra quanto em linha, pizza, pizza 3D.
E inclusive gerar gráficos apartir de table html.


Exemplo1:
Basic Bar
//1 ) api 
var api = new jGCharts.Api();         
 
//2) options 
var opt = { 
    data : [[1536052], [1137060], [1208040]]//mandatory  
};//set options  
 
//3) append Img (with jQuery) 
jQuery('<img>') 
.attr('src', api.make(opt))//options  
.appendTo("#bar1");
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Exemplo2:
Anno Data 1 Data 2 Data 3
2001 153 60 52
2002 113 70 60
2003 120 80 40
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
jQuery(".jgtable").jgtable();
 <div class="jgtable"> 
  <table> 
  <thead> 
    <tr> 
        <th>Anno</th> 
        <th class="serie">Data 1</th> 
        <th class="serie">Data 2</th> 
        <th class="serie">Data 3</th> 
    </tr> 
  </thead> 
  <tbody> 
    <tr> 
        <th class="serie">2001</th> 
        <td>153</td> 
        <td>60</td> 
        <td>52</td> 
    </tr> 
    <tr> 
        <th class="serie">2002</th> 
        <td>113</td> 
        <td>70</td> 
        <td>60</td> 
    </tr> 
    <tr> 
        <th class="serie">2003</th> 
        <td>120</td> 
        <td>80</td> 
        <td>40</td> 
    </tr> 
  </tbody> 
  </table> 
</div>
 
 
 
 
 
 
 
 
 

Nenhum comentário:

Postar um comentário