High Charts Sway Scatter

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</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: '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 = [];

    	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] ]);
    	}
    
    	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, {

		chart: {
   		zoomType: 'xy',
      height: '100%'
    },

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

    xAxis: {
      gridLineWidth: 1
    },

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

    title: {
      text: args.title
    },
    //tooltip: {
    //  enabled: false,
    //},

    legend: {
      enabled: false
    },

    series: [{
      type: 'scatter',
      color: args.color,
      data: args.data,
      marker: {
        radius: 4
      },
    }]
  });
}