Skip to content

Instantly share code, notes, and snippets.

@matbor

matbor/index.php

Last active August 29, 2015 14:04
Show Gist options
  • Save matbor/16c3005389907a069ead to your computer and use it in GitHub Desktop.
Save matbor/16c3005389907a069ead to your computer and use it in GitHub Desktop.
Download ZIP
This is now working for me... thought i should post the code. highcharts example, for stackoverflow question. http://stackoverflow.com/questions/24911544/trying-to-load-flags-with-my-temperature-data-from-json-files
Raw
index.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Historical Temperature Data</title>
</head>
<style type="text/css">
#bubbles {
display: block;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
}
#loadingtext {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#container {
margin-top: -200px
}
</style>
<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 src="query.js"></script>
<script type="text/javascript">
//using the url query grabber/decoder from https://github.com/Nijikokun/query-js
//example url to call
// index_hs_temps.php?location[]=outside1&location[]=master&interval=1&querytype=avgall
// whereby interval=# of days
// whereby sensor location for example outside1 or kitchen
// whereby querytype is the type query we are running
//
var interval = query.get('interval')
var locations = query.get('location');
var querytype = query.get('querytype');
var flags = query.get('flags');
console.log('Query recieved from URL: ' + interval + ' day/s | FLAGS: ' + flags + ' | Query Type: ' + querytype + ' | Locations array:');
console.log(locations);
$(function() {
var names = locations,
seriesCounter = 0,
seriesOptions = [],
colors = Highcharts.getOptions().colors;
console.log('starting to retrive data');
// Create a timer, we use this to tell how long it took to load.
var start = + new Date();
//grab all the location temperatures
$.each(names, function(i, name) {
//this spinning bubble isn't working atm due to the ajax calls i believe
document.getElementById("loadwait").style.visibility = 'visible'; //visible or hidden
document.getElementById("loadingtext").innerHTML = '<B>Loading, please wait... retrieving data</B>';
//json_hs_temps.php?interval=7&location=outside1 <-- this will return JSON data for the past 7 days for outside1 temperature sensor.
// this is getting JSON data like this, [[1406124028000,5.8],[1406124098000,5.8],[1406124169000,5.8],[1406124239000,5.8],[1406124309000,5.7],[1406124380000,5.6]]
$.ajax({
url:"jsonloaddata.php?interval="+interval+"&location="+ name.toLowerCase()+"&querytype="+querytype.toLowerCase(),
dataType:'json',
async:false,
success:function(data) {
// do stuff.
console.log( "success with grabing json data for " + name.toLowerCase());
seriesOptions[i] = {
name: name + ' Temperature',
data: data,
color: colors[i],
id: 'dataseries',
type: 'line',
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
valueDecimals: 1
}
};
}
})
// 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) {
//we have finished loading the temperature data, so lets check if any flags that need adding.
// this is getting JSON data like this, [{"x":1405584416000,"title":"1","text":"matthew enter home"}]
if(flags === 'true'){
console.log('Loading Flags');
i++; //need to increment the counter again
$.ajax({
url:"jsonloaddata.php?querytype=owntracks",
dataType:'json',
async:false,
success:function(data) {
console.log( "success with grabing json data for flags");
//flags or events
seriesOptions[i] = ({
type: 'flags',
shape: 'circlepin',
//onSeries: 'dataseries',
data: data
});
}
})
}
};
});
console.log(seriesOptions);
//all done, lets create that chart now.
createChart();
// create the chart when all data is loaded
function createChart() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
events: {
load: function(chart) {
this.setTitle(null, {
text: 'Built on '+ new Date() + ' in ' + ((new Date() - start) /1000) +' seconds'
});
}
}
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1hr'
}, {
type: 'hour',
count: 3,
text: '3hr'
}, {
type: 'hour',
count: 6,
text: '6hr'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'day',
count: 6,
text: '6d'
}, {
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 +' day/s.'
},
subtitle: {
text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
},
series: seriesOptions,
exporting: {
width: 1000
}
},function(chart){
// Last point in graph...
document.getElementById("loadwait").style.visibility = 'hidden'; //visible or hidden
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="loadwait">
<img id="bubbles" src="loading-spinning-bubbles.svg"></img>
<br>
<div id="loadingtext"></div>
</div>
<div id="container" style="height: 500px; min-width: 500px;"></div> <!-- load the charts -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment