JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div>

  <div id="container">

  </div>

  <div style="vertical-align:top">
    <ul>
      <li>
        Infotype
        <ul>
          <li>
            <input type="checkbox" id="infotype" value='S' checked/>
            <label for="infotype">Infotype S</label>
          </li>
          <li>
            <input type="checkbox" id="infotype" value='A' checked/>
            <label for="moreTen">Infotype A</label>
          </li>
        </ul>
      </li>
      <li>
        BU/BD
        <ul>
          <li>
            <input type="checkbox" id="bu" value='srv' checked/>
            <label for="infotype">SRV</label>
          </li>
          <li>
            <input type="checkbox" id="bu" value='mlv' checked/>
            <label for="moreTen">MLV</label>
          </li>
           <li>
            <input type="checkbox" id="bu" value='cbu' checked/>
            <label for="moreTen">CBU</label>
          </li>
           <li>
            <input type="checkbox" id="bu" value='smb' checked/>
            <label for="moreTen">SMB</label>
          </li>
           <li>
            <input type="checkbox" id="bu" value='tx' checked/>
            <label for="moreTen">Tx</label>
          </li>
           <li>
            <input type="checkbox" id="bu" value='hw' checked/>
            <label for="moreTen">Hw</label>
          </li>
        </ul>
      </li>

    </ul>

  </div>

</div>

CSS

div {
  display: inline-block;
}

JavaScript

var jsonfile = [
    ["2", "6\/16\/2017", "ConditionalGo", "S", "SRV"],
    ["5", "6\/16\/2017", "GoProject", "S", "MLV"],
    ["7", "6\/16\/2017", "NoGoNow", "S", "CBU"],
    ["4", "", "idea", "S", "SMB"],
    ["9", "6\/16\/2017", "NoGO", "S", "CBU"],
    ["6", "6\/29\/2017", "ConditionalGo", "S", "MLV"],
    ["1", "6\/16\/2017", "GoProject", "A", "Tx"],
    ["12", "6\/29\/2017", "GoProject", "S", "Tx"],
    ["8", "", "idea", "S", "CBD"],
    ["11", "29\/8\/17 9:00", "GoProject", "S", "SMB"],
    ["10", "", "idea", "S", "Tx"],
    ["13", "29\/8\/17 9:30", "GoProject", "S", "SMB"],
    ["6", "6\/29\/2017", "ConditionalGo", "A", "MLV"],
    ["6", "6\/29\/2017", "ConditionalGo", "A", "MLV"],
    ["6", "6\/29\/2017", "ConditionalGo", "A", "MLV"],
    ["15", "29\/8\/17 10:00", "NoGoNow", "S", "MLV"],
    ["14", "29\/8\/17 10:30", "Closed", "S", "SRV"],
    ["24", "29\/8\/17 11:00", "NoGoNow", "S", "SRV"],
    ["9", "6\/16\/2017", "NoGO", "A", "CBU"],
    ["17", "29\/8\/17 11:30", "NoGo", "S", "CBD"],
    ["20", "29\/8\/17 12:00", "GoProject", "S", "MLV"],
    ["11", "29\/8\/17 9:00", "GoProject", "A", "SMB"],
    ["22", "31\/8\/17 14:00", "GoProject", "S", "CBU"],
    ["17", "", "idea", "S", "Tx"],
    ["13", "29\/8\/17 9:30", "GoProject", "A", "SMB"],
    ["23", "31\/8\/17 14:30", "GoProject", "S", "Tx"],
    ["14", "29\/8\/17 10:30", "NoGoNow", "A", "SRV"],
    ["14", "29\/8\/17 10:30", "NoGoNow", "A", "SRV"],
    ["19", "", "idea", "S", "MLV"],
    ["15", "29\/8\/17 10:00", "NoGoNow", "A", "MLV"],
    ["16", "31\/8\/17 16:00", "ConditionalGo", "A", "MLV"],
    ["16", "31\/8\/17 16:00", "ConditionalGo", "S", "CBU"],
    ["21", "", "idea", "S", "SRV"],
    ["18", "31\/8\/17 16:30", "NoGo", "S", "HW"],
    ["27", "9\/29\/2017", "ConditionalGo", "S", "CBU"],
    ["18", "31\/8\/17 16:30", "NoGo", "A", "HW"],
    ["28", "9\/29\/2017", "GoProject", "S", "CBU"],
    ["29", "9\/29\/2017", "GoProject", "S", "CBU"],
    ["26", "", "idea", "S", "Tx"],
    ["3", "11\/8\/2017",...