FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Multi-dataPoints on bar Chart Draggable › Reply To: Multi-dataPoints on bar Chart Draggable

September 27, 2018 at 9:56 am #22770

Sourabh Singh

Please find the complete code. Please suggest the solution for the same.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<title>Bar Chart by Canvas JS</title>
	
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<style>
		.canvasjs-chart-credit{display:none !important;}
		.row > div{margin-top:20px;}
	</style>
</head>
<body class="container">
	<div class="row">
	
		<div class="col-xs-12 text-center">	
			<div class="col-xs-6">
				<input type="button" id="renderLineGraph" value="Click to generate Line graph" class="btn btn-default btn-primary">			
			</div>
			<div class="col-xs-6">
				<input type="button" id="renderBarGraph" value="Click to generate Bar graph" class="btn btn-default btn-success">		
			</div>
		</div>
			
		<div class="col-xs-12 text-center">
			<div class="col-xs-12">
				<div class="sectionFirst">
					<h1>Bar Chart by Canvas JS</h1>
					X Value:<input id="xValue" type="number" step="any" placeholder="Enter X-Value"><br>
					Y Value:<input id="yValue" type="number" step="any" placeholder="Enter Y-Value"><br>
					<button id="renderButton">Add DataPoint & Render</button>
					
					<div id="lineGraphContainer" style="width:500px; height: 400px;"></div>
				</div>
			</div>
			<div class="col-xs-12">
				<div class="sectionSecond">
					<div id="barChartContainer" style="width:100%; height: 520px;"></div>
				</div>
			</div>
		</div>
		
	</div>
		
	<!-- All scripts placed here -->	
	<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
	<script src="js/lineChart.js" type="text/javascript"></script>
	<script src="js/barchart.js" type="text/javascript"></script>
	<script>
	$(document).ready(function(){
		$(".sectionFirst, .sectionSecond").hide();
	
		$("#renderLineGraph").on("click", function(){
			$(".sectionFirst").show();
			$(".sectionSecond").hide();
		});
		$("#renderBarGraph").on("click", function(){
			$(".sectionSecond").show();
			$(".sectionFirst").hide();
		});
	});	
	</script>
	
</body>
</html>

<!-- barchart.js -->
window.onload = function() {

	var chart = new CanvasJS.Chart("barChartContainer",
	{        
		theme: "light2",	// theme can changed to: “light1″,”light2”, “dark1”, “dark2” 
		animationEnabled: true,
		axisX:{
			minimum: 5,		// x-axis minimum value
			maximum: 100,	// x-axis maximum value
			labelAngle: 45,
			prefix: "$",	// Prefix
			suffix: "K"		// Suffix
		},
		axisY:{
			minimum: 5,		// y-axis minimum value
			maximum: 100,	// y-axis maximum value
			labelAngle: 45,
			prefix: "$",	// Prefix
			suffix: "K",	// Suffix
			interlacedColor: "#F0F8FF"
		},
		title: {
			text: "Draggable bar graphs",	// title over the graph
			fontSize: 20,
			fontWeight: "bold",
			fontColor: "#000",
			fontFamily: "tahoma",
			padding: 10
		},
		subtitles:[
		{
			text: "Blue is draggable",
			fontSize: 14,
			fontWeight: "normal",
			fontColor: "blue"		
		}
		],
		legend: {
			cursor: "pointer",
			itemclick: function (e) {		// Show/Hide legends on click
				if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
					e.dataSeries.visible = false;
				} else {
					e.dataSeries.visible = true;
				}

				e.chart.render();
			}
		},
		data: [
		{	// dataSeries 1
			type: "column",	// type can be changed to: “line”,“column”,“bar”,“area”,“spline”,“pie”,“doughnut”
			name: "Option First",
			showInLegend: true,
			dataPoints: [	// data points set 1
			{ 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 }
			]
		},
		{	// dataSeries 2
			type: "column",	// type can be changed to: “line”,“column”,“bar”,“area”,“spline”,“pie”,“doughnut”
			name: "Option Second",
			showInLegend: true,
			dataPoints: [	// data points set 2
			{ x: 10, y: 78 },
			{ x: 20, y: 42 },
			{ x: 30, y: 86 },
			{ x: 40, y: 25 },
			{ x: 50, y: 78 },
			{ x: 60, y: 96 },
			{ x: 70, y: 36 },
			{ x: 80, y: 45 },
			{ x: 90, y: 20 }
			]
		}
		]
	});

	var dataPointWidth = 1;

	chart.render();

	var xSnapDistance = chart.axisX[0].convertPixelToValue(chart.get("dataPointWidth")) / 2;
	var ySnapDistance = 3;

	var xValue, yValue;

	var mouseDown = false;
	var selected = null;
	var changeCursor = false;

	var timerId = null;

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

	function searchDataPoint() {
		var dps = chart.data[0].dataPoints;
		for(var i = 0; i < dps.length; i++ ) {
			if( (xValue >= dps[i].x - xSnapDistance && xValue <= dps[i].x + xSnapDistance) && (yValue >= dps[i].y - ySnapDistance && yValue <= dps[i].y + ySnapDistance) ) 
			{
				if(mouseDown) {
					selected = i;
					break;
				} else {
					changeCursor = true;
					break; 
				}
			} else {
				selected = null;
				changeCursor = false;
			}
		}
	}

	jQuery("#barChartContainer > .canvasjs-chart-container").on({
		mousedown: function(e) {
			mouseDown = true;
			getPosition(e);  
			searchDataPoint();
		},
		mousemove: function(e) {
			getPosition(e);
			if(mouseDown) {
				clearTimeout(timerId);
				timerId = setTimeout(function(){
					if(selected != null) {
						chart.data[0].dataPoints[selected].y = yValue;
						chart.render();
					}   
				}, 0);
			}
			else {
				searchDataPoint();
				if(changeCursor) {
					chart.data[0].set("cursor", "n-resize");
				} else {
					chart.data[0].set("cursor", "default");
				}
			}
		},
		mouseup: function(e) {
			if(selected != null) {
				chart.data[0].dataPoints[selected].y = yValue;
				chart.render();
				mouseDown = false;
			}
		}
	});

}