RGraph, graficas con Canvas HTML5

Interesante libreria para crear graficas con HTML5. Aqui un pequeño ejemplo:

<!DOCTYPE html>
<html>
<head>
   
    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
    
    
    <script src="../libraries/RGraph.common.js" ></script>
    <script src="../libraries/RGraph.pie.js" ></script>
    <!--[if IE]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->

    <script>
        window.onload = function ()
        {
            /**
            * These are not angles - these are values. The appropriate angles are calculated
            */
            var pie1 = new RGraph.Pie('pie1', [41,37,16,3,3]); // Create the pie object
            pie1.Set('chart.labels', ['MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)', 'Safari (3%)', 'Other (3%)']);
            pie1.Set('chart.gutter', 30);
            pie1.Set('chart.title', "Browsers (tooltips, context, fade, zoom)");
            pie1.Set('chart.shadow', false);

            if (!document.all) {
                pie1.Set('chart.tooltip.effect', 'expand');
                pie1.Set('chart.tooltips', [
                                            'Internet Explorer 7 (41%)',
                                            'Internet Explorer 6 (37%)',
                                            'Mozilla Firefox (16%)',
                                            'Apple Safari (3%)',
                                            'Other (3%)'
                                           ]
                                          );
                pie1.Set('chart.highlight.style', '3d'); // Defaults to 3d anyway; can be 2d or 3d
                pie1.Set('chart.zoom.hdir', 'center');
                pie1.Set('chart.zoom.vdir', 'center');
                
                pie1.Set('chart.labels.sticks', true);
                pie1.Set('chart.labels.sticks.color', '#aaa');
                pie1.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom]]);
            }
            
            pie1.Set('chart.linewidth', 5);
            pie1.Set('chart.strokestyle', 'white');

            pie1.Draw();
            
                /**
                * Make the first pie chart fade in
                */
                pie1.opacity = 1;
                
                fadeFunc = function ()
                {
                    pie1.Draw();

                    var context  = pie1.context;
                    var gutter   = pie1.gutter;

                    if (pie1.opacity > 0.1) {
                        context.beginPath();
                        context.fillStyle = 'rgba(255,255,255,' + pie1.opacity + ')';
                        context.fillRect(0, pie1.Get('chart.gutter'),400,300);
                        pie1.opacity -= 0.1;
                    
                        setTimeout(fadeFunc, 50);
                    }
                }
                
                fadeFunc();

         
        }
    </script>

<script>
/*
    window.onload = function ()
    {
        var data = [564,155,499,611,322];
    
        var pie = new RGraph.Pie('pie1', data);
        pie.Set('chart.labels', ['Abc', 'Def', 'Ghi', 'Jkl', 'Mno']);
        pie.Set('chart.linewidth', 5);
        pie.Set('chart.stroke', '#fff');
        pie.Draw();
    }
*/
</script>


</head>
<body>
    
    <div style="text-align: center">
        <canvas id="pie1" width="420" height="300">[No canvas support]</canvas>
       
    </div>

</body>
</html>

2 Responses to “RGraph, graficas con Canvas HTML5”


  1. 2 Mordraug mayo 5, 2010 a las 4:28 pm

    Esta es muy bueno y el ejemplo me va a servir mucho. Gracias!


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s







¿Es compatible tu equipo con Ubuntu?


( Muchos fondos de pantalla, aqui )

DESCARGATE SCIFI LIFE

365 Dias de Soledad
Me debes los sueños, las promesas y las noches rotas. Me debes la paz, la sonrisa y la esperanza robadas. Me debes la sangre, las lágrimas y el sudor vertido. Me debes las noches vacías, los abrazos anhelados. Me debes un beso de ajenjo de tu amarga boca.

The Ubuntu Counter Project - user number # 11961
Geo Visitors Map

Archivos

mayo 2010
L M X J V S D
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Blog Stats

  • 31.240.464 hits

A %d blogueros les gusta esto: