Skeeball Analysis

by lamarant

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.8.9/jquery.csv.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/heatmap.js"></script>
<textarea>
TimeStamp,Sample,X,Y,,,Area
2/7/2018 9:25,1,20,23,18,,16.50
2/7/2018 9:25,2,20,22,17,,
2/7/2018 9:25,3,18,22,17,,
2/7/2018 9:25,4,20,23,18,,
2/7/2018 9:25,5,17,23,18,,
2/7/2018 9:25,6,21,22,17,,
2/7/2018 9:25,7,20,21,16,,
2/7/2018 9:25,8,20,22,17,,
2/7/2018 9:25,9,19,22,17,,
2/7/2018 9:25,10,21,20,15,,
2/7/2018 9:25,11,20,22,17,,
2/7/2018 9:25,12,20,21,16,,
2/7/2018 9:25,13,21,22,17,,
2/7/2018 9:25,14,19,20,15,,
2/7/2018 9:25,15,19,22,17,,
2/7/2018 9:25,16,20,22,17,,
2/7/2018 9:25,17,21,22,17,,
2/7/2018 9:25,18,20,21,16,,
2/7/2018 9:25,19,18,22,17,,
2/7/2018 9:25,20,20,23,18,,
2/7/2018 9:25,21,21,22,17,,
2/7/2018 9:26,22,21,21,16,,
2/7/2018 9:26,23,20,24,19,,
2/7/2018 9:26,24,20,22,17,,
2/7/2018 9:26,25,21,19,14,,
2/7/2018 9:26,26,16,18,13,,
2/7/2018 9:26,27,20,19,14,,
2/7/2018 9:26,28,22,23,18,,
2/7/2018 9:26,29,21,22,17,,
2/7/2018 9:26,30,19,22,17,,
2/7/2018 9:26,31,19,22,17,,
2/7/2018 9:26,32,20,23,18,,
2/7/2018 9:26,33,20,24,19,,
2/7/2018 9:26,34,22,23,18,,
2/7/2018 9:27,35,21,22,17,,
2/7/2018 9:27,36,20,19,14,,
2/7/2018 9:27,37,20,24,19,,
2/7/2018 9:27,38,18,22,17,,
2/7/2018 9:27,39,21,22,17,,
2/7/2018 9:27,40,20,22,17,,
2/7/2018 9:27,41,19,23,18,,
2/7/2018 9:27,42,21,20,15,,
2/7/2018 9:27,43,21,22,17,,
2/7/2018 9:27,44,21,22,17,,
2/7/2018 9:27,45,21,22,17,,
2/7/2018 9:27,46,17,18,13,,
2/7/2018 9:27,47,19,21,16,,
2/7/2018 9:27,48,20,22,17,,
2/7/2018 9:27,49,19,21,16,,
2/7/2018 9:28,50,17,21,16,,
2/7/2018 9:28,51,20,22,17,,
2/7/2018 9:28,52,19,23,18,,
2/7/2018 9:28,53,18,24,19,,
2/7/2018 9:28,54,21,21,16,,
2/7/2018 9:28,55,19,21,16,,
2/7/2018 9:28,56,19,21,16,,
2/7/2018 9:28,57,18,23,18,,
2/7/2018 9:28,58,19,22,17,,
2/7/2018 9:28,59,19,23,18,,
2/7/2018 9:28,60,19,22,17,,
2/7/2018...

CSS

textarea { width: 100%; height: 200px; display: none; }

JavaScript

function drawEllipse(chart, x, y, xr, yr) {
  console.log(chart.xAxis[0]);
  
	// draw ellipse using createElement
  chart.renderer.createElement('ellipse').attr({
      cx: chart.xAxis[0].toPixels(x),
      cy: chart.yAxis[0].toPixels(y),
      rx: 2,
      ry: 2,
      fill: '#000',
      zIndex: 3,
      opacity: 1
    }).add();

}

function processCSV(csv) {
	var obj = $.csv.toObjects(csv);
  
  //get the average x and average  
  var data = [];
  var sumX = 0, sumY = 0;
  $.each(obj, function(k,v) {
  	sumX = sumX + Number(v.X);
    sumY = sumY + Number(v.Y);
  });
  console.log(sumX/obj.length);
  console.log(sumY/obj.length)
  
  var avgX = Math.round(sumX/obj.length);
  var avgY = Math.round(sumY/obj.length);
  
  $.each(obj, function(k,v) {
  	data.push({
    	n: v.Sample,
      x: (v.X-avgX).toFixed(2),
      y: Number((v.Y-avgY).toFixed(2))
    });
  });  
  console.log(data);
	return data;
}
    
$('button').click(function() {
	var csv = $('textarea').val();
  var dataSeries = {
    color: 'rgba(223, 83, 83, .5)',
    data: processCSV(csv)
  };
  
  Highcharts.chart('container', {
      chart: {
          type: 'scatter',
          zoomType: 'xy',
          events: {
          	load: function() {
              drawEllipse(this, 0, 0, 1, 1);
            }
          }
      },
      credits: {
        enabled: false
      },
      title: {
          text: 'Bounce Test Data'
      },
      xAxis: {
          min: -10,
          max: 10,
          tickInterval: 1,
          tickPixelInterval: 50
      },
      yAxis: {
          min: -10,
          max: 10,
          tickInterval: 1,
          tickPixelInterval: 50
      },
      /*
      legend: {
          layout: 'vertical',
          align: 'left',
          verticalAlign: 'top',
          x: 100,
          y: 70,
          floating: true,
          backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
          borderWidth: 1
      },
      */
      tooltip: {
  ...