jQDateRangeSlider (default ctor)

by plotlygraphs

HTML

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderMouseTouch.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderDraggable.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderBar.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderHandle.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderLabel.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQRangeSlider.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQDateRangeSliderHandle.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQDateRangeSlider.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQRuler.js"></script>
<link rel="stylesheet" href="https://ghusse.github.io/jQRangeSlider/stable/css/iThing.css">
<div style="padding:50px 20px; text-align:center;">

    <div id="slider" style="max-width:800px;width:100%;display: block;margin-left:auto; margin-right: auto;"></div>  
    
    <iframe id="plot" width="800" height="700" frameborder="0" seamless="seamless" scrolling="no" src="https://plot.ly/~jackp/3880.embed?width=800&height=700"></iframe>

</div>

JavaScript

$("#slider").dateRangeSlider({
    "bounds": {
        min: new Date(2008, 1, 1),
        max: new Date(2009, 1, 1)
    },
        "defaultValues": {
        min: new Date(2008, 1, 1),
        max: new Date(2009, 1, 1)
    }
});

// Master copy of graph data
var plot = $('#plot')[0].contentWindow;
var x, y, z;

function go() {
    // get current x, y, z data
    plot.postMessage({
        task: 'getAttributes',
        attributes: [
            'data[0].x',
            'data[0].y',
            'data[0].text', ]
    },
        'https://plot.ly/');

    window.addEventListener('message', function (e) {
        var message = e.data;
        x = message.response['data[0].x'];
        y = message.response['data[0].y'];
        z = message.response['data[0].text'];
        console.log(x, y, z);
    });
}

var pinger = setInterval(function () {
    plot.postMessage({
        task: 'ping'
    }, 'https://plot.ly')
}, 100);

window.addEventListener('message', function (e) {
    var message = e.data;
    if (message.pong) {
        console.log('Initial pong, frame is ready to receive');
        clearInterval(pinger);
        go();
        // Listening for zoom events, but you can also listen
        // for click and hover by adding them to the array
        plot.postMessage({
            task: 'listen',
            events: ['zoom']
        }, 'https://plot.ly');
    } else {
        console.log(message);
    }
});

$("#slider").bind("valuesChanged", function (e, data) {
    var min = data.values.min;
    var max = data.values.max;
    var new_x = [];
    var new_y = [];
    var new_z = [];

    for (i = 0; i < z.length; i++) {
        t = (z[i]).split('-')
        d = new Date(t[2], t[0], t[1])
        if (d > min && d < max) {
            console.log('HERE');
            new_x.push(x[i]);
            new_y.push(y[i]);
            new_z.push(z[i]);
        }
    }

    console.log(new_x, new_y, new_z);

    plot.postMessage({
        task: 'restyle',
        update: {
    ...