JSFiddle - React, Tailwind, and code Playground

by lem9

HTML

<script src="https://bitbucket.org/cleonello/jqplot/raw/35a16c08f4c7/src/jquery.jqplot.js"></script>
<link rel="stylesheet" href="https://bitbucket.org/cleonello/jqplot/raw/35a16c08f4c7/src/jquery.jqplot.css">
<script src="https://bitbucket.org/cleonello/jqplot/raw/35a16c08f4c7/src/plugins/jqplot.dateAxisRenderer.js"></script>
<div id="chartdiv" style="height:400px;width:400px; "></div>

JavaScript

var time_diff = new Array();
var x1,x2,y1,y2;

$("#chartdiv").bind("jqplotMouseDown", function(ev, gridpos, datapos, neighbor) {
    time_diff.push(datapos.xaxis); // provides x axis value
    
    // neighbor is not null when we click on a data point.
    if (neighbor) {
      alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]);
    }
    $("#current").attr({ id: '' });
    box = $('<div style="border:1px #FF00FF solid;position:fixed;">').hide();
    $(document.body).append(box);
    x1 = gridpos.x;
    y1 = gridpos.y;
    box.attr({id: 'current'}).css({
        top: y1,
        left: x1
    }).fadeIn();
});

$("#chartdiv").bind("jqplotMouseUp", function(ev, gridpos, datapos, neighbor) {
    time_diff.push(datapos.xaxis); // provides x axis value
    
    //get date from timestamp
    alert(new Date(Math.ceil(time_diff[0])) + " \n to \n " + new Date(Math.ceil(time_diff[1])));
    
    time_diff = [];
    $("#current").attr({ id: '' });
});

$("#chartdiv").bind("jqplotMouseMove", function(ev, gridpos, datapos, neighbor) {
    //alert(gridpos.x + ' ' + gridpos.y);
   $("#current").css({
        width:Math.abs(gridpos.x - x1),
        height:Math.abs(gridpos.y - y1)
    }).fadeIn(); 
});

// we'll be having timestamps as x-values
line1 = [[1347649150000, 1], [1347750250000, 2.25], [1347851350000, 4], [1347952450000, 6.25], [1348053550000, 9], [1348154650000, 12.25], [1348255750000, 16]];
plot4 = $.jqplot('chartdiv', [line1], {
    legend: {
        show: true
    },
    title: 'Click Event Test',
    grid: {
        background: '#f3f3f3',
        gridLineColor: '#accf9b'
    },
    series: [
        {
        label: 'Rising line',
        markerOptions: {
            style: 'square'
        }}
    ],
    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
            tickOptions: {
                formatString: '%H:%M:%S',
                showGridline: false
            }
        }
    }
});