SVG Circle

by AlexJsh02

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<main class="container">
  <div class="row">
    <div class="col-sm-3 col-md-3">

      <div id="status-doughnut" class="center-block">
          <svg width="300" height="250"></svg>
          <h1 align="center">Document Status</h1>
      </div>
      
    </div>
  </div>
</main>

CSS

.center-block {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}


#status-doughnut h1 {
  font-weight: 800;
  font-size: 1.8rem;
  border: 1px solid blue;
  margin: 0;
}

/* have the svg occupy a sizeable portion of the wrapping container */

#status-doughnut {
  border: 1px solid black;
}

#status-doughnut svg {
  border: 1px solid red;
  margin: 0;
  background-color: #ccc;
}

JavaScript

/*
 * jQuery Doughnut Chart Plugin v0.0.1
 *
 * Note: The jQuery plugin's parent element is assumed to be
 *       a div that will act as container for svg
 *       A style sheet is provided as a separate file
*/
;(function($, doc){
  // DOUGHNUT CHART CLASS DEFINITION
  // ======================
  
  var Doughnut = function(element){
  	debugger;
    let el = element.get(0);
  	this.$element = $(el);
    this.$svg = $element.find("svg");
    this.width = parseInt($svg.width());
    this.height = parseInt($svg.height());
    this.title = '';
    this.total = 0;
    this.count = 0;
    this.color = '';
    alert('w:' + this.width + ', h:' + this.height);
  	return this;
  }
  
  // DOUGHNUT CHART PLUGIN DEFINITION
  // ========================
  $.extend($.fn, {
    doughnut: function(option) {
    	debugger;
      if (!this.length) return;
      let $this = $(this);
      let data = $.data($this[0], 'doughnut');
      if (!data) $this.data('doughnut', (data = new Doughnut($this)));
      return data;
    },
  });
})(window.jQuery, document);


let data = [{ title: '', total: 120, count: 80, color: '' }];
$("#status-doughnut").doughnut(data);