High Charts Sway Scatter v2

by Jason Crowther

HTML

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
  
<h1>Sway Scatter Charts Prototype v2</h1>

<div id="xyContainer" class="container"></div>
<div id="xy2Container" class="container"></div>
<div id="xzContainer" class="container"></div>
<div id="yzContainer" class="container"></div>

CSS

.container { 	min-width: 380;	max-width: 550px; background-color: #ccc; margin-bottom: 2em}

JavaScript

$(document).ready(function(){
	// ajax home to get data for this prototype
  // in real implementation, we'll just ship
  // over at the same time as the page.
  $.ajax({
  	url: 'http://dev5.purplewire.com/~jason/data/sway.json',
  	dataType: 'json',
  	success: function(d){

    	// how many data elements?
    	var l = d.length;

			// split data into xy, xz, and yz
			var xydata = [];
    	var xzdata = [];
    	var yzdata = [];

      var minx;
      var maxx;
      var miny;
      var maxy;
      var minz;
      var maxz;
      
      var first = true;

    	for( var i=0; i<l; i++) {
				var r = d[i];
		
    		var x = parseFloat(d[i][0]);
    		var y = parseFloat(d[i][1]);
    		var z = parseFloat(d[i][2]);

				xydata.push([ x, y ]);
				xzdata.push([ x, z ]);
				yzdata.push([ y, z ]);
    		
        if(first) {
        	minx=maxx=x;
          miny=maxy=y;
          minz=maxz=z;
        	first = false;
        }

        if( x <= minx )
        	minx = x;
      	if( x >= maxx )
        	maxx = x;
        
        if( y <= miny )
        	miny = y;
				if( y >= maxy )
        	maxy = y;

        if( z <= minz )
        	minz = z;
				if( z >= maxz )
        	maxz = z;

      }
      
      //console.log('mm',minx, maxx, miny, maxy, minz, maxz)
 
 			var xspread = Math.abs(maxx) > Math.abs(minx) ? Math.abs(maxx) : Math.abs(minx);
      var yspread = Math.abs(maxy) > Math.abs(miny) ? Math.abs(maxy) : Math.abs(miny);
      var zspread = Math.abs(maxz) > Math.abs(minz) ? Math.abs(maxz) : Math.abs(minz);

			//console.log('spread',xspread,yspread,zspread)

     	makeChart({
    		containerName: 'xyContainer',
      	data: xydata,
      	title: 'Sway X vs Y',
      	color: 'rgba(254,187,73,0.5)',
        
        xspread: xspread,
        yspread: yspread
    	});

    	makeChart({
    		containerName: 'xzContainer',
      	data: xzdata,
      	title: 'Sway X vs Z',
      	color: 'rgba(254,77,44,0.5)',
        
        xspread: xspread,
        yspread: zspread
  ...