Home/ Questions/Q 7682227
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T18:31:09+00:00

I am trying to make a piechart by rotating the overlapping divs. I need

  • 0

I am trying to make a piechart by rotating the overlapping divs. I need to take action on mouseover or hover. Every thing is working fine if the sum of the first and last slice is 180deg or greater than 180deg.
But it stops taking hover event when the sum goes below.
Please visit
http://jsfiddle.net/fjBfE/

here when i do mouseover on the green slice– at some points its mouseover is not working and at some points its working.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There is this inherent problem with this model. if you want to keep div elements in loop, you have to

    1. either, add them in increasing order keeping their z-index same
    2. or, add them in any order but with their z-index increasing.

    Here’s what I meant:

    <html>
<head>
<style type="text/css">
     .pieContainer{
     position:relative;
     }
 .pie {
          position: absolute;
          width: 300px;
          height: 300px;
       /*  -moz-border-radius: 150px;
          -webkit-border-radius: 150px;
          -o-border-radius: 150px;
         border-radius: 150px;
/*         */ clip: rect(0px, 300px, 150px, 150px);
     }

     #pie1{
        background-color:#ff0000;
        -webkit-transform:rotate(0deg);
          z-index:100;
    }
    #pie2{
        background-color:#00ff00;
        -webkit-transform:rotate(60deg);
          -moz-transform:rotate(60deg);
          -o-transform:rotate(60deg);
          transform:rotate(60deg);
          z-index:100;
    }
    #pie3{
        background-color:#0000ff;
        -webkit-transform:rotate(120deg);
          -moz-transform:rotate(120deg);
          -o-transform:rotate(120deg);
          transform:rotate(120deg);
          z-index:100;
    }
    #pie4{
        background-color:#ffff00;
        -webkit-transform:rotate(180deg);
          -moz-transform:rotate(180deg);
          -o-transform:rotate(180deg);
          transform:rotate(180deg);
          z-index:100;
    }
    #pie5{
        background-color:#ff00ff;
        -webkit-transform:rotate(240deg);
          -moz-transform:rotate(240deg);
          -o-transform:rotate(240deg);
          transform:rotate(240deg);
          z-index:100;
    }
    #pie6{
        background-color:orange;
        -webkit-transform:rotate(300deg);
          -moz-transform:rotate(300deg);
          -o-transform:rotate(300deg);
          transform:rotate(300deg);

          z-index:100;
    }
    /
    /*#pie7{
    position:absolute;
        width:50px;
        height:150px;
        background-color:#ff0000;
        z-index:101;
        left:150px;
        -webkit-border-radius: 150px;

    }*/
    .pie{z-index:1;}

    .pie:hover{
        background-color:#000000;

        }
        #idea{-webkit-transform:rotate(20deg);
        position:absolute;
        top:100px;
        left:700px;
        z-index:1000;
        }
</style>
</head>
<body>

<div class="pieContainer">
     <div class="pieBackground"></div>
     <div id="pie1" class="pie"></div>
     <div id="pie2" class="pie"></div>
     <div id="pie3" class="pie"></div>
     <div id="pie4" class="pie"></div>
     <div id="pie5" class="pie"></div>
     <div id="pie6" class="pie"></div>
     <div id="pie7"></div>
</div>
<div id="idea">idea</div>
</body>
</html>

    remove this comment in the beginning of the code: /* -moz-border-radius: 150px; and things will look circular.

    http://jsfiddle.net/KzG2Z/ : square one

    http://jsfiddle.net/KzG2Z/1/ : circular one

    If you can use there are pretty cool JS solutions that you can use.

    http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart

    http://g.raphaeljs.com/

    In the end what you have tried to do is sort of close circuit design, it closes. (couldn’t help myself) (circuit was redundant)

    Also there are some issues, if you want to dynamically do this, you are cornered even before you tackle that because you aren’t using JS | jQuery, if you have been, there are APIs… you know. (again)

    • 0