Two jquery pie charts same page-CodePudding

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 >
      
    </div>
    <ul >
      <li>
        <em>Unsheltered</em>
        <span>514</span>
      </li>
      <li>
        <em>Sheltered</em>
        <span>410</span>
      </li>
    </ul>
  </section>

<section>
    <div >
      
    </div>
    <ul >
      <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");

CodePudding user response：

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 ></div>
  <ul >
    <li><em>Unsheltered</em><span>514</span></li>
    <li><em>Sheltered</em><span>410</span></li>
  </ul>
</section>

<section>
  <div ></div>
  <ul >
    <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>