You must be logged in to post your query.
Home › Forums › Chart Support › Multi-dataPoints on bar Chart Draggable
Hi,
I’m stuck with draggable option in multi data bar chart. First bar chart is draggable, but second wasn’t. Please suggest.
Sourabh
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
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;
}
}
});
}
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;
}
}
});
We are looking into it and will get back to you at the earliest.
__
Priyanka M S
Team CanvasJS
Waiting for the solution of the proposed problem.
You must be logged in to reply to this topic.