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>
Ubuntu Life 
Comentarios recientes