Home Forums Chart Support Multi-dataPoints on bar Chart Draggable

Multi-dataPoints on bar Chart Draggable

Viewing 7 posts - 1 through 7 (of 7 total)
  • #22756

    Hi,

    I’m stuck with draggable option in multi data bar chart. First bar chart is draggable, but second wasn’t. Please suggest.

    Sourabh

    #22761

    Sourabh,

    Can you kindly share a jsfiddle reproducing the issue you are facing, so that we can look into your code, understand the scenario better and help you out?

    __
    Priyanka M S
    Team CanvasJS

    #22770

    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;
    			}
    		}
    	});
    
    }
    #22774

    There’re two bars in the bar chart, but only one is draggable at a time.

    First bar is draggable when “0” is passed in “data[0]” and Second bar is draggable when “1” is passed in “data[1]”.

    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;
    }
    }
    });

    #22800

    @sourabh-singh,

    We are looking into it and will get back to you at the earliest.

    __
    Priyanka M S
    Team CanvasJS

    #22888

    Waiting for the solution of the proposed problem.

    #22920

    @sourabh-singh,

    Please take a look at this jsfiddle.

    __
    Priyanka M S
    Team CanvasJS

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.