Chart.js Pie chart demo

Simple pie chart demo implementation.

by Rakesh Vadnal

HTML

<link rel="stylesheet" href="https://getbootstrap.com/docs/4.4/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<section id="skills" class="profile-skills section doughnut-container">
            <div class="container">
              <div class="row">
                <div class="col-container w-100 text-center">
                  <div class="doughnut-col">
                    <div id="canvas-holder1" class="doughnut">
                      <canvas id="chart-area-1" width="100" height="100" class="donutChartDiv" data-values="60,40"></canvas>
                      <div class="position-absolute text-center doughnut-desc w-100 h-100">
                        <div class="doughnut-cont">
                          <h3>Team Management</h3>
                          <p class="mb-0">
                            <span class="count">28</span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="doughnut-col">
                    <div id="canvas-holder2" class="doughnut">
                      <canvas id="chart-area-2" width="100" height="100" class="donutChartDiv" data-values="70,40"></canvas>
                      <div class="position-absolute text-center doughnut-desc w-100 h-100">
                        <div class="doughnut-cont">
                          <h3>Sales</h3>
                          <p class="mb-0">
                            <span class="count">36</span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                
                  
                 
                 
                </div>
              </div>
            </div>
          </section>

CSS

.doughnut .doughnut-desc{left:0; top:0; padding:10px 0 0;}
.doughnut .doughnut-desc h3{font-size:15px; color:#474650; line-height:15px; margin-bottom:10px;}
.doughnut .doughnut-cont{position: relative; top: 50%; transform: translateY(-50%); max-width:125px; margin:0 auto; white-space:normal;}
.doughnut .doughnut-cont .count{font-size:13px; font-weight:700; color:#979cab;}
.doughnut-container .col-container{white-space:nowrap; overflow-x:auto; padding-bottom:15px;}
.doughnut-container .doughnut-col{position:relative; max-width:165px; width:165px; padding:0 5px; display:inline-block;}

JavaScript

//Pie Chart
var randomScalingFactor = function() {
  return Math.round(Math.random() * 100);
};
donutChartJson = [
  {"data":"[60,40]","div":"chart-area-1"},
  {"data":"[50,50]","div":"chart-area-2"},
  {"data":"[35,65]","div":"chart-area-3"},
  {"data":"[35,65]","div":"chart-area-4"},
  {"data":"[35,65]","div":"chart-area-5"},
  {"data":"[85,15]","div":"chart-area-6"}
];
window.chartColors = {
  red: '#495062',
  orange: '#FFFFFF',
};
var donutChartConfig = {
  type: 'doughnut',
  data: {
    datasets: [{
      data:[40,60],
      backgroundColor: [
        window.chartColors.red,
        window.chartColors.orange,
      ],
      hoverBackgroundColor: [
        window.chartColors.red,
        window.chartColors.orange,
      ],
      hoverBorderColor: [
        window.chartColors.red,
        window.chartColors.orange,
      ],
      borderWidth: 0,
    },
    ],

  },
  options: {
    responsive: true,
    maintainAspectRatio: true,
    text: 'Desktop',
    tooltips: false,
    cutoutPercentage:90,
    animation: {
      animateRotate: true
    },

  }
};

function loadDonutChart(){
  /* $.each(donutChartJson, function(i,v){
    var chartDiv = document.getElementById(v.div).getContext('2d');
    donutChartConfig.data.datasets[0].data = $.parseJSON(v.data);
    donut = new Chart(chartDiv, donutChartConfig);
  } ); */
  $.each($('.donutChartDiv'), function(i,v){
  	var ele = $(v);
    var val = ele.attr('data-values');
    var data = [];
    val = val.split(',');
    $.each(val, function(ii,vv){
    	data.push(parseInt($.trim(vv)));
    });
    var chartDiv = document.getElementById(ele.attr('id')).getContext('2d');
    donutChartConfig.data.datasets[0].data = data;
    /* donutChartConfig.data.datasets[0].data = $.parseJSON(data); */
    donut = new Chart(chartDiv, donutChartConfig);
  } );
}
/* loadDonutChart(); */
  if($('.doughnut-container').length>0){
  loadDonutChart();
  }