Meteostation

by sprilukin

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<span class="sensorGroup" id="sensor1">
    <div>
    Sensor #1
    </div>
    <div>
      <input type="checkbox"  value="temperature">temperature</input>
    </div>
    <div>
      <input type="checkbox"  value="humidity">humidity</input>
    </div>
    <div>
      <input type="checkbox"  value="dewpoint">dew</input>    
    </div>
</span>
<span class="sensorGroup" id="sensor2">
    <div>
    Sensor #2
    </div>
    <div>
      <input type="checkbox" checked=checked value="temperature">temperature</input>
    </div>
    <div>
      <input type="checkbox" checked=checked value="humidity">humidity</input>
    </div>
    <div>
      <input type="checkbox" checked=checked value="dewpoint">dew</input>    
    </div>
</span>
<span class="sensorGroup" id="sensor3">
    <div>
    Sensor #3
    </div>
    <div>
      <input type="checkbox" checked=checked value="temperature">temperature</input>
    </div>
    <div>
      <input type="checkbox" checked=checked value="humidity">humidity</input>
    </div>
    <div>
      <input type="checkbox" checked=checked value="dewpoint">dew</input>    
    </div>
</span>

<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>

CSS

span.sensorGroup {
  display: inline;
  float: left;
}

JavaScript

var feeds = ["76301", "76353", "76355"],
  api_keys = [
    "4X58J49KRXVI4TEI",
    "30ZBFAA2PF21QQKI",
    "E2LIX9GG7KQHDLBE"
  ],
  urlTemplate = _.template("https://api.thingspeak.com/channels/<%=channel%>/feeds.json?results=100&api_key=<%=api_key%>"),
  tempField = "field2",
  humField = "field3";

$(function() {

  var deferred = $.Deferred();
  results = [];

  var d1 = $.ajax(urlTemplate({
      channel: feeds[0],
      api_key: api_keys[0]
    })),
    d2 = $.ajax(urlTemplate({
      channel: feeds[1],
      api_key: api_keys[1]
    })),
    d3 = $.ajax(urlTemplate({
      channel: feeds[2],
      api_key: api_keys[2]
    }));

  $.when(d1).done(function(data) {
    results[0] = data;
  });
  $.when(d2).done(function(data) {
    results[1] = data;
  });
  $.when(d3).done(function(data) {
    results[2] = data;
  });


  draw();
  
  $("input[type='checkbox']").on("change", draw);
  
  function draw() {
  var tempChecked = [];
  $("input[value='temperature']").each(function(i, el) {
    tempChecked.push($(el).is(":checked"));
  });

  var humChecked = [];
  $("input[value='humidity']").each(function(i, el) {
    humChecked.push($(el).is(":checked"));
  });

  var dewChecked = [];
  $("input[value='dewpoint']").each(function(i, el) {
    dewChecked.push($(el).is(":checked"));
  });

console.log(dewChecked);

  $.when(d1, d2, d3).done(function() {
    data1 = results[0];
    data2 = results[1];
    data3 = results[2];

    var series = [],
      b = 17.62, //water vapor
      c = 243.5; //barometric pressure

    _.each([data1, data2, data3], function(ddd, i) {
      var temperatureSeries = _.map(ddd.feeds, function(item) {
        return [Date.parse(item.created_at), Number(item[tempField])];
      });

      var humiditySeries = _.map(ddd.feeds, function(item) {
        return [Date.parse(item.created_at), Number(item[humField])];
      });

      var dewPointSeries = _.map(ddd.feeds, function(item) {
        var humidity = Number(item[humField]),
        ...