BS3 Quad Chart

by Shawn Wood

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/svg-with-js.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <ul id="quadSlides" class="quad-list">
        <li>

        </li>
      </ul>
    </div>
  </div>
</div>

CSS

.quad .quad-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.quad .quad-section {
  padding-right: 0px;
  padding-left: 0px;
  float: left;
  width: 50%;
}

.quad .quad-header {
  padding-right: 0px;
  padding-left: 0px;
  float: left;
  width: 100%;
}

.quad-top-content {
  background-color: #2e2e2e;
  color: #FFFFFF;
  border-radius: 30px 30px 0px 0px;
  height: 80px;
  padding: 0px 0px 5px 5px;
  border: 5px solid rgba(255, 255, 255, 0);
}


.quad-top-content::before {
  content: "Point of Contact";
  float: left;
  display: inline-block;
  height: 80px;
  font-weight: bold;
  font-size: 1.5em;
  padding: 10px 15px 0px 10px;
}

.quad-list {
  padding-left: 0;
  list-style: none;
}

.quad .outer-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  padding: 0;
  position: relative;
  margin-top: -180px;
}

.quad .inner-circle {
  background-color: #999999;
  border-radius: 100px 100px 100px 100px;
  padding-top: 50px;
  height: 180px;
  width: 180px;
  z-index: 3;
  position: relative;
  top: 590px;
  margin: 0;
  border: 5px solid rgba(255, 255, 255, 0);
  display: inline-block;
}

.quad .inner-circle .quad-title {
  text-align: center;
  font-weight: bold;
}

.quad .quad-section .quad-title {
  font-weight: bold;
}

.quad-bottom-left {
  background-color: #EFEFEF;
  border-radius: 0px 0px 0px 30px;
  height: 400px;
  padding: 15px 30px 30px 15px; /* (top, right, bottom, and left) */
}

.quad-top-left {
  background-color: #CECECE;
  border-radius: 0px 0px 0px 0px;
  height: 400px;
  padding: 15px 30px 30px 15px; /* (top, right, bottom, and left) */
}

.quad-bottom-right {
  background-color: #DCDCDC;
  border-radius: 0px 0px 30px 0px;
  height: 400px;
  padding: 15px 30px 30px 100px; /* (top, right, bottom, and left) */
}

.quad-top-right {
  background-color: #AFAFAF;
  border-radius: 0px 0px 0px 0px;
  height: 400px;
  padding: 15px...

JavaScript

var quadData = {
  "quads": [{
      "poc": {
        "name": "John Doe",
        "phone": "(666) 666-6666",
        "email": "[email protected]"
      },
      "quadTitle": "SWAT",
      "leftTopTitle": "Strength",
      "leftTopContent": "Things your company does well.",
      "rightTopTitle": "Weaknesses",
      "rightTopContent": "Things your company lacks.",
      "leftBottomTitle": "Opportunities",
      "leftBottomContent": "Underserved markets for specific products",
      "rightBottomTitle": "Threats",
      "rightBottomContent": "Emerging competitors.",
    },
    {
      "poc": {
        "name": "Happy Madison",
        "phone": "(888) 888-8888",
        "email": "[email protected]"
      },
      "quadTitle": "SWAT",
      "leftTopTitle": "Strength",
      "leftTopContent": "Qualities that separate you from your competitors.",
      "rightTopTitle": "Weaknesses",
      "rightTopContent": "Things your competitors do better than you.",
      "leftBottomTitle": "Opportunities",
      "leftBottomContent": "Few competitors in your area.",
      "rightBottomTitle": "Threats",
      "rightBottomContent": "Changing regulatory environment.",
    }
  ]
};

var buildQuadCharts = function (dataSrc) {
    if (typeof dataSrc === 'undefined' || dataSrc === null) {
        dataSrc = { "quads": [] };
    }
    let quadCharts = '';
    for (let i = 0; i < dataSrc.quads.length; i++) {
        quadCharts += '<li><div class="container-quad quad">'
            + '<div class=" outer-circle">'
            + '<div class="inner-circle">'
            + '<h3 class="quad-title">'
            + dataSrc.quads[i].quadTitle
            + '</h3>'
            + '</div>'
            + '</div>'
            + '<div class="quad-row">'
            + '<div class="quad-header">'
            + '<div class="outer ">'
            + '<div class="inner ">'
            + '<div class="quad-top-content">'
            + '<ul class="quad-list">'
            + '<li><strong>' +...