2013-08-09 2 views
1

Я желаю, чтобы быть в состоянии определить минимальное и максимальное значение для каждой серии в приведенной ниже (серия будучи pH, ORP, Tank, Heater и Room). Tank, , Heater и Room должны быть записаны в одну и ту же минимальную и максимальную переменные, пока они отображаются в одном масштабе (т. Е. Покажите мне мин или максимум любого из трех наборов данных - значение Мин. 22.20 & Максимум 24,33 от выборочные данные ниже)Объявляет минимальное и максимальное значения из CSV

исходные данные, импортируемые в следующем формате (существует гораздо больше столбцов)

Для полного образца см 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

Я хочу, чтобы иметь возможность

  1. Объявите мин и макс каждой строки (лечения tank, Heater и Room строка как 1) в качестве переменной.
  2. Используйте минимальные и максимальные переменные для установки оси

например,. Если minph = 8.34 и maxph = 8.36 я мог бы объявить

var minphscale = minph*0.9 
var maxphscale = maxph*1.1 

Причины, побуждающее желание сделать это как переменный я также работаю представление самого последние данных, как Highchart типа датчика, где я буду использовать переменные, чтобы установить « полосы "цвета, чтобы указать количество колебаний каждой данной серии, а также фактическое значение серии как самый последний образец. Переменные 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> 

ответ

0

Ну, я думаю, что вы можете сделать это таким образом:

   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 и выберите минимальное и максимальное значение из них.

+0

Спасибо за это. Код работал без ошибок, но я не уверен, что понимаю, как назначить значения min и max. Как легко положить a (уравнение) {установить переменную} для проверки как min, так и max? – Macca

+0

Это должно быть проще, что-то вроде этого: 'options.yAxis [0] .min = series [0] .minVal;' Конечно, индексы должны совпадать. –

Смежные вопросы