sarasantos/chart-spline.html Secret

## chart-spline.html
<!DOCTYPE HTML><html>
<!-- Rui Santos - Complete project details at https://RandomNerdTutorials.com

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. -->
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <style>
    body {
      min-width: 310px;
    	max-width: 800px;
    	height: 400px;
      margin: 0 auto;
    }
    h2 {
      font-family: Arial;
      font-size: 2.5rem;
      text-align: center;
    }
  </style>
</head>
<body>
  <h2>ESP Weather Station</h2>
  <div id="chart-temperature" class="container"></div>
  <div id="chart-humidity" class="container"></div>
  <div id="chart-pressure" class="container"></div>
</body>
<script>
var chartT = new Highcharts.Chart({
  chart:{
    renderTo : 'chart-temperature',
    type: 'spline'
  },
  title: { text: 'BME280 Temperature' },
  series: [{
    showInLegend: false,
    data: []
  }],
  plotOptions: {
    line: { animation: false,
      dataLabels: { enabled: true }
    },
    series: { color: '#059e8a' }
  },
  xAxis: { type: 'datetime',
    dateTimeLabelFormats: { second: '%H:%M:%S' }
  },
  yAxis: {
    title: { text: 'Temperature (Celsius)' }
    //title: { text: 'Temperature (Fahrenheit)' }
  },
  credits: { enabled: false }
});
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var x = (new Date()).getTime(),
          y = parseFloat(this.responseText);
      //console.log(this.responseText);
      if(chartT.series[0].data.length > 40) {
        chartT.series[0].addPoint([x, y], true, true, true);
      } else {
        chartT.series[0].addPoint([x, y], true, false, true);
      }
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 30000 ) ;

var chartH = new Highcharts.Chart({
  chart:{ renderTo:'chart-humidity' },
  title: { text: 'BME280 Humidity' },
  series: [{
    showInLegend: false,
    data: []
  }],
  plotOptions: {
    line: { animation: false,
      dataLabels: { enabled: true }
    }
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { second: '%H:%M:%S' }
  },
  yAxis: {
    title: { text: 'Humidity (%)' }
  },
  credits: { enabled: false }
});
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var x = (new Date()).getTime(),
          y = parseFloat(this.responseText);
      //console.log(this.responseText);
      if(chartH.series[0].data.length > 40) {
        chartH.series[0].addPoint([x, y], true, true, true);
      } else {
        chartH.series[0].addPoint([x, y], true, false, true);
      }
    }
  };
  xhttp.open("GET", "/humidity", true);
  xhttp.send();
}, 30000 ) ;

var chartP = new Highcharts.Chart({
  chart:{ renderTo:'chart-pressure' },
  title: { text: 'BME280 Pressure' },
  series: [{
    showInLegend: false,
    data: []
  }],
  plotOptions: {
    line: { animation: false,
      dataLabels: { enabled: true }
    },
    series: { color: '#18009c' }
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { second: '%H:%M:%S' }
  },
  yAxis: {
    title: { text: 'Pressure (hPa)' }
  },
  credits: { enabled: false }
});
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var x = (new Date()).getTime(),
          y = parseFloat(this.responseText);
      //console.log(this.responseText);
      if(chartP.series[0].data.length > 40) {
        chartP.series[0].addPoint([x, y], true, true, true);
      } else {
        chartP.series[0].addPoint([x, y], true, false, true);
      }
    }
  };
  xhttp.open("GET", "/pressure", true);
  xhttp.send();
}, 30000 ) ;
</script>
</html>
{"mode":"full","isActive":false}
	<!DOCTYPE HTML><html>
	<!-- Rui Santos - Complete project details at https://RandomNerdTutorials.com

	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. -->
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://code.highcharts.com/highcharts.js"></script>
	<style>
	body {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto;
	}
	h2 {
	font-family: Arial;
	font-size: 2.5rem;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<h2>ESP Weather Station</h2>
	<div id="chart-temperature" class="container"></div>
	<div id="chart-humidity" class="container"></div>
	<div id="chart-pressure" class="container"></div>
	</body>
	<script>
	var chartT = new Highcharts.Chart({
	chart:{
	renderTo : 'chart-temperature',
	type: 'spline'
	},
	title: { text: 'BME280 Temperature' },
	series: [{
	showInLegend: false,
	data: []
	}],
	plotOptions: {
	line: { animation: false,
	dataLabels: { enabled: true }
	},
	series: { color: '#059e8a' }
	},
	xAxis: { type: 'datetime',
	dateTimeLabelFormats: { second: '%H:%M:%S' }
	},
	yAxis: {
	title: { text: 'Temperature (Celsius)' }
	//title: { text: 'Temperature (Fahrenheit)' }
	},
	credits: { enabled: false }
	});
	setInterval(function ( ) {
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	var x = (new Date()).getTime(),
	y = parseFloat(this.responseText);
	//console.log(this.responseText);
	if(chartT.series[0].data.length > 40) {
	chartT.series[0].addPoint([x, y], true, true, true);
	} else {
	chartT.series[0].addPoint([x, y], true, false, true);
	}
	}
	};
	xhttp.open("GET", "/temperature", true);
	xhttp.send();
	}, 30000 ) ;

	var chartH = new Highcharts.Chart({
	chart:{ renderTo:'chart-humidity' },
	title: { text: 'BME280 Humidity' },
	series: [{
	showInLegend: false,
	data: []
	}],
	plotOptions: {
	line: { animation: false,
	dataLabels: { enabled: true }
	}
	},
	xAxis: {
	type: 'datetime',
	dateTimeLabelFormats: { second: '%H:%M:%S' }
	},
	yAxis: {
	title: { text: 'Humidity (%)' }
	},
	credits: { enabled: false }
	});
	setInterval(function ( ) {
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	var x = (new Date()).getTime(),
	y = parseFloat(this.responseText);
	//console.log(this.responseText);
	if(chartH.series[0].data.length > 40) {
	chartH.series[0].addPoint([x, y], true, true, true);
	} else {
	chartH.series[0].addPoint([x, y], true, false, true);
	}
	}
	};
	xhttp.open("GET", "/humidity", true);
	xhttp.send();
	}, 30000 ) ;

	var chartP = new Highcharts.Chart({
	chart:{ renderTo:'chart-pressure' },
	title: { text: 'BME280 Pressure' },
	series: [{
	showInLegend: false,
	data: []
	}],
	plotOptions: {
	line: { animation: false,
	dataLabels: { enabled: true }
	},
	series: { color: '#18009c' }
	},
	xAxis: {
	type: 'datetime',
	dateTimeLabelFormats: { second: '%H:%M:%S' }
	},
	yAxis: {
	title: { text: 'Pressure (hPa)' }
	},
	credits: { enabled: false }
	});
	setInterval(function ( ) {
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	var x = (new Date()).getTime(),
	y = parseFloat(this.responseText);
	//console.log(this.responseText);
	if(chartP.series[0].data.length > 40) {
	chartP.series[0].addPoint([x, y], true, true, true);
	} else {
	chartP.series[0].addPoint([x, y], true, false, true);
	}
	}
	};
	xhttp.open("GET", "/pressure", true);
	xhttp.send();
	}, 30000 ) ;
	</script>
	</html>
	{"mode":"full","isActive":false}