JSFiddle - React, Tailwind, and code Playground

by kmburke84

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/excanvas.js"></script>
<script src="ttps://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/excanvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.colorhelpers.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.colorhelpers.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.categories.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.crosshair.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.errorbars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.fillbetween.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.image.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.navigate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.resize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.selection.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>
<table id="AvgWorkloadtbl" class="col-md-3 col-lg-2">
    <caption>Total PE Average Workload</caption>
    <thead>
        <tr>
            <th valign="top">
                <table id="workloadweeks" class="display table workloadweeks">
                    <caption>Job Week</caption>
                </table>
            </th>

            <th valign="top">
                <table id="workloadAvg1" class="display table">
                    <caption>Weekly Average</caption>
                </table>
           ...

CSS

body {
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #222;
    width: 100%;
    font-family: montserrat;
}

    /* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
    body.loading {
        overflow: hidden;
    }

        /* Anytime the body has the loading class, our
modal element will be visible */
        body.loading .waitModal {
            display: block;
        }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: montserrat;
    font-weight: bold;
    line-height: 1.1;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
    text-align: center;
}

tfoot {
    display: table-header-group;
}

td {
    padding-bottom: 0;
    padding-right: 0;
    white-space: nowrap;
}

tr {
    text-align: center;
}

th {
    text-align: center;
}

table.dataTable tbody th, table.dataTable tbody td {
    padding: 0;
}

ul.ColVis_collection li {
    position: relative;
    height: auto;
    left: 0;
    right: 0;
    padding: 0;
    display: block;
    float: none;
    margin-bottom: 0;
    -webkit-box-shadow: 1px 1px 3px #999;
}

    ul.ColVis_collection li span {
        font-size: 9px;
    }

button.ColVis_Button {
    height: 30px;
    padding: 3px 8px;
    position: relative;
    left: 20px;
    top: 10px;
}

div.DTTT_container {
    position: relative;
    float: right;
    margin-bottom: 1em;
    top: 10px;
    left: 10px;
}

#formtable {
    line-height: 38px;
}

    #formtable td {
        padding-right: 20px;
    }

#tlbmain td {
    padding-bottom: 0;
    padding-right: 0;
    max-width: 75px;
}

#tblmain_filter {
    display: none;
}

#tblmain {
    background-color: white;
    text-align: center;
    padding-top: 0;
    margin-top: 110px;
    font-family: Arial;
}

#tblmain_info {
    color: white;
    font-weight: bold;
    margin-bottom: 50px;
}


#tblmain th {
    border-top: 1px solid black;
   ...

JavaScript

// Hello.
//
// This is JSHint, a tool that helps to detect errors and potential
// problems in your JavaScript code.
//
// To start, simply enter some JavaScript anywhere on this page. Your
// report will appear on the right side.
//
// Additionally, you can toggle specific options in the Configure
// menu.


$(function () {
    var avgfullWorkload = 
"[{\"dump_week\":\"201206\",\"work_week\":\"201206\",\"average_workload\":15},{\"dump_week\":\"201207\",\"work_week\":\"201207\",\"average_workload\":31},{\"dump_week\":\"201201\",\"work_week\":\"201208\",\"average_workload\":23},{\"dump_week\":\"201207\",\"work_week\":\"201209\",\"average_workload\":24}]";
  
    avgFullWorkloadTbl();


    function avgFullWorkloadTbl() {
        var today = new Date();
        var jobweek = [];
        var averageworkload = [];
        var actualworkload = [];
        
        var wrkloadJSON = "";
        var trHTMLworkload = "";

        /* places the parsed JSON and puts them into individual variables to use in the graphs */
        var jsonFullWorkData = JSON.parse(avgfullWorkload);

        /*Loop that passes the JSON strings into seperate arrays for Total Data */
        for (i = 0; i < jsonFullWorkData.length; i++) {
            jobweek[i] = jsonFullWorkData[i].dump_week;
            averageworkload[i] = jsonFullWorkData[i].average_workload;
            actualworkload[i] = jsonFullWorkData[i].actual_workload;
        }
       
        var jobWkIndex = 0;
        var avgWlIndex = 0;
        var actWlIndex = 0;
        var workloadArray = "";
        var workloadArray15 = "";
        var workloadArray16 = "";
        var workloadArray12 = "";
        var workloadArray13 = "";
        var workloadArray14 = "";
        var jobWkArray = [];
        var avgWlArray = [];
        var actWlArray = [];
        var reformedWorkWeek = "";

        $.each(jsonFullWorkData, function (i, item) {
            reformedWorkWeek = "Week "+ item.work_week.substring(4, 7) + " of " +...