JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<ul class="ag-chapters">
  <li>
    <a href="#">
      <div class="chart" data-progress="100"></div>
      <div class="chapterinfo">
        <h3>ALS005A</h3>
        <p>Confined Space Entry</p>
        <span class="percentage">0%</span>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="chart" data-progress="40"></div>
      <div class="chapterinfo">
        <h3>ALS005A</h3>
        <p>Confined Space Entry</p>
        <span class="percentage">0%</span>
      </div>
      <div class="chapterdata">
        <h3>Section Data</h3>
        <p>Pages Completed</p>
        <span class="percentage">0%</span>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="chart" data-progress="30"></div>
      <div class="chapterinfo">
        <h3>ALS005A</h3>
        <p>Confined Space Entry</p>
        <span class="percentage">0%</span>
      </div>
    </a>
  </li>
</ul>

CSS

ul.ag-chapters{
  list-style:none;
  padding:0px;
  margin:0px;
  font-family:helvetica;
 
}
ul.ag-chapters li div.chapterinfo{
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  overflow:hidden;
  z-index:99;
}
ul.ag-chapters li div.chapterinfo h3{
 margin:0px;
 font-size:13px;
 text-align:center;
 margin-top:4px;
 word-break: break-all;
 color:#555;
}
ul.ag-chapters li div.chapterinfo p{
  margin:0px;
  margin-top:4px;
font-size:11px;
 word-break: break-all;
 text-align:center;
}
ul.ag-chapters li div.chapterinfo>span{
  position:absolute;
  left:0px;
  right:0px;
  display:block;
  text-align:center;
  bottom:13px;
  font-size:11px;
  color:#555;
}
ul.ag-chapters li div.chapterinfo>span:empty{
  display:block;
  position:absollute;
  left:50%;
  bottom:-5px;
  margin-left: -21px;
  transform:scale(0.67);
 ...

JavaScript

function drawCharts(){

	var chapters = document.querySelectorAll('ul.ag-chapters li div.chart');
  
  console.log(chapters);
  
  
  chapters.forEach(function(item) {
  
    var perc = parseInt(item.getAttribute('data-progress'));
  
  	var plabel = item.parentElement.querySelector('span.percentage');
    
    plabel.innerText = perc + '%';
    
    if(perc == 100){
    
    	plabel.innerHTML = '';
    
    }
    
    drawChart(item,perc);
    
  });

}
      function drawChart(container,percentage) {
      
      	google.charts.load("current", {packages:["corechart"]});
				google.charts.setOnLoadCallback(draw);
        
        function draw(){
        
        	console.log("DRAWING");

          var data = google.visualization.arrayToDataTable([
            ['Progress', 'Percentage'],
            ['Completed', percentage/2],
            ['All',  100-percentage/2]
          ]);

          var options = {
            backgroundColor: 'transparent',
            width: 110,
            height: 110,
            pieHole: 0.4,
            slices: {
              0: { color: '#389845' },
              1: { color: '#cccccc' }
            },
            pieSliceTextStyle: {
              color: 'transparent',
            },
            legend: 'none',
            tooltip: {
              trigger: 'none'
            },
            animation:{
              duration: 1000,
              easing: 'out',
            }
          };


          var chart = new google.visualization.PieChart(container);
          chart.draw(data, options);
          
          }
      }
      
 drawCharts();