JSFiddle - React, Tailwind, and code Playground

by Mark

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>
            <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">
        <fieldset>
            <legend>Years to Include</legend>
            <label for="start">Start Year</label>
            <input type="text" class="text" id="start" />
            
            <label for="end">End Year</label>
            <input type="text" class="text" id="end" />
            <input id="genTable" class="submit" type="submit" value="Get Data" />
        </fieldset>
    </form>
    
    <table id="jqgrid"></table>
    <div...

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 <=...