Chart with Datapoints and Title from CSV File - CanvasJS JavaScript Charts

Chart with Datapoints and Title from CSV File - CanvasJS JavaScript Charts

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="chartContainer3" style="height: 360px; width: 100%;"></div>

JavaScript

window.onload=function(){
function getDataPointsFromCSV(csv) {
  var dataPoints, csvLines, points;
  dataPoints = csvLines = points = [];
  
  csvLines = csv.split(/[\r?\n|\r|\n]+/);
  for (var i = 5; i < 9; i++) // for (var i = STARTING ROW FOR COUNTRY; i < END ROW; i++)
    if (csvLines[i].length > 0) {
      points = csvLines[i].split(",");
      
      chart3.options.data[0].dataPoints.push({label: parseFloat(points[1]), y: parseFloat(points[2])});
      chart3.options.data[1].dataPoints.push({label: parseFloat(points[1]), y: parseFloat(points[3])});
      chart3.options.data[2].dataPoints.push({label: parseFloat(points[1]), y: parseFloat(points[4])});
	  chart3.options.data[3].dataPoints.push({label: parseFloat(points[1]), y: parseFloat(points[5])});
    }
}

var chart3 = new CanvasJS.Chart("chartContainer3", {
    title 		: {
    text 		: "Trend for Indicator Values",
	fontFamily 	: "franklin-gothic-urw",
	fontWeight 	: "bold",
	fontSize 	: 30,
	fontColor 	: "#4fad4a",
    },
      legend: {
fontFamily: "franklin-gothic-urw",
fontWeight: "normal",
       horizontalAlign: "center", 
       verticalAlign: "bottom", 
       fontSize: 18,
cursor: "pointer",
            itemclick: function (e) {
              //console.log("legend click: " + e.dataPointIndex);
              //console.log(e);
              if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
              } else {
                    e.dataSeries.visible = true;
              }
 
              e.chart.render();
            }
     },
    exportEnabled: true,
exportFileName: "Trend for Indicator Values",
axisX:{
				labelFontSize: 15,
				labelFontColor: "black"
			},
axisY:{
				labelFontSize: 15,
				labelFontColor: "black",
suffix: "%"
			},
    data: [
    	{ 
      	type: "spline", 
        name: "Proportion of undernourished in the population (%)",
        showInLegend: true,
      	dataPoints: [] 
      },
      { 
   ...