JSFiddle - React, Tailwind, and code Playground

by Miky_Frazao

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.navigate.min.js"></script>
 
<div class="plot" id='plot1'></div>
<span id="hoverdata"></span>

CSS

.axisLabel {
	    position: absolute;
	    text-align: center;
	    font-size: 12px;
	}

	.xaxisLabel {
	    bottom: -25px;
	    left: 0;
	    right: 0;
	}
	.plot {
	    width: 600px;
	    height: 300px;
	    margin: 15px auto 30px auto;
	}

	.yaxisLabel {
	    top: 50%;
	    left: -25px;
	    transform: rotate(-90deg);
	    -o-transform: rotate(-90deg);
	    -ms-transform: rotate(-90deg);
	    -moz-transform: rotate(-90deg);
	    -webkit-transform:  rotate(-90deg);
	    transform-origin: 0 0;
	    -o-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	    -moz-transform-origin: 0 0;
	    -webkit-transform-origin: 0 0;
	}

JavaScript

var maxY1 = 2700 + 200;

            var invoicesDone = JSON.parse('{"1":[2820,"1452786357","Lexy Panterra"],"3":[1200,"1452786372","Lexy Panterra"],"9":[139.98,"1452862028","Lexy Panterra"],"12":[139.98,"1452862796","Lexy Panterra"],"15":[75,"1452881987","Lexy Panterra"],"17":[69.99,"1452893153","Lexy Panterra"]}');
            var invoicesPending = JSON.parse('{"2":[90,"1452786365","Lexy Panterra"],"4":[650,"1452786991","Lexy Panterra"],"5":[75,"1452853490","Lexy Panterra"],"6":[120,"1452861281","Lexy Panterra"],"7":[18.1,"1452861333","Lexy Panterra"],"8":[75,"1452861815","Lexy Panterra"],"10":[18.1,"1452862035","Lexy Panterra"],"11":[69.99,"1452862576","Lexy Panterra"],"13":[69.99,"1452871025","Lexy Panterra"],"14":[69.99,"1452873140","Lexy Panterra"],"16":[680,"1452882012","Lexy Panterra"],"18":[720,"1452937569","Miguel Fraz\u00e3o"],"19":[130,"1452969738","Miguel Fraz\u00e3o"]}');

            var idInvoicesDone = [];
            var invoicesDoneData = [];
            for (var key in invoicesDone) {
                idInvoicesDone.push({'id': key, 'name': invoicesDone[key][2]});
                invoicesDoneData.push([invoicesDone[key][1]*1000, invoicesDone[key][0]]);
            }
            
            var idInvoicesPending = [];
            var invoicesPendingData = [];
            for (var key in invoicesPending) {
                idInvoicesPending.push({'id': key, 'name': invoicesPending[key][2]});
                invoicesPendingData.push([invoicesPending[key][1]*1000, invoicesPending[key][0]]);
            }

            /*var 2daysAgo = new Date(1313564400000).getDate();
            alert(2daysAgo);*/

            var data1 = [
                {
                    label:"Faturas despachadas",
                    data: invoicesDoneData,
                    links: idInvoicesDone,
                    color: "green",
                },
                {
                    label:"Faturas pendentes",
                    data: invoicesPendingData,
        ...