Home › Forums › Chart Support › Graph a CSV file › Reply To: Graph a CSV file

July 13, 2018 at 11:55 am #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!