Hi,
I’ve had little to no prior experience with any stuff of this sort so forgive me if I’m missing the mark somewhere. Essentially, my end goal is to produce a scatter plot with draggable data points and display the Y values somewhere below the chart (to be updated as the points are dragged). Eventually, I want to plot multiple plots with the same features on the same chart.
By exploring various forum threads I managed to string together some parts, but have been unable to read in data from a csv file in place of the dummy data in my current code.
What I have so far:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer",{
axisX:{
minimum: 5,
maximum: 95
},
title: {
text: "Test2 with draggable scatter plot",
},
data: [
{
type: "spline",
dataPoints: [{x:10,y:2},{x:20,y:5},{x:30,y:10},{x:40,y:14},{x:50,y:7},{x:60,y:9},{x:70,y:8},{x:80,y:11},{x:90,y:4}]
}
]
});
chart.render();
var xSnapDistance = 1;
var ySnapDistance = 1;
var mouseDown = false;
var selected = null;
var changeCursor = false;
var timerId = null;
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(relX));
yValue = Math.round(chart.axisY[0].convertPixelToValue(relY));
}
function searchDataPoint() {
var dps = chart.data[0].dataPoints;
var len = dps.length;
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("#chartContainer > .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;
}
}
});
}
</script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
asd</br>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>
—–
I didn’t manage to follow through the linked tutorial successfully, but don’t have the expertise to troubleshoot why.
Any help is greatly appreciated!
.
