FLOT multiple Lines

by kmburke84

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
@{
    ViewBag.Title = "P&E Scoreboard Average Workload Page";
}

@section scripts {
    @Scripts.Render("~/bundles/flot")
}

<table id="AvgWorkloadtbl" class="col-md-3 col-lg-2">
    <caption>Total P&E 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>
            </th>
            <th valign="top">
                <table id="workloadAct1" class="display table">
                    <caption>Weekly Actual</caption>
                </table>
            </th>

        </tr>
    </thead>
</table>

<div class="clearfix"></div>

<!--  Where the graphs will be displayed  -->
<div id="AvgWorkloadGraph1">
    <p>Total Average Workload</p>
    <div class="demo-container">
        <p id="choices" style="float:right; width:135px;"></p>
        <div id="placeholder" style="width:800px;height:425px"></div>
    </div>
</div>

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

$(function () {
    var jsonFullWorkData = [{"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},{"dump_week":"201207","work_week":"201306","average_workload":30},{"dump_week":"201207","work_week":"201307","average_workload":45},{"dump_week":"201207","work_week":"201408","average_workload":38},{"dump_week":"201207","work_week":"201409","average_workload":52},{"dump_week":"201207","work_week":"201510","average_workload":62},{"dump_week":"201207","work_week":"201508","average_workload":22},{"dump_week":"201207","work_week":"201604","average_workload":58},{"dump_week":"201207","work_week":"201715","average_workload":11}];

    
    avgFullWorkloadTbl();


    function avgFullWorkloadTbl() {
        var today = new Date();
        var jobweek = [];
        var averageworkload = [];
        var actualworkload = [];
        var all_yrs = [];
        var wrkloadJSON = "";
        var trHTMLworkload = "";
        var data, data1, options, chart;
				
        /* places the parsed JSON and puts them into individual variables to use in the graphs */
        var avgfullWorkload = jsonFullWorkData;

        /*Loop that passes the JSON strings into seperate arrays for Total Data */
        for (i = 0; i < jsonFullWorkData.length; i++) {
            jobweek[i] = jsonFullWorkData[i].work_week;
            averageworkload[i] = jsonFullWorkData[i].average_workload;
            actualworkload[i] = jsonFullWorkData[i].actual_workload;
        }
       
        for (i = 0; i < jsonFullWorkData.length; i++) {
            all_yrs.push((jobweek[i].substring(0, 4)));
        }

       var uq_yrs = unique(all_yrs);
       var uq_sr_yrs = uq_yrs.sort();
       var workloadArray = new Array();

        for (var i = 0; i < uq_sr_yrs.length; i++) {
            workloadArray[i] = new...