Forum Replies Created by SolidScorch

Viewing 2 posts - 1 through 2 (of 2 total)
  • July 17, 2018 at 7:27 am in reply to: Graph a CSV file #21854

    SolidScorch

    Ahh right, this is a huge help!
    Thank you Priyanka c: !

    July 13, 2018 at 11:55 am in reply to: Graph a CSV file #21797

    SolidScorch

    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!

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