Creating PIE chart using javascript

Question

I am trying to create pie chart. Data will come from db but here I have taken static.

Here is my fiddle: http://jsfiddle.net/MJqyC/

Graph could be seen on my system on load. Here I have tried to show on button click but it does not show. where is mistake?

js function is:

var paper;
        var arc;
        var colorArr = ["#468966","#FFF0A5"];
        var pieData = [50,50];
        var sectorAngleArr = [];
        var total = 0;
        var startAngle = 0;
        var endAngle = 0;
        var x1,x2,y1,y2 = 0;

        function init(){
            paper = Raphael("holder");
            //CALCULATE THE TOTAL
            for(var k=0; k < pieData.length; k++){
                total += pieData[k];
               // alert(total);
            }
            //CALCULATE THE ANGLES THAT EACH SECTOR SWIPES AND STORE IN AN ARRAY
            for(var i=0; i < pieData.length; i++){
                var angle = Math.ceil(360 * pieData[i]/total);
               // alert(angle);
                sectorAngleArr.push(angle);
            }
            drawArcs();
        }               

        function drawArcs(){
            for(var i=0; i <sectorAngleArr.length; i++){
                startAngle = endAngle;
                endAngle = startAngle + sectorAngleArr[i];

                x1 = parseInt(200 + 180*Math.cos(Math.PI*startAngle/180));
                y1 = parseInt(200 + 180*Math.sin(Math.PI*startAngle/180));

                x2 = parseInt(200 + 180*Math.cos(Math.PI*endAngle/180));
                y2 = parseInt(200 + 180*Math.sin(Math.PI*endAngle/180));                

                var d = "M200,200  L" + x1 + "," + y1 + "  A180,180 0 0,1 " + x2 + "," + y2 + " z"; //1 means clockwise
                alert(d);
                arc = paper.path(d);
                arc.attr("fill",colorArr[i]);
            }
        }

UPDATE:

Full code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Simple SVG Pie Chart</title>
    <script type="text/javascript" src="raphael-min.js"></script>
    <script type="text/javascript">
        var paper;
        var arc;
        var colorArr = ["#468966","#FFF0A5"];
        var pieData = [50,50];
        var sectorAngleArr = [];
        var total = 0;
        var startAngle = 0;
        var endAngle = 0;
        var x1,x2,y1,y2 = 0;

        function init(){
            paper = Raphael("holder");
            //CALCULATE THE TOTAL
            for(var k=0; k < pieData.length; k++){
                total += pieData[k];
          //      alert(total);
            }
            //CALCULATE THE ANGLES THAT EACH SECTOR SWIPES AND STORE IN AN ARRAY
            for(var i=0; i < pieData.length; i++){
                var angle = Math.ceil(360 * pieData[i]/total);
            //    alert(angle);
                sectorAngleArr.push(angle);
            }
            drawArcs();
        }               

        function drawArcs(){
            for(var i=0; i <sectorAngleArr.length; i++){
                startAngle = endAngle;
                endAngle = startAngle + sectorAngleArr[i];

                x1 = parseInt(200 + 180*Math.cos(Math.PI*startAngle/180));
                y1 = parseInt(200 + 180*Math.sin(Math.PI*startAngle/180));

                x2 = parseInt(200 + 180*Math.cos(Math.PI*endAngle/180));
                y2 = parseInt(200 + 180*Math.sin(Math.PI*endAngle/180));                

                var d = "M200,200  L" + x1 + "," + y1 + "  A180,180 0 0,1 " + x2 + "," + y2 + " z"; //1 means clockwise
            //s    alert(d);
                arc = paper.path(d);
                arc.attr("fill",colorArr[i]);
            }
        }
    </script>
</head>
<body>
    <div id="holder" style="width:600px; height:400px;">
    <input type="submit" onclick="init();" value="Graph"> </input>
    </div>
</body>
</html>

Add js:

https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js

Marvin Brouwer · Accepted Answer · 2013-10-25 07:22:32Z

1

When I open the console of my browser I get these errors:

Uncaught SyntaxError: Unexpected token < raphael-min.js:4
Uncaught ReferenceError: init is not defined (index):77
2 Uncaught TypeError: Cannot read property 'id' of null modern_scroll.js:1191

If I open the raphael-min.js via the console I see HTML instead of JavaScript, I'd say the problem starts there.

answered Oct 25, 2013 at 7:22

Marvin Brouwer

3163 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2129623 Over a year ago

I added the full code please check. It works correct. But for some input value it fails. Dont know why it does not work on fiddle!

Marvin Brouwer Over a year ago

I tried putting your full code in a text file and it seems to work, whenever I press the button a new graph gets added. Could you please tell me what is your problem again?

Collectives™ on Stack Overflow

Creating PIE chart using javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related