--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+ <head>
+ <title>g·Raphaël Dynamic Pie Chart</title>
+ <link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" charset="utf-8">
+ <link rel="stylesheet" href="css/demo-print.css" type="text/css" media="print" charset="utf-8">
+ <script src="../raphael/raphael.js" type="text/javascript" charset="utf-8"></script>
+ <script src="../g.pie.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript" charset="utf-8">
+ window.onload = function () {
+ var r = Raphael("holder"),
+ pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["%%.%% - Enterprise Users", "IE Users"], legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]});
+
+ r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px 'Fontin Sans', Fontin-Sans, sans-serif" });
+ pie.hover(function () {
+ this.sector.stop();
+ this.sector.scale(1.1, 1.1, this.cx, this.cy);
+
+ if (this.label) {
+ this.label[0].stop();
+ this.label[0].scale(1.5);
+ this.label[1].attr({ "font-weight": 800 });
+ }
+ }, function () {
+ this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy] }, 500, "bounce");
+
+ if (this.label) {
+ this.label[0].animate({ transform: '' }, 500, "bounce");
+ this.label[1].attr({ "font-weight": 400 });
+ }
+ });
+ };
+ </script>
+ </head>
+ <body class="raphael" id="g.raphael.dmitry.baranovskiy.com">
+ <div id="holder"></div>
+ <p>
+ Pie chart with legend, hyperlinks on two first sectors and hover effect.
+ </p>
+ <p>
+ Demo of <a href="http://g.raphaeljs.com/">g·Raphaël</a> JavaScript library.
+ </p>
+ </body>
+</html>
projects / g.raphael / commitdiff