Chart from CSV - CanvasJS JavaScript Charts

Chart from CSV - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="container">
  <!-- CanvasJS Chart -->
  <div class="row">
    <div class="col-md-12">
      <div id="chartContainer" style="height: 360px; width: 100%;"></div>
    </div>
  </div>
  <!-- /CanvasJS Chart -->
  
  <!-- Table -->
   <table class="table">
  <thead>
    <tr>
      <th>Sensor</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sensor S11</td>
      <td id="s11Val">S11</td>
    </tr>
    <tr>
      <td>Senso S12</td>
      <td id="s12Val">S12</td>
    </tr>
    <tr>
      <td>Sensor S21</td>
      <td id="s21Val">S21</td>
    </tr>
    <tr>
      <td>Flow Meter Total (D2)</td>
      <td id="d2Val">flow</td>
    </tr>
    <tr>
      <td>Output(A1)</td>
      <td id="a1Val">A1</td>
    </tr>
     <tr>
      <td>Output(A2)</td>
      <td id="a2Val">A2</td>
    </tr>
    <tr>
      <td>CCOND</td>
      <td id="ccondVal">CCOND</td>
    </tr>
     <tr>
      <td>TEMP</td>
      <td id="tempVal">TEMP</td>
    </tr>
  </tbody>
</table>
  <!-- /Table -->
</div>

JavaScript

var dataSeries = [
	{
		type: "line",
		legendText: "S11",
		showInLegend: true,
		dataPoints: []
	},
	{
		type: "line",
		legendText: "S12",
		showInLegend: true,
		dataPoints: []
	},
	{
		type: "line",
		legendText: "S21",
		showInLegend: true,
		dataPoints: []
	},
	{
		type: "line",
		legendText: "D2",
		showInLegend: true,
		dataPoints: []
	},
	{
		type: "line",
		legendText: "A1",
		showInLegend: true,
		dataPoints: []
	},
	{
		type: "line",
		legendText: "A2",
		showInLegend: true,
		dataPoints: []
	},
	{
		type: "line",
		legendText: "CCond",
		showInLegend: true,
		dataPoints: []
	},
	{
		type: "line",
		legendText: "Temp",
		showInLegend: true,
		dataPoints: []
	}
];


function getDataSeriesFromCSV(csv) {
	var csvLines = points = [];
	csvLines = csv.split(/[\r?\n|\r|\n]+/);
	if (csvLines[csvLines.length-1].length > 0) {
		points = csvLines[csvLines.length-1].split(",");

		var year = parseInt(points[0].split(" ")[0].split("/")[2]);
		var month = parseInt(points[0].split(" ")[0].split("/")[1]);
		var day = parseInt(points[0].split(" ")[0].split("/")[0]);
		var hour = parseInt(points[0].split(" ")[1].split(":")[0]);
		var minute = parseInt(points[0].split(" ")[1].split(":")[1]);
		var second = parseInt(points[0].split(" ")[1].split(":")[2]);

		var xVal = new Date(year, month, day, hour, minute, second);

		dataSeries[0].dataPoints.push({ x: xVal, y: parseFloat(points[1]) }); // S11
		dataSeries[1].dataPoints.push({ x: xVal, y: parseFloat(points[2]) }); // S12
		dataSeries[2].dataPoints.push({ x: xVal, y: parseFloat(points[3]) }); // S21
		dataSeries[3].dataPoints.push({ x: xVal, y: parseFloat(points[4]) }); // D2
		dataSeries[4].dataPoints.push({ x: xVal, y: parseFloat(points[5]) }); // A1
		dataSeries[5].dataPoints.push({ x: xVal, y: parseFloat(points[6]) }); // A2
		dataSeries[6].dataPoints.push({ x: xVal, y: parseFloat(points[7]) }); // CCond
		dataSeries[7].dataPoints.push({ x: xVal, y: parseFloat(points[8]) }); // Temp

		// Update Html...