Ahh right, this is a huge help! Thank you Priyanka c: !
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!