Plotly Playground

HTML

<head>
  <!-- Plotly.js -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id="bar"></div>
  <div id="time"></div>
  <div id="pie"></div>
  <div id="gauge"></div>
</body>

JavaScript

var lp = ['HH-LE-123','HH-LE-124','HH-LE-125','HH-LE-126','HH-LE-127','HH-LE-128','HH-LE-129','HH-LE-130','HH-LE-131','HH-LE-132','HH-LE-133','HH-LE-134','HH-LE-135','HH-LE-136','HH-LE-137','HH-LE-138','HH-LE-139','HH-LE-140','HH-LE-141','HH-LE-142','HH-LE-143','HH-LE-144','HH-LE-145','HH-LE-146','HH-LE-147','HH-LE-148','HH-LE-149','HH-LE-150','HH-LE-151','HH-LE-152'];

var dates = [new Date('01-01-2018'),new Date('01-01-2018'),new Date('01-01-2018'),new Date('01-01-2018'),new Date('01-01-2018'),new Date('01-03-2018'),new Date('01-03-2018'),new Date('01-03-2018'),new Date('01-03-2018'),new Date('01-03-2018'),new Date('01-07-2018'),new Date('01-07-2018'),new Date('01-07-2018'),new Date('01-07-2018'),new Date('01-08-2018'),new Date('01-08-2018'),new Date('01-08-2018'),new Date('01-08-2018'),new Date('01-08-2018'),new Date('01-08-2018'),new Date('01-10-2018'),new Date('01-10-2018'),new Date('01-10-2018'),new Date('01-10-2018'),new Date('01-10-2018'),new Date('01-10-2018'),new Date('01-10-2018'),new Date('01-10-2018'),new Date('01-12-2018'),new Date('01-12-2018')];

var dates_unique = [new Date('01-01-2018'),new Date('01-03-2018'),new Date('01-07-2018'),new Date('01-08-2018'),new Date('01-10-2018'),new Date('01-12-2018')];
var dates_unique_text = ['01.01.2018','03.01.2018','07.01.2018','08.01.2018','10.01.2018','12.01.2018',];
var startDate = new Date("2018-01-01"); 
var endDate = new Date("2018-01-31"); 

var getDateArray = function(start, end) {
    var arr = new Array();
    var dt = new Date(start);
    while (dt <= end) {
        arr.push(new Date(dt));
        dt.setDate(dt.getDate() + 1);
    }
    return arr;
}
var dates_complete = getDateArray(startDate, endDate);

var v1 = [60,2,57,75,94,12,49,37,38,46,59,50,14,3,68,1,56,96,83,54,4,70,77,26,81,74,27,35,10,67];
var v2 = [89,8,80,48,36,98,32,74,29,56,5,5,51,6,55,2,60,9,57,1,99,48,52,94,86,40,53,89,83,60];
var v3 = [71,19,10,83,82,62,12,55,9,55,31,26,68,29,16,5,43,40,56,56,40,72,90,60,47,46,15,20,45,81];

var...