JSFiddle - React, Tailwind, and code Playground

by cstepaniuk

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.navigate.min.js"></script>
<div id="placeholder"></div>
<br />
<input type="button" id="btnPanStart" value="Pan to start" />
<input type="button" id="btnPanLeft" value="Pan left" />
<input type="text" id=tbxPan value="200" maxlength="4" style="width: 70px;" />
<input type="button" id="btnPanRight" value="Pan right" />
<input type="button" id="btnPanEnd" value="Pan to end" />

CSS

#placeholder {
    height: 300px;
}

JavaScript

$(function() {

    var sin = [];
    for (var i = 0; i <= 50; i++) {
        sin.push([i, Math.sin(i)]);
    }

    var plot = $.plot("#placeholder", [{
        data: sin,
        label: "sin(x)",
        color: 'red',
        points: {
            show: false,
        },
        lines: {
            show: true,
            lineWidth: 5
        }
    }, {
        data: sin,
        color: 'white',
        points: {
            show: true,
            lineWidth: 2,
            radius: 5,
            fill: true,
            fillColor: 'red'
        },
        lines: {
            show: false
        }
    }], {
        pan: {
            interactive: true,
            cursor: 'move'
        },
        grid: {
            hoverable: true,
            autoHighlight: true
        },
        yaxis: {
            min: -1.2,
            max: 1.2
        },
        xaxis: {
            panRange: [0, 50],
            min: 0,
            max: 20
        }
    });

    $('#btnPanStart').on('click', function() {
        var axis = plot.getAxes().xaxis;
        var amount = Math.abs(axis.datamax - axis.datamin)*axis.scale;
        if ($.isNumeric(amount)) {
            plot.pan({
                left: -amount
            });
        }
    });
    
    $('#btnPanLeft').on('click', function() {
        var amount = $('#tbxPan').val();
        if ($.isNumeric(amount)) {
            plot.pan({
                left: -amount
            });
        }
    });
    
    $('#btnPanRight').on('click', function() {
        var amount = $('#tbxPan').val();
        if ($.isNumeric(amount)) {
            plot.pan({
                left: amount
            });
        }
    });

    $('#btnPanEnd').on('click', function() {
        var axis = plot.getAxes().xaxis;
        var amount =  Math.abs(axis.datamax - axis.datamin)*axis.scale;
        if ($.isNumeric(amount)) {
            plot.pan({
                left: amount
            });
        }
    });
    
});