Highcharts test tool

by grant

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<div id="container" style="width: 800px; height: 310px; margin: 0 auto">
	<div style="margin-top: 100px; text-align: center" id="loading">
		<i class="fa fa-spinner fa-spin"></i> Loading data from external source
	</div>
</div>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

var chart;

// Parallel arrays for the chart data, these are populated as the XML/JSON file 
// is loaded
var symbols = [],
	precipitations = [],
	windDirections = [],
	windDirectionNames = [],
	windSpeeds = [],
	windSpeedNames = [],
	temperatures = [],
	pressures = [];

/**
 * Create wind speed symbols for the Beaufort wind scale. The symbols are rotated
 * around the zero centerpoint.
 */
function windArrow (name) {
	var level, 
		path;

	// The stem and the arrow head
	path = [
		'M', 0, 7, // base of arrow
		'L', -1.5, 7,
		0, 10,
		1.5, 7,
		0, 7,
		0, -10 // top
	];

	level = $.inArray(name, ['Calm', 'Light air', 'Light breeze', 'Gentle breeze', 'Moderate breeze',
		'Fresh breeze', 'Strong breeze', 'Near gale', 'Gale', 'Strong gale', 'Storm',
		'Violent storm', 'Hurricane']);

	if (level === 0) {
		path = []; // TODO: circle
	}

	if (level == 2) {
		path.push('M', 0, -8, 'L', 4, -8); // short line
	} else if (level >= 3) {
		path.push(0, -10, 7, -10); // long line
	}

	if (level == 4) {
		path.push('M', 0, -7, 'L', 4, -7);
	} else if (level >= 5) {
		path.push('M', 0, -7, 'L', 7, -7);
	}

	if (level == 5) {
		path.push('M', 0, -4, 'L', 4, -4);
	} else if (level >= 6) {
		path.push('M', 0, -4, 'L', 7, -4);
	}

	if (level == 7) {
		path.push('M', 0, -1, 'L', 4, -1);
	} else if (level >= 8) {
		path.push('M', 0, -1, 'L', 7, -1);
	}

	return path;
}

/**
 * Function to smooth the temperature line. The original data provides only whole degrees,
 * which makes the line graph look jagged. So we apply a running mean on it, but preserve
 * the unaltered value in the tooltip.
 */
function smoothLine (data) {
	var i = data.length,
		sum,
		value;

	while (i--) {
		data[i].value = value = data[i].y; // preserve value for tooltip

		// Set the smoothed value to the average of the closest points, but don't allow
		// it to differ more than 0.5 degrees from the given value
		sum = (data[i - 1] || data[i]).y + value + (data[i + 1] || data[i]).y;
		data[i].y =...