Agrega graficos estadisticos pie ajax

por | Mar 6, 2009 | AJAX, Diseño, Otros

Hace poco encontré un plugin para jquery que nos permite hacer gráficos de barras usando CANVAS, puedes descargar el plugin de aqui recuerda que canvas aun no es soportado por IE, por lo que para hacerlo compatible deberás usar una script js que te permita usar Explorer Canvas para hacerlo compatible.

El funcionamiento del script es muy sencillo, solo debes tener todos tus datos en una tabla y el plugin se encarga del resto con una sola linea, además es posible elegir multiples estilos de graficos pie, bar, area, line, stacked bar.

Codigo html de los graficos estadisticos

Como ya dije solo debes ingresar tus datos mediante una tabla simple

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<table id="dataTable" summary="Member Data from 2000 to 2006">
    <caption>Member Data from 2000 to 2006</caption>
    <thead>
        <tr>
            <td></td>
            <th id="2000">2000</th>
            <th id="2001">2001</th>
            <th id="2002">2002</th>
            <th id="2003">2003</th>
            <th id="2004">2004</th>        
        </tr>
    </thead>
    <tfoot>
       
    </tfoot>
    <tbody>
        <tr>
            <th headers="members">Mary</th>
            <td headers="2000">150</td>
            <td headers="2001">160</td>
            <td headers="2002">40</td>
            <td headers="2003">120</td>
            <td headers="2004">30</td>
        </tr>
        <tr>
            <th headers="members">Tom</th>
            <td headers="2000">3</td>
            <td headers="2001">40</td>
            <td headers="2002">30</td>
            <td headers="2003">45</td>
            <td headers="2004">35</td>
        </tr>
        <tr>
            <th headers="members">Brad</th>
            <td headers="2000">10</td>
            <td headers="2001">00</td>
            <td headers="2002">10</td>
            <td headers="2003">85</td>
            <td headers="2004">25</td>
        </tr>
        <tr>
            <th headers="members">Kate</th>
            <td headers="2000">40</td>
            <td headers="2001">80</td>
            <td headers="2002">90</td>
            <td headers="2003">25</td>
            <td headers="2004">15</td>
        </tr>      
    </tbody>
</table>

Luego debes definir el espacio donde estará ubicado el canvas

1
<canvas id="chart1" class="fgCharting_src-dataTable_type-pie" width="400" height="400"></canvas>

Fijate bien en la clase ya que esta te permitirá elegir el tipo de grafico a representar, en los estilos también asegurate de usar un tamaño de letra pequeño para el body ya que de lo contrario podría deformarse el grafico.

AJAX – Jquery

Finalmente dibujamos el grafico estadistico con una sola linea de codigo

1
$.fgCharting();