Объявите минимальное и максимальное значения из CSV
Я хотел бы иметь возможность определить минимум и максимум для каждой серии ниже (серия pH, ORP, Tank, Heater а также Room). Tank, Heater а также Room все они должны быть записаны в одну и ту же переменную min и max, поскольку они отображаются в одном и том же масштабе (т. е. покажите мне минимальное или максимальное значение любого из 3 наборов данных - минимальное значение 22,20 и максимальное значение 24,33 из приведенных ниже примеров данных)
Импортируемые необработанные данные имеют следующий формат (столбцов гораздо больше)
Для полного образца см. http://macca.myreef.info/24hr_final.csv
Образец:
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
куда pnt_1 мусор, столбец 1 - "заголовок", строка 1 - epoch а остальные данные - это значение (в то время).
Надеюсь, я еще не потерял тебя.
Используя приведенный ниже код, мне удалось заставить Highcharts отображать почти так, как я хочу - см. http://macca.myreef.info/test1.html
Я хочу быть в состоянии
- Объявите мин и макс каждой строки (рассматривая
tank,Heaterа такжеRoomстрока как 1) как переменная. - Используйте переменные min и max для установки оси
Например. Если minph = 8.34 а также maxph = 8.36 Я мог бы заявить
var minphscale = minph*0.9
var maxphscale = maxph*1.1
Причина, по которой я хочу сделать это в качестве переменных, заключается в том, что я также работаю над тем, чтобы представить самые последние данные в виде Highchart of type gauge, где я буду использовать переменные, чтобы установить "полосы" цвета, чтобы указать количество колебаний, которые есть у каждой данной серии. имел, а также фактическое значение серии, как самый последний образец. Переменные minph а также maxph будет определять группу (Geez - я надеюсь, что это имеет смысл.)
Текущий код
<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>
1 ответ
Ну, я думаю, вы можете сделать это следующим образом:
else {
var minph = 5,
val = parseFloat(item);
series.data.push(val);
// get min and max
series.minVal = series.minVal < val ? series.minVal : val;
series.maxVal = series.maxVal > val ? series.maxVal : val;
}
Затем перед созданием графика установите для подключенного yAxis minVal и maxVal как min и max. Если вы хотите, чтобы три строки были соединены с одним yAxis, сравните эти строки minVal и maxVal и выберите их минимальное и максимальное значения.