Rendering multiple chart using external CSV data - CanvasJS JavaScript Charts

Rendering multiple chart using external CSV data - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="downUpContainer" style="height: 360px; width: 100%;"></div>
<br />
<div id="pingsContainer" style="height: 360px; width: 100%;"></div>
<br />
<table>
  <tr>
    <td>Average Download</td><td id="avDown"></td>
  </tr>
  <tr>
    <td>Last 100 Average Download</td><td id="av100Down"></td>
  </tr>
  <tr>
    <td>Average Upload</td><td id="avUp"></td>
  </tr>
  <tr>
    <td>Last 100 Average Upload</td><td id="av100Up"></td>
  </tr>
  <tr>
    <td rowspan=2>Highest Download</td><td id="highestDownDate"></td>
  </tr>
  <tr>
    <td id="highestDown"></td>
  </tr>
  <tr>
    <td rowspan=2>Lowest Download</td><td id="lowestDownDate"></td>
  </tr>
  <tr>
    <td id="lowestDown"></td>
  </tr>
  <tr>
    <td rowspan=2>Highest Upload</td><td id="highestUpDate"></td>
  </tr>
  <tr>
    <td id="highestUp"></td>
  </tr>
  <tr>
    <td rowspan=2>Lowest Upload</td><td id="lowestUpDate"></td>
  </tr>
  <tr>
    <td id="lowestUp"></td>
  </tr>
</table>

CSS

body {background-color: white;}
table {height:520px; color: black; border: 1px solid white;}
tr td {width: 25px; border: 1px solid white; text-align: center;}

JavaScript

$.ajax({
	type: "GET",
	url:"https://codepen.io/bivek/pen/bBVZEP.js",
	dataType: "text",
	success: function(data) {processCSV(data, "downUpContainer", "Upload & Download Speed", "Speed (MBps)", 					"Download", "Upload");}
});

$.ajax({
  type: "GET",
  url:"https://codepen.io/bivek/pen/mOeoPz.js",
  dataType: "text",
  success: function(data) {processCSV(data, "pingsContainer", "ISP & Google Ping", "Latency (ms)", "ISP Gateway", 	"Google");}
});

$.ajax({
  type: "GET",
  url:"https://codepen.io/bivek/pen/QGjoEW.js",
  dataType: "text",
  success: function(data) {populateTable(data);}
});

function processCSV(allText, containerID, titleText, axYTitle, legend1Text, legend2Text) {
  var allLinesArray = allText.split("\n");
  if( allLinesArray.length > 0 ){
    var dataPoints1 = [];
    var dataPoints2 = [];
    for (var i = 0; i <= allLinesArray.length-1; i++) {
      var rowData = allLinesArray[i].split(",");
      if(rowData && rowData.length > 1) {
        dataPoints1.push({ y:parseFloat(rowData[0]) });
        dataPoints2.push({ y:parseFloat(rowData[1]) });
      }
    }

    var chart = new CanvasJS.Chart(containerID, {
      //interactivityEnabled: true,
      animationEnabled: true,
      zoomEnabled: true,
      backgroundColor: "black",
      title:{
        text: titleText,
        fontColor: "white",
        fontSize: 25
      },
      axisX:{
        title:"Test Number",
        labelFontColor: "white",
        titleFontColor: "white",
        titleFontSize: 20,
        labelFontSize: 15
      },
      axisY:{
        title: axYTitle,
        labelFontColor: "white",
        titleFontColor: "white",
        titleFontSize: 20,
        labelFontSize: 15,
        interval: 1,
        gridThickness: 0.25,
        interlacedColor: "#06060d"
      },
      legend: {
        horizontalAlign: "center",
        verticalAlign: "top",
        fontSize: 15,
        fontColor: "white"
      },
      data: [{
        type: "line",
        lineThickness: 1,
       ...