Line Chart with Data from Google Sheets | CanvasJS JavaScript Charts

Line Chart with Data from Google Sheets | CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

	<div id="chartContainer" style="width:100%; height:360px;"></div>

JavaScript

var dataPoints = [];

function getDataPointsFromCSV(csv) {
  var dataPoints = csvLines = points = [];
  csvLines = csv.split(/[\r?\n|\r|\n]+/);         

  for (var i = 0; i < csvLines.length; i++)
    if (csvLines[i].length > 0) {
      points = csvLines[i].split(",");
      dataPoints.push({ 
        y: parseFloat(points[0])		
      });
    }
  return dataPoints;
}

$.get("https://docs.google.com/spreadsheets/d/e/2PACX-1vQcyRPhZiHHXb1sMH97QOQVo99ESuSGkzfB9Z4R8483LX1VVpZ9zbsC5COIJeLQhn1OTVEAv3qxKAzZ/pub?gid=0&single=true&output=csv", function(data) {
  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Chart with Data from Google Sheets",
    },
    data: [{
      type: "line",
      dataPoints: getDataPointsFromCSV(data)
    }]
  });

  chart.render();

});