Two jquery pie charts same page

Question

I have two adjustable jquery pie charts on the same page. I added PieID2 to create the second chart, but the first chart isn't completing the 360 degree circle now. Can anyone assist? I'm not sure what I need to change or add to get multiple pie charts on the same page and have all charts functioning properly.

https://codepen.io/Goatsy/pen/abYJQzE

<section>
    <div class="pieID pie">
      
    </div>
    <ul class="pieID legend">
      <li>
        <em>Unsheltered</em>
        <span>514</span>
      </li>
      <li>
        <em>Sheltered</em>
        <span>410</span>
      </li>
    </ul>
  </section>

<section>
    <div class="pieID2 pie">
      
    </div>
    <ul class="pieID2 legend">
      <li>
        <em>Adults (25-60)</em>
        <span>304</span>
      </li>
      <li>
        <em>Youth (18-24)</em>
        <span>87</span>
      </li>
      <li>
        <em>Seniors</em>
        <span>35</span>
      </li>
      <li>
        <em>Children</em>
        <span>4</span>
      </li>
      <li>
        <em>Unknown</em>
        <span>81</span>
      </li>
    </ul>
</section>

JS:

function sliceSize(dataNum, dataTotal) {
  return (dataNum / dataTotal) * 360;
}
function addSlice(sliceSize, pieElement, offset, sliceID, color) {
  $(pieElement).append("<div class='slice "+sliceID+"'><span></span></div>");
  var offset = offset - 1;
  var sizeRotation = -179 + sliceSize;
  $("."+sliceID).css({
    "transform": "rotate("+offset+"deg) translate3d(0,0,0)"
  });
  $("."+sliceID+" span").css({
    "transform"       : "rotate("+sizeRotation+"deg) translate3d(0,0,0)",
    "background-color": color
  });
}
function iterateSlices(sliceSize, pieElement, offset, dataCount, sliceCount, color) {
  var sliceID = "s"+dataCount+"-"+sliceCount;
  var maxSize = 179;
  if(sliceSize<=maxSize) {
    addSlice(sliceSize, pieElement, offset, sliceID, color);
  } else {
    addSlice(maxSize, pieElement, offset, sliceID, color);
    iterateSlices(sliceSize-maxSize, pieElement, offset+maxSize, dataCount, sliceCount+1, color);
  }
}
function createPie(dataElement, pieElement) {
  var listData = [];
  $(dataElement+" span").each(function() {
    listData.push(Number($(this).html()));
  });
  var listTotal = 0;
  for(var i=0; i<listData.length; i++) {
    listTotal += listData[i];
  }
  var offset = 0;
  var color = [
    "#182a54", 
    "#025971", 
    "#ecaa20", 
    "#5a622b", 
    "#82332e", 
    "purple", 
    "turquoise", 
    "forestgreen", 
    "navy", 
    "gray"
  ];
  for(var i=0; i<listData.length; i++) {
    var size = sliceSize(listData[i], listTotal);
    iterateSlices(size, pieElement, offset, i, 0, color[i]);
    $(dataElement+" li:nth-child("+(i+1)+")").css("border-color", color[i]);
    offset += size;
  }
}
createPie(".pieID.legend", ".pieID.pie");
createPie(".pieID2.legend", ".pieID2.pie");

Answer 1

The data from 1st class overrides the data from 1st pie since they both are asigned same slice class in function addSlice

To Avoid this you need to modify 2 things in function addSlice

