//ESP Temperature, humitidy and pressure logger based on BME280 sensor and ESP32. Pushes the data to a web database for display. 
//See full project at http://projects.xief.net
//
//Permission is hereby granted, free of charge, to any person obtaining a copy
//of this software and associated documentation files.
//
//The above copyright notice and this permission notice shall be included in all
//copies or substantial portions of the Software.
//
//Using chart.js to display graph. Make sure to have files in /js subfolder.



$(document).ready(function(){
	var script_tag = document.getElementById('linegraph'); //from https://www.gun.io/blog/pass-arguments-to-embedded-javascript-tutorial-example
    var sensorName = script_tag.getAttribute("sensorName");
	var daysback = script_tag.getAttribute("daysback");
	//window.alert(daysback);
	
  $.ajax({
    url : "your domain/logger-esp-fetch-data-chart.php?sensorName=" + sensorName+"&daysback=" + daysback, //change accordingly
    type : "GET",
    success : function(data){
      console.log(data);

      var data_id = [];
      var data_location = [];
      var data_temperature = [];
      var data_humidity = [];
	  var data_pressure = [];
	  var data_reading_time = [];
	  var data_dewPoint = [];
	  
	  var reductor = 1;
      for(var i in data) {
		  if (i%reductor == 0) {
			data_id.push(data[i].id);
			data_location.push(data[i].location);
			data_temperature.push(data[i].temperature);
			data_humidity.push(data[i].humidity);
			data_pressure.push(data[i].pressure);
			data_reading_time.push(data[i].reading_time);
			data_dewPoint.push(data[i].dewPoint);
		  }
      }


	  
	  
      var chartdata = {
        labels: data_reading_time,
        datasets: [
          {
            label: "temperature",
			yAxisID: 'AxTemperature',
            fill: false,
            lineTension: 0,
			borderWidth: 1,
			pointRadius: 2,
            backgroundColor: "rgba(217, 95, 110, 1)",
            borderColor: "rgba(217, 95, 110, 1)",
            pointHoverBackgroundColor: "rgba(217, 95, 110, 1)",
            pointHoverBorderColor: "rgba(217, 95, 110, 1	)",
            data: data_temperature
          },
          {
            label: "humidity",
			yAxisID: 'AxHumidty',
            fill: false,
            lineTension: 0,
			borderWidth: 1,
			pointRadius:1.5,
			position: 'left',
            backgroundColor: "rgba(29, 202, 255, 0.75)",
            borderColor: "rgba(29, 202, 255, 1)",
            pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
            pointHoverBorderColor: "rgba(29, 202, 255, 1)",
            data: data_humidity
          }		  ,
          {
            label: "dewPoint",
			yAxisID: 'AxTemperature',
            fill: false,
            lineTension: 0,
			borderWidth: 1,
			pointRadius:2,
			position: 'left',
            backgroundColor: "rgba(150, 150, 150, 0.75)",
            borderColor: "rgba(150, 150, 150, 1)",
            pointHoverBackgroundColor: "rgba(150, 150, 150, 1)",
            pointHoverBorderColor: "rgba(150, 150, 150, 1)",
            data: data_dewPoint
          }
		  
		  
        ]
      };

      var ctx = $("#mycanvas");

      var LineGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata,
		
		options: {
				title: {
						display: true,
						text: 'Sensor: ' + sensorName
					},
				scales: {
					tooltips: {
						mode: 'x'
						},
					xAxes: [{
						type: 'time',
						time: { //https://stackoverflow.com/questions/45589026/chart-js-showing-time-hhmmss-24-hour-clock-on-xaxis                                                                          
							tooltipFormat: 'YYYY-MM-DD HH:mm',
							displayFormats: {
								millisecond: 'HH:mm:ss.SSS',
								second: 'HH:mm:ss',
								minute: 'HH:mm',
								hour: 'HH'
							}
							},
						scaleLabel: {
							display: true,
							labelString: 'Last ' + daysback*24 + ' hrs'
						}
							
					}],
					yAxes: [{
						id: 'AxTemperature',
						type: 'linear',
						position: 'right',
						scaleLabel: {
							display: true,
							labelString: 'Temperature (C)'
						}
					}, {
						id: 'AxHumidty',
						type: 'linear',
						position: 'right',
						scaleLabel: {
							display: true,
							labelString: 'Humidity (%relH)'
						}
					}]
				}
			}
      });
    },
    error : function(data) {

    }
  });
});