g raphael js interactive pie by Daniel Reznick

g raphael js interactive pie by Daniel Reznick

by vusan

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/min/g.raphael-min.js"></script>
<script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/g.pie.js"></script>
<div id="holder"></div>

<p>
    Pie with legend, hyperlinks on two first sectors and hover effect.
</p>
<p>
    Demo of <a href="http://g.raphaeljs.com/">gRaphaël</a> JavaScript library.
</p>

JavaScript

var r = Raphael("holder"),
                    pie = r.piechart(320, 240, 100, [5, 5, 1], { legend: ["%%.%% - a", "%%.%% - b","%%.%% - c"], legendpos: "east", colors: ["#DDE01A","#D31515","#87B700"]});


                r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px 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].attr({ r: 7.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({ r: 5 }, 500, "bounce");
                        this.label[1].attr({ "font-weight": 400 });
                    }
                });