Line Chart from External CSV File - CanvasJS JavaScript Charts

Line Chart from External CSV File (Google Spreadsheet) - CanvasJS JavaScript Charts

by canvasjs

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 getDataPointsFromCSV(url, chart) {
  $.when($.get(url, function(data) {
    //chart.options.data[0].dataPoints = [];
    var allLinesArray = data.split("\n");
    if( allLinesArray.length > 0 ){
      for (var i = 0; i < allLinesArray.length; i++) {
        var rowData = allLinesArray[i].split(",");
        chart.options.data[0].dataPoints.push({ y: parseInt(rowData[0]) });
      }
    }
  })).then(function( data, textStatus, jqXHR ) {  
  	chart.render();
  });
}
var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Line Chart with Data from External CSV",
  },
  data: [{
      type: "line", 
      dataPoints: []
  }]
});

getDataPointsFromCSV("https://docs.google.com/spreadsheets/d/e/2PACX-1vQcyRPhZiHHXb1sMH97QOQVo99ESuSGkzfB9Z4R8483LX1VVpZ9zbsC5COIJeLQhn1OTVEAv3qxKAzZ/pub?gid=0&single=true&output=csv", chart);