Gridster and dygraphs example

Example of using dygraphs together with gridster.

by zerrax

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined-dev.js"></script>
<div class="gridster">
    <ul>
        <li class="widget" data-row="1" data-col="1" data-sizex="2" data-sizey="2">
            <header>|||</header>
            <div class="div_g"></div>
        </li>
        <li class="widget" data-row="1" data-col="1" data-sizex="2" data-sizey="4">
            <header>Header</header>
            <div class="div_g"></div>
        </li>
        <li class="widget" data-row="2" data-col="1" data-sizex="3" data-sizey="3">
            <header>|||</header>
        </li>        
    </ul>
</div>
<!--<div id="div_g" style="width:600px; height:300px;"></div>-->

CSS

/*/
/* gridster
/*/
.gridster {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.gridster * {
  margin:0;
  padding:0;
}

.gridster ul {
    list-style-type: none;
    background-color: #EFEFEF;
}

.gridster li {
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    line-height: 100%;
}


.gridster {
    margin: 0 auto;

    opacity: .8;

    -webkit-transition: opacity .6s;
    -moz-transition: opacity .6s;
    -o-transition: opacity .6s;
    -ms-transition: opacity .6s;
    transition: opacity .6s;
}

.gridster .gs-w {
    background: #DDD;
    cursor: pointer;
}

.gridster .player {
    background: #BBB;
}


.gridster .preview-holder {
    border: none!important;
    background: red!important;
}

.div_g {
    position: absolute;
    top: 35px;
    right: 10px;
    bottom: 10px;
    left: 10px;
}
.div_container {
    position: relative;
    margin-top: 10px;
}

.gridster li header {
    background: #999;
    display: block;
    font-size: 20px;
    line-height: normal;
    padding: 4px 0 6px;
    margin-bottom: 10px;
    height: 20px;
    cursor: move;
}

JavaScript

var gridster;

$(function () {

    function resize(ev, ui, $widget) {
        $('.div_g', $widget).data('graph').resize();
    }
    gridster = $(".gridster ul").gridster({
        widget_base_dimensions: [100, 55],
        //widget_class: ".widget",
        widget_margins: [5, 5],
        helper: 'clone',
        draggable: {
            handle: "header"
        },
        resize: {
            enabled: true,
            stop: resize,
            resize: resize
        }
    }).data('gridster');

});

$(document).ready(function () {
    var data = [];
    var t = new Date();
    for (var i = 10; i >= 0; i--) {
        var x = new Date(t.getTime() - i * 1000);
        data.push([x, Math.random()]);
    }
    $(".div_g").each(function () {
        var g = new Dygraph($(this)[0], data, {
            drawPoints: true,
            //height: Dygraph.DEFAULT_HEIGHT,
            //showRoller: true,
            //valueRange: [0.0, 1.2],
            labels: ['Time', 'Random']
        });
        $(this).data('graph', g);
    });
    // It sucks that these things aren't objects, and we need to store state in window.
    window.intervalId = setInterval(function () {
        data.push([new Date(), Math.random()]);
        $(".div_g").each(function () {
            $(this).data().graph.updateOptions({
                'file': data
            });
        });
    }, 5000);
});