Question

I have a pie chart created with raphael. I have a form checkbox that when clicked I want to attach ‘effects’ to the pie. This example is trying to attach an inner glow with inGlowFun() by creating a circle after it with a gradient.

function allPie(){       

   var pie;     

        Raphael.fn.renderPie = function(cx,cy,r,values,total) {

            var canvas = this, 
                radian = Math.PI / 180,
                chart = this.set();

            function createSlice(cx, cy, r, startAngle, endAngle, params) {
                var x1 = cx + r * Math.cos(-startAngle * radian),
                    x2 = cx + r * Math.cos(-endAngle * radian),
                    y1 = cy + r * Math.sin(-startAngle * radian),
                    y2 = cy + r * Math.sin(-endAngle * radian);


                return canvas.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
            }




            var angle = 90,
                process = function (j) {

                        var value = parseInt(values[j].spend, 10),
                        angleplus = 360 * value / total,
                        p = createSlice(cx, cy, r, angle - angleplus, angle, {fill: values[j].pieColour, stroke: "#FFF", "stroke-width": 1});

                    values[j].slice = p;    

                    angle -= angleplus;
                    chart.push(p);          
                };


            function glowFun(){
            canvas.circle(cx, cy, 140).attr({fill:"r#fff-#fff:96-#CCC", "stroke-width": 0});
            } 



            // creating each pie slice
            for (var i = 0, ii = values.length; i < ii; i++) {
                process(i);
            }
            //create inner gradient
            function hollowFun(){
            canvas.circle(cx, cy, 120).attr({fill:"85-#fff-#CCC", "stroke-width": 20, "stroke": "#FFF", 'opacity': 0.000001} );
            }




            // inner glow (I admit this is a bit of a hack but it keeps it simple)
            function inGlowFun(){
           canvas.circle(cx, cy, 55).attr({fill:"r#fff-#fff:85-#CCC", "stroke-width": 2, "stroke": "#FFF"});
            }
            if(box.checked){
            inGlowFun();
            }

            // returning the whole set of nodes for interactions later
            return chart;

        };







        // creating a namespace for this code so that anything we create won't effect other JavaScript on the page
        var dotNet = window.dotNet || {};








        /*
        a function that parses the data contained in the data table, creates the Raphaël object we're drawing too and calls our Raphaël plug-in
            $source - reference to the data source (an HTML table in this example)
            $container - reference to the HTML element we're creating the chart inside
        */    
        dotNet.makePie = function($source, $container, pie) {    
            var pie;
            /*
            few constannt variables for this function
                pieData - an empty array that will hold an object for each section
                totalSpend - the grand total of all the rows (calculated via code for greater accuracy)
            */
            var pieData = [],
                totalSpend = 0;


            /* 
            function to parse each table row, create HTML and attach events
                i - index of the iteraction
            */
            function prepare(i) {

                /*
                variables used for each call
                    row - jQuery object of the current table row
                    values - an empty object that will be filled with data and references associated with each row
                    head - jQuery object used to reference the th of the current row
                */
                var row = $(this),
                    values = {},
                    head = row.find('.tabh');

                // grabbing the numeric total for the row and assigning to values
                values.spend = row.find('.tdh').text();
                // each pie slice will now be styled in a CSS file -keeping style where it should be other than in JavaScript
                values.pieColour = row.find('th span').css('borderLeftColor');

                // increase total value
                totalSpend += parseInt(values.spend, 10);

                // push values into the array for access later
                pieData.push(values);

            }

            // iterate through each table row (only in the body)    
            $source.find('.tbh tr').each(prepare);



            // call the plugin to create the chart    
            var sizeman = 300
            var sizepiespace = sizeman /2
            var sizepie = sizeman / (30/13)
            if(pie){
            pie.clear();
            }
            pie = Raphael($container[0], sizeman, sizeman).renderPie(sizepiespace, sizepiespace, sizepie, pieData, totalSpend);

            // attaching an event to the Raphaël set that fades all the slice back to full opacity
            pie.mouseout(function() {
                pie.attr('opacity', 1);
            });

        };


// calling our makePie function on DOM ready
        function piefunc(){
         $(function() {
          dotNet.makePie($('table'),$('#pie'), pie);
    });
    }
   piefunc();

}

This is the checkbox that it applies to and where the pie is actually run.
            <form>
            <input type="checkbox" id="checker" onclick="checkFun();" />
            </form>

            <script type="text/javascript">



            var box = document.getElementById('checker');
        function checkFun(){
        allPie();

        }

    allPie();
    pieShower();
            </script>

When the checkbox is clicked it does generate a new pie with the desired effect, unfortunately it also pushes the previous version down and keeps it on the same page, and so as you keep checking and unchecking the box more and more are made on the page. Is there anyway to ‘delete’ or remove the chart that is already on the page while creating a new one with the desired effect?

Answer 1

try this

make var pie a global variable instead local one

and before the var pie = Raphael($container.....

add the following

if(pie){
    pie.clear();
}

also , your better use the graphael piechart api instead your current way (INMO)

take a look at my jsfiddle with hover (glow like) effect + click callback