Rendering Multiple Charts from different Objects - CanvasJS JavaScript Charts

Rendering Multiple Charts from different Objects - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="tempContainer"></div>
<br><hr><br>
<div id="humidContainer"></div>
<br><hr><br>
<div id="pressContainer"></div>
<br><hr><br>

CSS

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; }

JavaScript

$(document).ready(function () {
   $.ajax({
      type: "GET",
      url:"https://gist.githubusercontent.com/cgarz/d51e240d80a663b8cd1e22dc0becdbd0/raw/c5a10bff2b5ded0f375671609e05b11f38c9499d/tempHumidPressure.csv",
      dataType: "text",
      success: function(data) {processCSV(data);}
   });
});

function processCSV(allText) {
   var interactivityEnabled = true;
   var animationEnabled = true;
   var zoomEnabled = true;
   var backgroundColor = "black";
   var title = {  fontColor: "white",
                  fontSize: 25 }
   var axisX = { title:"Time of Test",
                 labelFontColor: "white",
                 titleFontColor: "white",
                 titleFontSize: 20,
                 labelFontSize: 15 }
   var axisY = {  title: " ",
                  labelFontColor: "white",
                  titleFontColor: "white",
                  titleFontSize: 20,
                  labelFontSize: 15,
                  gridThickness: 0.25,
                  interlacedColor: "#06060d",
                  includeZero: false }
   var data = { type: "line",
                 xValueType: "dateTime",
                 lineThickness: 1,
                 showInLegend: false,
                 markerType: "circle",
                 legendText: "Temp" }
  
   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++) {
         if(allLinesArray[i].charAt(0) != "#"){
            //rowData: Date,Temp,Humid,Pressure
            //rowData: [0] ,[1] , [2] ,  [3]
            var rowData = allLinesArray[i].split(",");
            if(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...