High Charts Sway Scatter v4

Using updated sample information provided on 20180612

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 v4 (different way to do line, no markers, latest sample data <strong>line</strong>, instead of spline)</h1>

<div id="xyContainer" 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: 'https://dev5.purplewire.com/~jason/data/20180612.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 c=0;

    	for( var i=0; i<l; i++) {
				var r = d[i];
      	xydata.push([ r[0], r[1] ]);
				xzdata.push([ r[0], r[2] ]);
				yzdata.push([ r[1], r[2] ]);
    	
      	c++;
        //if (c === 5000) { break; }
      }
    
    	makeChart({
    		containerName: 'xyContainer',
      	data: xydata,
      	title: 'Sway X vs Y',
      	color: 'rgba(254,187,73,0.5)'
    	});

    	makeChart({
    		containerName: 'xzContainer',
      	data: xzdata,
      	title: 'Sway X vs Z',
      	color: 'rgba(254,77,44,0.5)'
    	});

    	makeChart({
    		containerName: 'yzContainer',
      	data: yzdata,
      	title: 'Sway Y vs Z',
      	color: 'rgba(107,201,128,0.5)'
    	});
  	},
	});
});

function makeChart( args ) {

	Highcharts.chart( args.containerName, {
		exporting: { enabled: false},
    credits: {enabled: false},
		plotOptions: {
    	scatter: { lineWidth: 1, boostThreshold: 0 }
    },

    //boost: {
    //  useGPUTranslations: true,
    //  usePreAllocated: true
    //},

    xAxis: {
      gridLineWidth: 1
    },

    yAxis: {
      minPadding: 0,
      maxPadding: 0,
      title: {
        text: null
      }
    },

    title: { text: args.title },

    legend: { enabled: false },
    
    series: [
    	{
      	type: 'scatter',
      	color: args.color,
      	//data: [[1,2],[2,3],[3,4],[4,5]],
      	marker: { enabled: false },
        animation: false,
        enableMouseTracking: false,
        
        data: args.data
      }
    ]
    
  });
}