cgarz/CanvasJS_question_sensorDataGraphs.htm Secret

## CanvasJS_question_sensorDataGraphs.htm
<!-- for https://canvasjs.com/forums/topic/zooming-on-graph-changes-it-to-another-graph/ -->
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Sensors Data</title>

      <style>
         body  { background-color: black; }

         #tempContainer, #humidContainer, #pressContainer {height: 520px; width: 100%; }

         table { width:520px; height:520px; color: white; border: 1px solid white;
                  margin-left: auto; margin-right: auto; }

         tr td { width: 50%; border: 1px solid white; text-align: center; }
      </style>

      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script type="text/javascript" src="canvasjs.min.js"></script>

      <script type="text/javascript">
         $(document).ready(function () {
            $.ajax({
               type: "GET",
               url:"tempHumidPressure.csv",
               dataType: "text",
               success: function(data) {processCSV(data);}
            });
         });

         /*TODO: Add highest and lowest values to table ajax get here.*/

         function processCSV(allText) {
            var chart_defaults={ interactivityEnabled: true,
                                 zoomEnabled: true,
                                 backgroundColor: "black",
                                 title:{  fontColor: "white",
                                          fontSize: 25 },
                                 axisX:{  labelFontColor: "white",
                                          titleFontColor: "white",
                                          titleFontSize: 20,
                                          labelFontSize: 15 },
                                 axisY:{  labelFontColor: "white",
                                          titleFontColor: "white",
                                          titleFontSize: 20,
                                          labelFontSize: 15,
                                          gridThickness: 0.25,
                                          interlacedColor: "#06060d",
                                          includeZero: false },
                                 data:[{  type: "line",
                                          xValueType: "dateTime",
                                          lineThickness: 1 }] };

            var allLinesArray = allText.split("\n");
            if( allLinesArray.length > 0 ){
               var points_temp  = [];
               var points_humid = [];
               var points_press = [];

               for (var i = 0; i <= allLinesArray.length-1; i++) {
                  //rowData: Date,Temp,Humid,Pressure
                  //rowData: [0] ,[1] , [2] ,  [3]
                  var rowData = allLinesArray[i].split(",");
                  if(allLinesArray[i].charAt(0) != "#" && rowData && rowData.length > 1) {
                     points_temp.push( { x: new Date(Date.parse(rowData[0])), y:parseFloat(rowData[1]) });
                     points_humid.push({ x: new Date(Date.parse(rowData[0])), y:parseFloat(rowData[2]) });
                     points_press.push({ x: new Date(Date.parse(rowData[0])), y:parseFloat(rowData[3]) });
                  }
               }

               var defaults_temp = jQuery.extend(true, {}, chart_defaults);
               var chart_temp = new CanvasJS.Chart(tempContainer, defaults_temp);
               chart_temp.options.title.text          = "Temprature Readings";
               chart_temp.options.axisY.title         = "Degrees Celsius (°C)";
               chart_temp.options.data[0].dataPoints  = points_temp;
               chart_temp.render();

               var defaults_humid = jQuery.extend(true, {}, chart_defaults);
               var chart_humid = new CanvasJS.Chart(humidContainer, defaults_humid);
               chart_humid.options.title.text         = "Humidity Readings";
               chart_humid.options.axisY.title        = "Relative Humidity (%)";
               chart_humid.options.data[0].dataPoints = points_humid;
               chart_humid.render();

               var defaults_press = jQuery.extend(true, {}, chart_defaults);
               var chart_press = new CanvasJS.Chart(pressContainer, defaults_press);
               chart_press.options.title.text         = "Pressure Readings";
               chart_press.options.axisY.title        = "Hectopascals (hPa)";
               chart_press.options.data[0].dataPoints = points_press;
               chart_press.render();
            }
         }
      </script>
   </head>
   <body>
      <div id="tempContainer"></div>
      <br><hr><br>
      <div id="humidContainer"></div>
      <br><hr><br>
      <div id="pressContainer"></div>
      <br><hr><br>
      <table>
         <tr> <td rowspan=2>Highest temprature</td> <td id="maxTempDate"> </td> </tr>
         <tr>                                       <td id="maxTemp">     </td> </tr>
         <tr> <td rowspan=2>Lowest temprature</td>  <td id="minTempDate"> </td> </tr>
         <tr>                                       <td id="minTemp">     </td> </tr>
         <tr> <td rowspan=2>Highest humidity</td>   <td id="maxHumidDate"></td> </tr>
         <tr>                                       <td id="maxHumid">    </td> </tr>
         <tr> <td rowspan=2>Lowest humidity</td>    <td id="minHumidDate"></td> </tr>
         <tr>                                       <td id="minHumid">    </td> </tr>
         <tr> <td rowspan=2>Highest pressure</td>   <td id="maxPressDate"></td> </tr>
         <tr>                                       <td id="maxPress">    </td> </tr>
         <tr> <td rowspan=2>Lowest pressure</td>    <td id="minPressDate"></td> </tr>
         <tr>                                       <td id="minPress">    </td> </tr>
      </table>
   </body>
