views:

509

answers:

1

Hi,

I was trying to draw the raphaeljs piechart. I used the same example as shown on "http://g.raphaeljs.com/piechart2.html". It renders me the text but the pie charts goes missing.Can someone please help?

please find the code below.

g·Raphaël Dynamic Pie Chart Demo window.onload = function () { var r = Raphael("holder"); r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif";

            r.g.text(320, 100, "Interactive Pie Chart Demo").attr({"font-size": 20});

            var pie = r.g.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"]});
            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({scale: [1, 1, this.cx, this.cy]}, 500, "bounce");
                if (this.label) {
                    this.label[0].animate({scale: 1}, 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/"&gt;g·Raphaël&lt;/a&gt; JavaScript library.
    </p>
</body>

A: 

Do you have any styling on

<div id="holder"></div>

In any case, try playing with the first two values in

var pie = r.g.piechart(320, 240, ...

They determine positioning. Sounds like in your case, you want to make those smaller.

wass3r