Basic Column Chart - CanvasJS

Basic Column Chart

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<!DOCTYPE html>
<!-- https://canvasjs.com/docs/charts/chart-types/html5-line-chart/ -->
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {

    $.ajax({
        type: "GET",
        url: "Data.csv",
        dataType: "text",
        success: function (data) { processData(data); }
    });

    function processData(allText) {
        var allLinesArray = allText.split('\n');
        if (allLinesArray.length > 0) {
            var dataPoints = [];
	    var dataHumidPoints = [];
            for (var i = 0; i <= allLinesArray.length - 1; i++) {
	        var rowData = allLinesArray[i].split(',');
	        if(rowData && rowData.length > 1)
	            dataPoints.push({ label: rowData[0], y: parseFloat(rowData[1]) });
	            dataHumidPoints.push({ label: rowData[0], y: parseFloat(rowData[2]) });
            }
            chart.options.data[0].dataPoints = dataPoints;
            chart.render();
        }
    }

            
    var chart = new CanvasJS.Chart("chartContainer", {
        zoomEnabled: true,
        theme: "dark1",
        title: {
            text: "Chiller Temp Logging"
        },
	axisX:{
	    title: "Date/Time",
	},
        axisY:{
        includeZero: false
        },
        data: [
        {
            type: "spline",
            dataPoints: [],
        }
        ]
    });
            
});
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 100%; width: 100%;"></div>
</body>
</html>