A) Javascript Stuff

//eyy
//https://jsfiddle.net/r479tc2n/101/

DragAndDrop.css

body {
  width: 1024px;
  height: 1068px;
  overflow: scroll;
}
#header {
  background-color: black;
  height: 100px;
}
#leftNav {
  background-color: black;
  display: inline-block;
  width: 100px;
  height: 1024px;;
}

#dashboard {
  vertical-align: top;
  display: inline-block;
  overflow: hidden;
  padding: 5px;
  width: 800px;
  height: 600px;
  background-color: lightblue;
}
#dashboard div {
  text-align: center;
  line-height: 100px;
  display: inline-block;
  margin: 5px;
  height: 90px;
  width: 90px;
  background-color: white;
}
#dashboard div.taken {
  background-color: red;
}
.widget {
  background-color: blue;
  margin: 5px;
  color: white;
  width: 50px;
  height: 50px;
}

DragAndDrop.html

<div>
  <div id="header">
  
  </div>
  <div id="leftNav">
    <div class="widget" draggable="true" data-height="2" data-width="2'">
      2x2
    </div>
    
    <div class="widget" draggable="true" data-height="4" data-width="2'">
      2x4
    </div>
  </div>
  
  <div id="dashboard">

  </div>
</div>

DragAndDrop.js

//https://jsfiddle.net/r479tc2n/101/

var $targetElement;
$(document).ready(function() {
  var rows = 6, cols = 8;
  $div = $("<div></div>");
  for(var r = 0; r < rows; r++) {
  	for(var c = 0; c < cols; c++) {
      $div.attr("data-row", r);
      $div.attr("data-column", c);
    	$div.text(c + ', ' + r);
      $("#dashboard").append($div.clone());
    }
  }
	function dragBlock(event) {
  	event.preventDefault();
  }
  
  $("div[draggable='true']").on("dragstart", function(event) {
  	$targetElement = $(this);
  });
  function markTaken(x, y, width, height) {
    for(var r = y; r < y+height; r++) {
	  	for(var c = x; c < x+width; c++) {
        $("#dashboard div[data-column='"+c+"'][data-row='"+r+"']").addClass("taken");
      }
    }
  }
	$.each($("#dashboard div"), function(i, el) {
    $(el)
    	.on("dragover", dragBlock)
      .on("dragleave", dragBlock)
      .on("drop", function(event) {
        event.preventDefault();
        $dropTarget = $(event.currentTarget);
        var row = $dropTarget.data("row");
      	var col = $dropTarget.data("column");
        markTaken(col, row, parseInt($targetElement.data("width")), parseInt($targetElement.data("height")));
      });
  });
});

Get Max Tick Based on value.js

var stackedTotal = series3.map((n, i) => n + series4[i]);
var dataMapped = [series1, series2, stackedTotal ].reduce((acc, val) => acc.concat(val), []);
var dataMax = Math.max.apply(null, dataMapped); //1646
var dataMostSignificant = Math.pow(10, Math.floor(Math.log10(dataMax))); //1000
var dataScientific = dataMax / dataMostSignificant; //1.6
var dataWholeNumber = Math.floor(dataScientific); //1
var dataScientificMax = dataScientific % 1 >= .5 ? dataWholeNumber + 1 : dataWholeNumber + .5; //2
var tickMax = dataScientificMax * dataMostSignificant; //2000