Community discussion about Reef Angel Controllers and reefing related subjects
http://forum.reefangel.com/
Code: Select all
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=.5, maximum-scale=.5, minimum-scale=.5, target-densitydpi=device-dpi" />
<meta name="msapplication-tap-highlight" content="no" />
<link href='http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css' rel='stylesheet'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src='http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js'></script>
<title>Reef Angel U-App</title>
<script type="text/javascript">
$(function () {
$.mobile.loading( 'show', {
text: 'Connecting to Portal',
textVisible: true,
theme: 'b',
html: ""
});
Highcharts.setOptions({
global: {
useUTC: false
}
});
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
seriesID = 0,
names = [
'PH'
],
colors = Highcharts.getOptions().colors;
$.each(names, function (i, name) {
$.getJSON('http://forum.reefangel.com/status/jsonp.aspx?id=reefangel&filter=' + name.toLowerCase() + '&callback=?', function (data) {
var pcolor;
var tname;
var ydec;
var yunit;
if (name == "PH") {
pcolor = '#669900'
tname = 'pH'
ydec = 2
yunit = 'pH'
}
else if (name == "PHE") {
pcolor = '#447700'
tname = 'pH Expansion'
ydec = 2
yunit = 'pH'
}
else if (name == "SAL") {
pcolor = '#000066'
tname = 'Salinity'
ydec = 1
yunit = 'ppt'
}
else if (name == "ORP") {
pcolor = '#330000'
tname = 'ORP'
ydec = 0
yunit = 'mV'
}
else if (name == "T1") {
pcolor = '#FF0000'
tname = 'Temp 1'
ydec = 1
yunit = '°'
}
else if (name == "T2") {
pcolor = '#FF8800'
tname = 'Temp 2'
ydec = 1
yunit = '°'
}
else if (name == "T3") {
pcolor = '#9900CC'
tname = 'Temp 3'
ydec = 1
yunit = '°'
}
else {
pcolor = '#FF0000'
tname = 'PH'
ydec = 0
yunit = ''
}
if (data.length) {
seriesOptions[seriesID] = {
dataGrouping: {
smoothed: true
},
name: tname,
color: pcolor,
tooltip: {
yDecimals: ydec,
ySuffix: yunit
},
data: data
};
seriesID++;
}
// 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(data.length==0)
{
$('#container').html("No data to display");
$.mobile.loading( "hide" );
}
else
if (seriesCounter == names.length) {
createChart();
$.mobile.loading( "hide" );
}
});
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'spline'
},
title: {
text: 'Reef Angel Controller Web Chart'
},
subtitle: {
text: 'Parameters logged for the past 7 days'
},
credits: {
enabled: false
},
legend: {
enabled: true,
//align: 'right',
//backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
//layout: 'vertical',
verticalAlign: 'top',
y: 100,
shadow: true
},
rangeSelector: {
buttons: [{
type: 'minute',
count: 60,
text: '1h'
}, {
type: 'minute',
count: 720,
text: '12h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'all',
text: '7d'
}],
selected: 2,
inputEnabled: false
},
navigator: {
xAxis: {
type: 'datetime',
maxZoom: 3600000, // 1 hour
dateTimeLabelFormats: { // don't display the dummy year
second: '%I:%M:%S %p',
minute: '%I:%M %p',
hour: '%b/%e',
day: '%b/%e',
week: '%b/%e'
}
}
},
xAxis: {
type: 'datetime',
maxZoom: 3600000, // 1 hour
dateTimeLabelFormats: { // don't display the dummy year
second: '%I:%M:%S %p',
minute: '%I:%M %p',
hour: '%I:%M %p',
day: '%b/%e',
week: '%b/%e'
}
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: 'silver'
}]
},
tooltip: {
borderColor: 'silver',
xDateFormat: '%A, %b %e, %l:%M %p',
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>'
},
series: seriesOptions
});
}
});
</script>
</head>
<body>
<script type="text/javascript" src="http://forum.reefangel.com/js/highstock.js"></script>
<div id="container" style="height: 500px; min-width: 600px"></div>
</body>
</html>
When using this with the pwm channels it uses the same color coding for both channels. Is there a way to change that?rimai wrote:I created a page for the new U-App that should work for your purpose:
http://forum.reefangel.com/status/appch ... &filter=t2
You can just append filters.
Thanks, that looks better. The only weird thing (minor) is that on the legend it puts both, pwma & pwmd, for each line. It doesn't do this for temperature.rimai wrote:I changed it so it uses a random color.
Try it again.
It's fixed, thanks again. Really like my RA equipment and appreciate all you support Roberto.rimai wrote:It's a bug. Thanks for reporting.
I fixed it. Try again.
Code: Select all
You can see the JS that occurs in behind the scene:
[code]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=.5, maximum-scale=.5, minimum-scale=.5, target-densitydpi=device-dpi" />
<meta name="msapplication-tap-highlight" content="no" />
<link href='http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css' rel='stylesheet'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src='http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js'></script>
<title>Reef Angel U-App</title>
<script type="text/javascript">
$(function () {
$.mobile.loading( 'show', {
text: 'Connecting to Portal',
textVisible: true,
theme: 'b',
html: ""
});
Highcharts.setOptions({
global: {
useUTC: false
}
});
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
seriesID = 0,
names = [
'T1'
],
colors = Highcharts.getOptions().colors;
$.each(names, function (i, name) {
$.getJSON('http://forum.reefangel.com/status/jsonp.aspx?id=reefangel&filter=' + name.toLowerCase() + '&callback=?', function (data) {
var pcolor;
var tname;
var ydec;
var yunit;
if (name == "PH") {
pcolor = '#669900'
tname = 'pH'
ydec = 2
yunit = 'pH'
}
else if (name == "PHE") {
pcolor = '#447700'
tname = 'pH Expansion'
ydec = 2
yunit = 'pH'
}
else if (name == "SAL") {
pcolor = '#000066'
tname = 'Salinity'
ydec = 1
yunit = 'ppt'
}
else if (name == "ORP") {
pcolor = '#330000'
tname = 'ORP'
ydec = 0
yunit = 'mV'
}
else if (name == "T1") {
pcolor = '#FF0000'
tname = 'Temp 1'
ydec = 1
yunit = '°'
}
else if (name == "T2") {
pcolor = '#FF8800'
tname = 'Temp 2'
ydec = 1
yunit = '°'
}
else if (name == "T3") {
pcolor = '#9900CC'
tname = 'Temp 3'
ydec = 1
yunit = '°'
}
else {
pcolor = getRandomColor()
tname = name.toUpperCase()
ydec = 0
yunit = ''
}
if (data.length) {
seriesOptions[seriesID] = {
dataGrouping: {
smoothed: true
},
name: tname,
color: pcolor,
tooltip: {
yDecimals: ydec,
ySuffix: yunit
},
data: data
};
seriesID++;
}
// 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(data.length==0)
{
$('#container').html("No data to display");
$.mobile.loading( "hide" );
}
else
if (seriesCounter == names.length) {
createChart();
$.mobile.loading( "hide" );
}
});
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'spline'
},
title: {
text: 'Reef Angel Controller Web Chart'
},
subtitle: {
text: 'Parameters logged for the past 7 days'
},
credits: {
enabled: false
},
legend: {
enabled: true,
//align: 'right',
//backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
//layout: 'vertical',
verticalAlign: 'top',
y: 100,
shadow: true
},
rangeSelector: {
buttons: [{
type: 'minute',
count: 60,
text: '1h'
}, {
type: 'minute',
count: 720,
text: '12h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'all',
text: '7d'
}],
selected: 2,
inputEnabled: false
},
navigator: {
xAxis: {
type: 'datetime',
maxZoom: 3600000, // 1 hour
dateTimeLabelFormats: { // don't display the dummy year
second: '%I:%M:%S %p',
minute: '%I:%M %p',
hour: '%b/%e',
day: '%b/%e',
week: '%b/%e'
}
}
},
xAxis: {
type: 'datetime',
maxZoom: 3600000, // 1 hour
dateTimeLabelFormats: { // don't display the dummy year
second: '%I:%M:%S %p',
minute: '%I:%M %p',
hour: '%I:%M %p',
day: '%b/%e',
week: '%b/%e'
}
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: 'silver'
}]
},
exporting: {
url: '/export/index.php',
filename: 'Reef Angel Web Chart T1'
},
tooltip: {
borderColor: 'silver',
xDateFormat: '%A, %b %e, %l:%M %p',
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>'
},
series: seriesOptions
});
}
});
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</head>
<body>
<script type="text/javascript" src="http://forum.reefangel.com/js/highstock.js"></script>
<script type="text/javascript" src="http://forum.reefangel.com/js/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 600px"></div>
</body>
</html>