Quad Chart Bootstrap Free

A non-bootstrap quad chart

by Shawn Wood

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<ul id="quadSlides" class="quad-list">
  <li>

  </li>
</ul>

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;
  width: 88%;
}

.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: 0px;
  height: 176px;
  width: 176px;
  z-index: 3;
  position: relative;
  top: 652px;
  margin: 0;
  border: 5px solid rgba(255, 255, 255, 0);
  display: inline-block;
}

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

.quad-list li:nth-child(2) .quad .outer-circle .inner-circle .quad-title {
  padding-top: 50px;
}

.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,...

JavaScript

var quadData = {
  "quads": [{
      "poc": {
        "name": "John Doe",
        "phone": "(666) 666-6666",
        "email": "[email protected]"
      },
      "quadTitle": "SWAT",
      "quadTitlePadding": "50px",
      "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",
      "quadTitlePadding": "50px",
      "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" style="padding-top:' + dataSrc.quads[i].quadTitlePadding + '">' +
      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">'...