Basic Column Chart - CanvasJS

Basic Column Chart

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

window.onload = function() {
	var f1_chart = new CanvasJS.Chart("chartContainer_f1", {
	  toolTip: {
		shared: true,
	  },
	  zoomEnabled: true,
	  zoomType: "xy",
	  theme: "light2", // "light1", "light2", "dark1", "dark2"
	  interactivityEnabled: true,
	  title: {
	    fontWeight: "normal"
	  },
	  subtitles: [{
	    text: "3 csv chart",
	    fontWeight: "bold",
	    fontColor: "red",
	  }],
	  axisX : [{
			title: "time (s)",
			crosshair: {
                        	enabled: true,
                        	snapToDataPoint: true
                	}}],
	  axisY: [
		{
	    		title: "temp",
	    		minimum: 4,
	    		maximum: 20
		}],
	  legend: {
            cursor: "pointer",
            itemclick: function (e) {
                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }

                e.chart.render();
            },
	    fontSize: 15
          },
	  data: []		
	});

	$.get("/data/csv1.csv", getDataPointsFromF1CSV);
	
	function getDataPointsFromF1CSV(csv) {
	
	  var csvLines = points = [];
	  csvLines = csv.split(/[\r?\n|\r|\n]+/);
	  for (var i = 0; i < csvLines.length; i++) {
            if (csvLines[i].length > 0) {               
              if(i === 0){
                first_line = csvLines[0].split(",");
                for(var j = 1; j < first_line.length; j++)
                  f1_chart.options.data.push({
                    name: first_line[j],
		                type: "spline",
                    showInLegend: true,
                    dataPoints: []
                  });
              }
              else {
                points = csvLines[i].split(",");
                for( var k = 1; k < points.length; k++ ){
                  f1_chart.options.data[k-1].dataPoints.push({label: points[0], y: parseFloat(points[k])});
		}
              }
            }
         ...