How to create slices of a multi level pie chart dy

Question

I am working on to show a parent-child-grand child relationship by using a Multi-level pie chart. I have to achieve this by using HTML, CSS3 and pure JavaScript (no jQuery or any library). I am trying to achieve something like what's displayed on this JSFiddle, but I cannot use any third party library.

So far I did this:

.outer-chart{
  position: relative;
  overflow: hidden;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background-color: #33ccff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2);
}
.outer-circle,
.inner-circle {
  position: absolute;
  border-radius: 50%;
}

.outer-circle {
  top: 15%;
  left: 15%;
  right: 15%;
  bottom: 15%;
  background-color: #ccff66;
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.2);
}
.inner-circle {
  top: 30%;
  left: 30%;
  right: 30%;
  bottom: 30%;
  background-color: #ffffff;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2);
}

<div id="outermost" class="outer-chart" >
  <div id="outer" class="outer-circle">
    <div id="inner" class="inner-circle"> </div>
  </div>
</div>

FIDDLE

But I am unable to generate slices like in the above chart. My labels will be dynamic and slices will change as per parent.