• Change $("."+sliceID).css to $(pieElement + " ."+sliceID).css
• Change $("."+sliceID+" span").css to $(pieElement + " ."+sliceID+" span").css

 function sliceSize(dataNum, dataTotal) { return (dataNum / dataTotal) * 360; } function addSlice(sliceSize, pieElement, offset, sliceID, color) { $(pieElement).append("<div class='slice "+sliceID+"'><span></span></div>"); var offset = offset - 1; var sizeRotation = -179 + sliceSize; $(pieElement + " ."+sliceID).css({ "transform": "rotate("+offset+"deg) translate3d(0,0,0)" }); $(pieElement + " ."+sliceID+" span").css({ "transform" : "rotate("+sizeRotation+"deg) translate3d(0,0,0)", "background-color": color }); } function iterateSlices(sliceSize, pieElement, offset, dataCount, sliceCount, color) { var sliceID = "s"+dataCount+"-"+sliceCount; var maxSize = 179; if(sliceSize<=maxSize) { addSlice(sliceSize, pieElement, offset, sliceID, color); } else { addSlice(maxSize, pieElement, offset, sliceID, color); iterateSlices(sliceSize-maxSize, pieElement, offset+maxSize, dataCount, sliceCount+1, color); } } function createPie(dataElement, pieElement) { var listData = []; $(dataElement+" span").each(function() { listData.push(Number($(this).html())); }); var listTotal = 0; for(var i=0; i<listData.length; i++) { listTotal += listData[i]; } var offset = 0; var color = [ "#182a54", "#025971", "#ecaa20", "#5a622b", "#82332e", "purple", "turquoise", "forestgreen", "navy", "gray" ]; for(var i=0; i<listData.length; i++) { var size = sliceSize(listData[i], listTotal); iterateSlices(size, pieElement, offset, i, 0, color[i]); $(dataElement+" li:nth-child("+(i+1)+")").css("border-color", color[i]); offset += size; } } createPie(".pieID.legend", ".pieID.pie"); createPie(".pieID2.legend", ".pieID2.pie");

 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); @keyframes bake-pie { from { transform: rotate(0deg) translate3d(0,0,0); } } body { font-family: "Open Sans", Arial; background: #EEE; } main { width: 400px; margin: 30px auto; } section { margin-top: 30px; } .pieID { display: inline-block; vertical-align: top; } .pieID2 { display: inline-block; vertical-align: top; } .pie { height: 200px; width: 200px; position: relative; margin: 0 30px 30px 0; } .pie::before { content: ""; display: block; position: absolute; z-index: 1; width: 100px; height: 100px; background: #EEE; border-radius: 50%; top: 50px; left: 50px; } .pie::after { content: ""; display: block; width: 120px; height: 2px; background: rgba(0,0,0,0.1); border-radius: 50%; box-shadow: 0 0 3px 4px rgba(0,0,0,0.1); margin: 220px auto; } .slice { position: absolute; width: 200px; height: 200px; clip: rect(0px, 200px, 200px, 100px); animation: bake-pie 1s; } .slice span { display: block; position: absolute; top: 0; left: 0; background-color: black; width: 200px; height: 200px; border-radius: 50%; clip: rect(0px, 200px, 200px, 100px); } .legend { list-style-type: none; padding: 0; margin: 0; background: #FFF; padding: 15px; font-size: 13px; box-shadow: 1px 1px 0 #DDD, 2px 2px 0 #BBB; } .legend li { width: 110px; height: 1.25em; margin-bottom: 0.7em; padding-left: 0.5em; border-left: 1.25em solid black; } .legend em { font-style: normal; } .legend span { float: right; } footer { position: fixed; bottom: 0; right: 0; font-size: 13px; background: #DDD; padding: 5px 10px; margin: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section> <div class="pieID pie"></div> <ul class="pieID legend"> <li><em>Unsheltered</em><span>514</span></li> <li><em>Sheltered</em><span>410</span></li> </ul> </section> <section> <div class="pieID2 pie"></div> <ul class="pieID2 legend"> <li><em>Adults (25-60)</em><span>304</span></li> <li><em>Youth (18-24)</em><span>87</span></li> <li><em>Seniors</em><span>35</span></li> <li><em>Children</em><span>4</span></li> <li><em>Unknown</em><span>81</span></li> </ul> </section>