I wish to be able to determine the minimum and maximum for each series in the below (series being pH, ORP, Tank, Heater and Room). Tank, Heater and Room should all be written to the same min and max variable as they display on the same scale (ie. Show me the min or max of any of the 3 sets of data – being Min of 22.20 & Max being 24.33 from the sample data below)
The raw data being imported is in the following format (there are far more columns)
For a complete sample see http://macca.myreef.info/24hr_final.csv
Sample:
pnt_1 1375935000.00 1375935300.00 1375935600.00 1375935900.00
pH 8.34 8.35 8.36 8.36
ORP 415.24 415.44 415.05 414.74
Tank 24.27 24.26 24.20 24.22
Heater 24.33 24.30 24.30 24.30
Room 22.20 22.32 22.44 22.52
Where pnt_1 is rubbish, column 1 is the "header", row 1 is epoch and the remaining data is the value (at that epoch time).
Hope I haven't lost you as yet.
Using the code below I have managed to get Highcharts to display almost as I want it – see http://macca.myreef.info/test1.html
I want to be able to
- Declare the min and max of each row (treating the
tank,HeaterandRoomrow as 1) as a variable. - Use the min and max variables to set the axis
Eg. If minph = 8.34 and maxph = 8.36 I might declare
var minphscale = minph*0.9
var maxphscale = maxph*1.1
The reason for wanting to do this as variables is I am also working of presenting the most recent data as a Highchart of type gauge where I will use the variables to set the “bands” of color to indicate the amount of swing any given series has had as well as the actual series value as being the most recent sample. The variables minph and maxph would determine the band (Geez – I hope that makes sense.)
Current code is
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<meta http-equiv = "refresh" content = "180">
<meta http-equiv = "cache-control" content = "no-cache">
<title>Daily Data</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script src = "http://code.jquery.com/jquery-1.9.1.js"></script>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript" src="/js/highcharts.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
var minph = 13;
$(document).ready(function() {
var options = {
credits: {
enabled: false
},
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25,
zoomType: 'x',
spacingRight: 2
},
title: {
text: '24hr history',
x: -20 //center
},
subtitle: {
text: 'Temp',
x: -20
},
xAxis: {
tickInterval:60,
categories: []
},
yAxis: [
{ //Primary [0]
title: {
text: 'orp'
},
id: 'ORP',
opposite: true,
min: 350,
max: 450
},
{ //Secondary [1]
title: {
text: 'pH'
},
id: 'pH',
min: 8,
max: 9
},
{ //Tertiary [2]
title: {
text: 'Temp'
},
id: 'Temp',
min: 20,
max: 30,
opposite: false
}],
tooltip: {
crosshairs: true,
shared: true
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
borderWidth: 1
},
series: []
};
$.get('24hr_final.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// Below is an attempt to change UNIX EPOCH to Java EPOCH
// and load into series1 as a date
if (lineNo === 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) {
var javaepoch = (item) / 0.001;
var date = new Date(javaepoch);
options.xAxis.categories.push(date);
}
});
} else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
// Set the Axis for each data type
series.name = item;
if (item == 'pH') {
series.yAxis = item;
}
if (item == 'ORP' ) {
series.yAxis = item;
}
if (item == 'Tank' ) {
series.yAxis = 'Temp';
}
if (item == 'Heater' ) {
series.yAxis = 'Temp';
}
if (item == 'Room' ) {
series.yAxis = 'Temp';
}
// Finished mods for axis
} else {
var minph = 5;
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<div id = "container" style = "width: 100%; height: 400px; margin: 0 auto">
</div>
<script>
document.write ("Min pH is " + minph + ". <BR>")
</script>
Test 1
</body>
</html>