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

JavaScript

function getChartOptionsFromCSV(csv) {

 CanvasJS.addCultureInfo("es", 
    {      
      decimalSeparator: ","// Observe ToolTip Number Format
    });
    
  var csvLines = [], points = [];
  var chartOptions;
  var country;
  var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [], dataPoints4 = [];

  csvLines = csv.split(/[\r?\n|\r|\n]+/);
  var index = "Country6"; // change index to required country's name available in CSV
  for (var i = 0; i < csvLines.length; i++){
    if(csvLines[i].split(",")[0] === index){
      if (csvLines[i].length > 0) {
        points = csvLines[i].split(",");
        
        country = points[0];
        dataPoints1.push({ 
          label: parseFloat(points[1]), 
          y: points[2] === "null" ? null : parseFloat(points[2])
        });
        dataPoints2.push({ 
          label: parseFloat(points[1]), 
          y: points[3] === "null" ? null : parseFloat(points[3]) 		
        });
        dataPoints3.push({ 
          label: parseFloat(points[1]), 
          y: points[4] === "null" ? null : parseFloat(points[4]) 		
        });
        dataPoints4.push({ 
          label: parseFloat(points[1]), 
          y: points[5] === "null" ? null : parseFloat(points[5]) 		
        });
      }
    }
  }

  chartOptions = {
    title: {
      text 		: "Trend for Indicator Values - " + country,
      fontFamily 	: "Arial, Helvetica, sans-serif",
      fontWeight 	: "bold",
      fontSize 	: 30,
      fontColor 	: "#4fad4a",
    },
    exportEnabled: true,
    culture: "es",
    exportFileName: "Trend for Indicator Values - " + country,
    legend: {
      fontFamily: "Arial, Helvetica, sans-serif",
      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) {
     ...