FLOT multiple Lines

by kmburke84

HTML

<script src="http://www.flotcharts.org/flot/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>


<table id="indAvgPichla" class="col-md-3 col-lg-2">
    <caption>Pichla Average Workload</caption>
    <thead>
        <tr>
            <th valign="top">
                <table id="pichlaworkloadweeks" class="display table workloadweeks">
                    <caption>Job Week</caption>
                </table>
            </th>

            <th valign="top">
                <table id="pichlaworkloadAvg" class="display table">
                    <caption>Weekly Average</caption>
                </table>
            </th>
            <th valign="top">
                <table id="pichlaworkloadAct" class="display table">
                    <caption>Weekly Actual</caption>
                </table>
            </th>
        </tr>
</table>

<table id="indAvgTamma" class="col-md-3 col-lg-2">
    <caption>Tamma Average Workload</caption>
    <thead>
        <tr>
            <th valign="top">
                <table id="tammaworkloadweeks" class="display table workloadweeks">
                    <caption>Job Week</caption>
               ...

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 jsonFullWorkData = avgfullWorkload;

        /*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...