matbor/index_hs_temps_multi.php

## index_hs_temps_multi.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Upwey Temperatures</title>
</head>
<script type="text/javascript" src="/javascript/jquery_1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript">


//example url to call
// index_hs_temps.php?interval=7&loco=lexie
// whereby interval=# of days or 'all' for all of the data
// whereby loco=location for example outside1 or kitchen
//
function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
};

var interval = getQueryVariable("interval");

var names = getQueryVariable("names"); //not being used atm, need to work out how to fix this


console.log(interval + ' days - locations ' +names);


$(function() {

	var names = ['outside1', 'master', 'lounge', 'kitchen', 'lexie'],
		seriesCounter = 0,
		seriesOptions = [],
		colors = Highcharts.getOptions().colors;

	console.log('starting to retrive data');

  $.each(names, function(i, name) {
	document.getElementById("loading").innerHTML = '<B>Loading please wait.. retrieving '+ interval +' day/s worth of data</B>';

    //json_hs_temps.php?interval=7&location=outside1   <-- this will return JSON data for the past 7 days for outside1 temperature sensor.
		$.getJSON("json_hs_temps.php?interval="+interval+"&location="+ name.toLowerCase(), function(data) {
			console.log( "success with grabing json data for " + name.toLowerCase());

			seriesOptions[i] = {
					name: name + ' Temperature',
					data: data,
					color: colors[i],
					type: 'line'
				};

			// As we're loading the data asynchronously, we don't know what order it will arrive. So
			// we keep a counter and create the chart when all the data is loaded.
			seriesCounter++;

			if (seriesCounter == names.length) {
				createChart();
			}
		});
	});

	// create the chart when all data is loaded
	function createChart() {

		Highcharts.setOptions({
					global: {
						useUTC: false
					}
			});

		// Create a timer, to test how long this takes to load
		var start = + new Date();

		// Create the chart
		$('#container').highcharts('StockChart', {

		    chart: {
				events: {
					load: function(chart) {
						this.setTitle(null, {
							text: 'This chart was built on '+ new Date() + ' in ' + (new Date() - start) +'ms'
						});


					}
				}
		    },
  			rangeSelector: {
		        buttons: [{
		            type: 'hour',
		            count: 1,
		            text: '1hr'
		        }, {
		            type: 'hour',
		            count: 3,
		            text: '3hr'
		        }, {
		            type: 'hour',
		            count: 12,
		            text: '12hr'
		        }, {
		            type: 'day',
		            count: 1,
		            text: '1d'
		        }, {
		            type: 'day',
		            count: 3,
		            text: '3d'
		        }, {
		            type: 'day',
		            count: 5,
		            text: '5d'
		        }, {
		            type: 'day',
		            count : 7,
		            text: '7d'
		        }, {
		            type: 'month',
		            count : 1,
		            text: '1m'
		        }, {
		            type: 'month',
		            count : 3,
		            text: '3m'
		        }, {
		            type: 'month',
		            count: 6,
		            text: '6m'
		        }, {
		            type: 'year',
		            count: 1,
		            text: '1y'
		        }, {
		            type: 'all',
		            text: 'All'
		        }],
		        selected: 2
		    },

			yAxis: {
				type: 'linear',
				title: {
					text: 'Temperature (C)'
				}
			},

		    title: {
				text: 'Historical Temperature Data | Duration:' + interval +' days.'
			},

			subtitle: {
				text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
			},

			tooltip: {
		    	pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
		    	valueDecimals: 1
		    },

			series: seriesOptions,

			exporting: {
	            width: 1000
	        }

		},function(chart){
            // Last point in graph...
            	document.getElementById("loading").style.display = "none"; //hide the loading text

                showLastPointTooltip(chart);
        });
	};

});


function showLastPointTooltip(objHighStockchart){
    // show tooltip for last point
    var points=[];
    if(objHighStockchart)
    {
        for(var i=0;i<objHighStockchart.series.length;i++)

                points.push(objHighStockchart.series[i].points[objHighStockchart.series[i].points.length-1]);


            objHighStockchart.tooltip.refresh(points);


    };
    console.log('DONE')

};

</script>

<div id="loading" sytle="font-weight:bold;"></div>

<div id="container" style="height: 500px; min-width: 500px"></div> <!-- load the charts -->

