Diario de un Programador: HTML5: Gráficas con RGraph

miércoles, 24 de octubre de 2012

HTML5: Gráficas con RGraph

RGraph es una biblioteca para generar gráficos utilizando el elemento canvas de HTML5. Al igual que muchas bibliotecas (librerías) gráficas, RGraph soporta una amplia variedad de tipos de gráficos incluyendo barras, pies, radar, etc. Además ofrece una calidad gráfica muy buena a pesar de estar utilizando HTML5

Ya que RGraph utiliza el elemento canvas, y éste permite dibujar en 2D utilizando Javascript, los gráficos aparecerán más rápido que cuando se utiliza Flash, puesto que Flash necesita descargar el objeto emebebido SWF. RGraph trabaja estupendamente en la mayoría de navegadores que ya soportan HTML5 (Firefox, Chrome, Opera, Safari, etc)

Puedes descargar la librería de Aqui

Utilizarla es fácil, solo tienes que incluir los archivos de la librería:


    <script src="../libraries/RGraph.common.core.js" ></script>

    <script src="../libraries/RGraph.common.tooltips.js" ></script>

    <script src="../libraries/RGraph.common.dynamic.js" ></script>

    <script src="../libraries/RGraph.pie.js" ></script>

Y utilizarla de la siguiente manera:


<script>

        window.onload = function ()

        {

            var data = [20,13.43,2.83,4.24,7.42,13.43,38.65];



            var pie = new RGraph.Pie('cvs', data);

            pie.Set('chart.labels', ['Miscellaneous','Cooking','Office equipment','Refridgeration','Cooling','Ventilation','Lighting']);

            pie.Set('chart.tooltips', ['Miscellaneous','Cooking','Office equipment','Refridgeration','Cooling','Ventilation','Lighting']);

            pie.Set('chart.tooltips.event', 'onmousemove');

            pie.Set('chart.colors', ['#EC0033','#A0D300','#FFCD00','#00B869','#999999','#FF7300','#004CB0']);

            pie.Set('chart.strokestyle', 'white');

            pie.Set('chart.linewidth', 3);

            pie.Set('chart.shadow', true);

            pie.Set('chart.shadow.offsetx', 2);

            pie.Set('chart.shadow.offsety', 2);

            pie.Set('chart.shadow.blur', 3);

            pie.Set('chart.exploded', 7);



            for (var i=0; i<data.length; ++i) {

                pie.Get('chart.labels')[i] = pie.Get('chart.labels')[i] + ', ' + data[i] + '%';

            }



            pie.Draw();

        }

    </script>

Y el resultado es:

Diario de un Programador

Páginas

miércoles, 24 de octubre de 2012

HTML5: Gráficas con RGraph

No hay comentarios:

Publicar un comentario

Esatdísticas