Draggable stackedBar Chart - CanvasJS JavaScript Charts

Draggable stackedBar Chart - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  title: {
    text: "Try Dragging Any Bar to Resize"
  },
  axisX: {
    minimum: 5,
    maximum: 95
  },
  data: [{
		type: "stackedBar",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	},{
		type: "stackedBar",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	},{
		type: "stackedBar",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	}]
});
chart.render();



var xSnapDistance = 3;
var ySnapDistance = 5;

var xValue, yValue;

var mouseDown = false;
var selectedDataSeries = null;
var selectedDataPointX = null;
var selectedDatapointIndex = null;
var selectedSumIndex = null;
var changeCursor = false;
var timerId = null;
var chartType = "stackedBar";


function getPosition(e) {
  var parentOffset = $("#chartContainer > .canvasjs-chart-container").offset();
  var relX = e.pageX - parentOffset.left;
  var relY = e.pageY - parentOffset.top;
  xValue = Math.round(chart.axisX[0].convertPixelToValue(relY));
  yValue = Math.round(chart.axisY[0].convertPixelToValue(relX));
}

function searchDataPoint(stackedValues) {
  for (x in stackedValues) {
    if (stackedValues.hasOwnProperty(x) && (xValue >= Number(x) - xSnapDistance && xValue <= Number(x) + xSnapDistance)) {
      for (var i = 0; i < stackedValues[x].length; i++)
        if (yValue >= stackedValues[x][i].stackedSum - ySnapDistance && yValue <= stackedValues[x][i].stackedSum + ySnapDistance) {
          if (mouseDown) {
            selectedDataPointX = x;
           ...