gvChart: Gráficos con Google Charts y jQuery

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.

[HTML] [/HTML]

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(&#039;#myTable&#039;).gvChart({
        chartType: &#039;ColumnChart&#039;,
        gvSettings: {
            vAxis: {title: &#039;No of players&#039;},
            hAxis: {title: &#039;Month&#039;},
            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

jfdghjhthit45

También te puede interesar

2 Comments

  1. caos30
    jul 02, 2010 @ 13:43:20

    Hola, gracias por el articulo, que para variar esta super bien documentado e ilustrado. Pero mira, ya se que es una opcion personal, pero como que estoy un poco evitando depender mas de Google, he estado mirando alternativas de la misma calidad, y despues de media horita…. uffff, tienes que ver esto si es que no lo conoces:

    http://www.jqplot.com

    Navega entre la pagina de ejemplos y veras que increible! la pregunta es que no se puede hacer con este plugin????

    Reconozco que la implementacion de gvChart/Google que presentas es extremadamente sencilla. Pero tambien sabemos que normalmente la sencillez viene acompanyada de poca capacidad de personalizacion. En este sentido, jqPlot requiere una inicializacion del plugin un poco mas elaborada pero te ofrece un poder de personalizacion brutal.

    En fin, aqui estamos para aprender cada dia en este mundo maravilloso que es internet.

    Saludos!
    SERGI

  2. Pepe
    sep 02, 2010 @ 11:48:48

    JQPlot tiene bastante pero bastante que envidiar a la google chart api. No se pueden comparar para mi gusto.
    Saludos