JQGrid Search - Report Parameters - Date Range - Dynamic Month List Horizontally

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/redmond/jquery-ui.css">
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="http://www.trirand.net/aspnetmvc/Scripts/trirand/i18n/grid.locale-en.js"></script>
<script src="http://www.trirand.net/aspnetmvc/Scripts/trirand/jquery.jqGrid.min.js"></script>
<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.crosshair.js"></script>
<div class="page">
    <div class="description">
        <h2>jqGrid and Flot</h2>
        <dl>
            <dt><a href="http://www.trirand.com/blog/" class="plugin-link">jqGrid</a></dt>
            <dd>jqGrid is an AJAX-enabled jQuery plugin 
                that provides a solution for representing tabular data on the web. 
                Since the grid is a client-side solution and loading data dynamically 
                through AJAX callbacks, it can be integrated with any server side technology.
                All data in this demo is generated client-side however, in order to keep
                the demonstration simple.</dd>
            <dt><a href="http://code.google.com/p/flot/" class="plugin-link">Flot</a></dt> 
            <dd>Flot is a pure JavaScript plotting library for jQuery. 
                It produces graphical plots of arbitrary datasets on-the-fly client-side. The plugin
                utilises the HTML 5 canvas element that allows for dynamic scriptable rendering of 
                bitmap images. Since Internet Explorer does not support the canvas element, the excanvas
                project emulates functionality in Internet Explorer by mapping methods used to 
                manipulate the canvas element to output VML that is inserted into the DOM. The end
                result is similar in appearance, although slower in exection speed.</dd>
        </dl>
    </div>
    <form id="dates">
      ...

CSS

html {
    overflow-y:scroll;
}

body {
    font-size: 11px;
    font-family:Lucida Grande,Lucida Sans,Arial,sans-serif;
    margin: 0;
    
}

h1 { 
    display:inline; 
    margin: 0 0 0 6px; 
    position:relative; 
    padding-bottom: 18px;
    color: #fff;
}

h2 {
    
}

h3 {
    
}

h4 { 
    margin: 0 0 6px 0; 
}

div.page {
    margin: 0 auto;
    width: 930px;
    position: relative;
}

div.description {
    margin-bottom: 24px;
}

div.placeholder {
    width:800px;
    height:400px;
    float:left;
    position:relative;
    margin-bottom: 180px;
}

form {
    width: 300px;
    /* font-family:Lucida Grande,Lucida Sans,Arial,sans-serif; */
}

form input {
    margin: 5px 0;
}

fieldset {
    border: 1px solid #ccc;
    margin-bottom: 10px; 
}

legend {
    font-weight: bold;
    font-size: 1.1em;
}

form label {
    display: block;
    width: 60px;
    text-align: right;
    float: left;
    padding-right: 10px;
    margin: 5px 0;
    font-size: 1em;
}

input.text , textarea.text {
    padding: 0 0 0 3px;
    width: 172px;
    border: 1px solid #999999;
}


input.submit {
    margin: 15px 0 10px 70px;
    background-color: #ECE9D8;
    border: 1px solid #999999;
    font-weight: bold;
    font-size: 1.2em;
}

.russ-highlight { background-color: red !important; color: white !important; }

a.plugin-link {
    text-decoration : none;
    color: #5C9CCC;
    font-size: 1.5em;
    font-weight: bold;
}

a.plugin-link:hover {
    text-decoration : underline;
}

span.title { margin: 0.4em; }


/* Specific Sections */
/* ----------------- */

/* Main Page */
#header { 
    background:#1484E6 url(redmond/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) repeat scroll 50% 50%; 
    height: 60px;
    /* padding-bottom: 10px; */ 
}

#title {
    background:#1484E6 url(redmond/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) repeat scroll 50% 50%; 
    height: 60px;
    margin: 0 auto;
    width: 930px;
}

#menu {
    margin:2px auto 2px auto;
    width: 299px;
   ...

JavaScript

// initially hide the graph
$('#graph').hide();
$('#dates').submit(function(e) {
    e.preventDefault();
});

var headers = ['Year', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    model = headerModel(headers),
    plot = null,
    grid = $("#jqgrid");


// -------------------------------------
// Generates the column model for jqGrid
// -------------------------------------

function headerModel(headers) {
    var model = [],
        len = headers.length;

    function headerObject(name, width) {
        this.name = name;
        this.index = name;
        this.width = width;
        this.sorttype = "int";
        this.align = 'left';
    }

    for (var i = 0; i < len; i++) {
        var width = /0|[3-7]/.test(i) ? 50 : /9|[1[0-3]]/.test(i) ? 90 : 70;
        model.push(new headerObject(headers[i], width));
    }
    return model;
}


// ------------------
// Initialize jqGrid
// -----------------
grid.jqGrid({
    datatype: "clientSide",
    height: 190,
    colNames: headers,
    colModel: model,
    multiselect: true,
    pager: '#pager',
    pgbuttons: false,
    pginput: false,
    caption: "Random Data",
    deselectAfterSort: false,
    width: 930
}).jqGrid('navGrid', '#pager', {
    add: false,
    edit: false,
    del: false,
    search: false,
    refresh: false
}).jqGrid('navButtonAdd', '#pager', {
    caption: " Generate Graph ",
    buttonicon: "ui-icon-bookmark",
    onClickButton: genGraph,
    position: "last"
});

// ---------------------------------------
// Click handler for Generate Graph button
// ---------------------------------------
$('#genTable').click(function() {

    var start = $('#start').val(),
        end = $('#end').val(),
        num = (+end + 1) - start;

    var validation = validateInput(start, end);

    if (validation.isValid) {

        var mydata = genArray(start, num);

        grid.jqGrid('clearGridData');

        for (var i = 0; i <=...