Draggable stackedBar Chart - CanvasJS JavaScript Charts
Draggable stackedBar Chart - CanvasJS JavaScript Charts
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="chartContainer1" style="height: 200px; width: 100%;"></div>
<div id="chartContainer2" style="height: 200px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer1", {
animationEnabled: true,
title: {
text: "Retirement Contribution"
},
axisY: {
minimum: -100
},
data: [{
type: "stackedBar",
dataPoints: [
{ label:"IRA", y: -40 }
]
},{
type: "stackedBar",
dataPoints: [
{ label:"IRA", y: -40 }
]
},]
});
chart.render();
var chart = new CanvasJS.Chart("chartContainer2", {
animationEnabled: true,
title: {
text: ""
},
axisY: {
minimum: -100
},
data: [{
type: "stackedBar",
dataPoints: [
{ label:"SEP-IRA", y: -40 }
]
},{
type: "stackedBar",
dataPoints: [
{ label:"SEP-IRA", y: -40 }
]
},]
});
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 = $("#chartContainer1 > .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 getPosition(e) {
var parentOffset = $("#chartContainer2 > .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) {
...