</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Upwey Temperatures</title>
	</head>
	<script type="text/javascript" src="/javascript/jquery_1.8.2/jquery.min.js"></script>
	<script src="http://code.highcharts.com/stock/highstock.js"></script>
	<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
	<script type="text/javascript">


	//example url to call
	// index_hs_temps.php?interval=7&loco=lexie
	// whereby interval=# of days or 'all' for all of the data
	// whereby loco=location for example outside1 or kitchen
	//
	function getQueryVariable(variable)
	{
	var query = window.location.search.substring(1);
	var vars = query.split("&");
	for (var i=0;i<vars.length;i++) {
	var pair = vars[i].split("=");
	if(pair[0] == variable){return pair[1];}
	}
	return(false);
	};

	var interval = getQueryVariable("interval");

	var names = getQueryVariable("names"); //not being used atm, need to work out how to fix this


	console.log(interval + ' days - locations ' +names);



	$(function() {

	var names = ['outside1', 'master', 'lounge', 'kitchen', 'lexie'],
	seriesCounter = 0,
	seriesOptions = [],
	colors = Highcharts.getOptions().colors;

	console.log('starting to retrive data');

	$.each(names, function(i, name) {
	document.getElementById("loading").innerHTML = '<B>Loading please wait.. retrieving '+ interval +' day/s worth of data</B>';

	//json_hs_temps.php?interval=7&location=outside1 <-- this will return JSON data for the past 7 days for outside1 temperature sensor.
	$.getJSON("json_hs_temps.php?interval="+interval+"&location="+ name.toLowerCase(), function(data) {
	console.log( "success with grabing json data for " + name.toLowerCase());

	seriesOptions[i] = {
	name: name + ' Temperature',
	data: data,
	color: colors[i],
	type: 'line'
	};

	// As we're loading the data asynchronously, we don't know what order it will arrive. So
	// we keep a counter and create the chart when all the data is loaded.
	seriesCounter++;

	if (seriesCounter == names.length) {
	createChart();
	}
	});
	});

	// create the chart when all data is loaded
	function createChart() {

	Highcharts.setOptions({
	global: {
	useUTC: false
	}
	});

	// Create a timer, to test how long this takes to load
	var start = + new Date();

	// Create the chart
	$('#container').highcharts('StockChart', {

	chart: {
	events: {
	load: function(chart) {
	this.setTitle(null, {
	text: 'This chart was built on '+ new Date() + ' in ' + (new Date() - start) +'ms'
	});


	}
	}
	},
	rangeSelector: {
	buttons: [{
	type: 'hour',
	count: 1,
	text: '1hr'
	}, {
	type: 'hour',
	count: 3,
	text: '3hr'
	}, {
	type: 'hour',
	count: 12,
	text: '12hr'
	}, {
	type: 'day',
	count: 1,
	text: '1d'
	}, {
	type: 'day',
	count: 3,
	text: '3d'
	}, {
	type: 'day',
	count: 5,
	text: '5d'
	}, {
	type: 'day',
	count : 7,
	text: '7d'
	}, {
	type: 'month',
	count : 1,
	text: '1m'
	}, {
	type: 'month',
	count : 3,
	text: '3m'
	}, {
	type: 'month',
	count: 6,
	text: '6m'
	}, {
	type: 'year',
	count: 1,
	text: '1y'
	}, {
	type: 'all',
	text: 'All'
	}],
	selected: 2
	},

	yAxis: {
	type: 'linear',
	title: {
	text: 'Temperature (C)'
	}
	},

	title: {
	text: 'Historical Temperature Data \| Duration:' + interval +' days.'
	},

	subtitle: {
	text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
	},

	tooltip: {
	pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
	valueDecimals: 1
	},

	series: seriesOptions,

	exporting: {
	width: 1000
	}

	},function(chart){
	// Last point in graph...
	document.getElementById("loading").style.display = "none"; //hide the loading text

	showLastPointTooltip(chart);
	});
	};

	});


	function showLastPointTooltip(objHighStockchart){
	// show tooltip for last point
	var points=[];
	if(objHighStockchart)
	{
	for(var i=0;i<objHighStockchart.series.length;i++)

	points.push(objHighStockchart.series[i].points[objHighStockchart.series[i].points.length-1]);


	objHighStockchart.tooltip.refresh(points);


	};
	console.log('DONE')

	};

	</script>

	<div id="loading" sytle="font-weight:bold;"></div>

	<div id="container" style="height: 500px; min-width: 500px"></div> <!-- load the charts -->

	</body>
	</html>