gvChat es un plugin para jQuery que utiliza la librería Google Charts para trabajar con gráficos estadísticos (Area, Lineal, Barras, Columnas y Pie) en nuestros proyectos.

Para crear estos gráficos solo hace falta plasmarlos en una tabla HTML y el plugin se encargara de todo, con algunas configuraciones podemos personalizarlo.

Dominios y Hosting

Estructura HTML.

Esta estructura será la que utilizaremos como estándar para generar nuestros gráficos.

<table id="myTable" style="display: none;">
    <caption>Game players count</caption>
    <thead>
        <tr>
            <th></th>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>2010</th>
            <td>125</td>
            <td>185</td>
            <td>327</td>
            <td>359</td>
            <td>376</td>
            <td>398</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tr>
        <tr>
            <th>2009</th>
            <td>1167</td>
            <td>1110</td>
            <td>691</td>
            <td>165</td>
            <td>135</td>
            <td>157</td>
            <td>139</td>
            <td>136</td>
            <td>938</td>
            <td>1120</td>
            <td>55</td>
            <td>55</td>
        </tr>
    </tbody>
</table>

Incluir los JavaScript

Utilizaremos la librería de Google Charts, jQuery y gvChart.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.gvChart-0.1.min.js"></script>

<script type="text/javascript">
    gvChartInit();
    jQuery('#myTable').gvChart({
        chartType: 'ColumnChart',
        gvSettings: {
            vAxis: {title: 'No of players'},
            hAxis: {title: 'Month'},
            width: 720,
            height: 300,
            }
    });
</script>

chartType: Podemos cambiar de tipos de gráficos, estos son los permitidos:

• AreaChart
• LineChart
• BarChart
• ColumnChart
• PieChart

Ejemplo de gvChart AreaChart