ESP8266 DHT22

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>


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

CSS

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

JavaScript

var feeds = ["77150"],
  limit = 2000,
  urlTemplate = _.template("https://api.thingspeak.com/channels/<%=channel%>/feeds.json?results=<%=limit%>"),
  tempField = "field1",
  humField = "field2",
  heatIndex = "field3"

$(function() {

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

  var d1 = $.ajax(urlTemplate({
      channel: feeds[0],
      limit: limit
    }));

  draw();
  
  $("input[type='checkbox']").on("change", draw);
  
  function draw() {

  $.when(d1).done(function(data) {

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

    _.each([data], 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 heatIndexSeries = _.map(ddd.feeds, function(item) {
        return [Date.parse(item.created_at), Number(item[heatIndex])];
      });
      
      var dewPointSeries = _.map(ddd.feeds, function(item) {
        var humidity = Number(item[humField]),
          temp = Number(item[tempField]),
          gamma = Math.log(humidity / 100) + b * temp / (c + temp),
          dewPoint = c * gamma / (b - gamma);

        return [Date.parse(item.created_at), dewPoint];
      });

        series.push({
          type: 'area',
          name: "temperature",
          data: temperatureSeries
        })

        /*series.push({
          type: 'area',
          name: "humidity",
          data: humiditySeries
        });*/

        series.push({
          type: 'area',
          name: "heat index",
          data: heatIndexSeries
        });

        series.push({
          type: 'area',
          name: "dew point",
          data: dewPointSeries
        });
    })

    Highcharts.setOptions({
      global: {
        useUTC: false
      }
    });

   ...