</html>
	<!-- for https://canvasjs.com/forums/topic/zooming-on-graph-changes-it-to-another-graph/ -->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Sensors Data</title>

	<style>
	body { background-color: black; }

	#tempContainer, #humidContainer, #pressContainer {height: 520px; width: 100%; }

	table { width:520px; height:520px; color: white; border: 1px solid white;
	margin-left: auto; margin-right: auto; }

	tr td { width: 50%; border: 1px solid white; text-align: center; }
	</style>

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="canvasjs.min.js"></script>

	<script type="text/javascript">
	$(document).ready(function () {
	$.ajax({
	type: "GET",
	url:"tempHumidPressure.csv",
	dataType: "text",
	success: function(data) {processCSV(data);}
	});
	});

	/TODO: Add highest and lowest values to table ajax get here./

	function processCSV(allText) {
	var chart_defaults={ interactivityEnabled: true,
	zoomEnabled: true,
	backgroundColor: "black",
	title:{ fontColor: "white",
	fontSize: 25 },
	axisX:{ labelFontColor: "white",
	titleFontColor: "white",
	titleFontSize: 20,
	labelFontSize: 15 },
	axisY:{ labelFontColor: "white",
	titleFontColor: "white",
	titleFontSize: 20,
	labelFontSize: 15,
	gridThickness: 0.25,
	interlacedColor: "#06060d",
	includeZero: false },
	data:[{ type: "line",
	xValueType: "dateTime",
	lineThickness: 1 }] };

	var allLinesArray = allText.split("\n");
	if( allLinesArray.length > 0 ){
	var points_temp = [];
	var points_humid = [];
	var points_press = [];

	for (var i = 0; i <= allLinesArray.length-1; i++) {
	//rowData: Date,Temp,Humid,Pressure
	//rowData: [0] ,[1] , [2] , [3]
	var rowData = allLinesArray[i].split(",");
	if(allLinesArray[i].charAt(0) != "#" && rowData && rowData.length > 1) {
	points_temp.push( { x: new Date(Date.parse(rowData[0])), y:parseFloat(rowData[1]) });
	points_humid.push({ x: new Date(Date.parse(rowData[0])), y:parseFloat(rowData[2]) });
	points_press.push({ x: new Date(Date.parse(rowData[0])), y:parseFloat(rowData[3]) });
	}
	}

	var defaults_temp = jQuery.extend(true, {}, chart_defaults);
	var chart_temp = new CanvasJS.Chart(tempContainer, defaults_temp);
	chart_temp.options.title.text = "Temprature Readings";
	chart_temp.options.axisY.title = "Degrees Celsius (°C)";
	chart_temp.options.data[0].dataPoints = points_temp;
	chart_temp.render();

	var defaults_humid = jQuery.extend(true, {}, chart_defaults);
	var chart_humid = new CanvasJS.Chart(humidContainer, defaults_humid);
	chart_humid.options.title.text = "Humidity Readings";
	chart_humid.options.axisY.title = "Relative Humidity (%)";
	chart_humid.options.data[0].dataPoints = points_humid;
	chart_humid.render();

	var defaults_press = jQuery.extend(true, {}, chart_defaults);
	var chart_press = new CanvasJS.Chart(pressContainer, defaults_press);
	chart_press.options.title.text = "Pressure Readings";
	chart_press.options.axisY.title = "Hectopascals (hPa)";
	chart_press.options.data[0].dataPoints = points_press;
	chart_press.render();
	}
	}
	</script>
	</head>
	<body>
	<div id="tempContainer"></div>
	<br><hr><br>
	<div id="humidContainer"></div>
	<br><hr><br>
	<div id="pressContainer"></div>
	<br><hr><br>
	<table>
	<tr> <td rowspan=2>Highest temprature</td> <td id="maxTempDate"> </td> </tr>
	<tr> <td id="maxTemp"> </td> </tr>
	<tr> <td rowspan=2>Lowest temprature</td> <td id="minTempDate"> </td> </tr>
	<tr> <td id="minTemp"> </td> </tr>
	<tr> <td rowspan=2>Highest humidity</td> <td id="maxHumidDate"></td> </tr>
	<tr> <td id="maxHumid"> </td> </tr>
	<tr> <td rowspan=2>Lowest humidity</td> <td id="minHumidDate"></td> </tr>
	<tr> <td id="minHumid"> </td> </tr>
	<tr> <td rowspan=2>Highest pressure</td> <td id="maxPressDate"></td> </tr>
	<tr> <td id="maxPress"> </td> </tr>
	<tr> <td rowspan=2>Lowest pressure</td> <td id="minPressDate"></td> </tr>
	<tr> <td id="minPress"> </td> </tr>
	</table>
	</body>
	</html>