JSFiddle - React, Tailwind, and code Playground

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

JavaScript

var select = document.getElementById('csvDataSwitcher'); var dataSet = [];

function getDataPointsFromCSV(url, chart) {
  $.when($.get(url, function(data) {
    var allLinesArray = data.split("\n");
    if( allLinesArray.length > 0 ) {
      for(var i = 0; i < allLinesArray[0].split(",").length; i++)
        dataSet.push([]);
      
      for (var i = 0; i < allLinesArray.length; i++) {
        var rowData = allLinesArray[i].split(",");
        for(var j = 0; j < rowData.length; j++) {
          if(i === 0 && rowData[j + 1]) {
            var opt = document.createElement('option');
            opt.value = j + 1;
            opt.innerHTML = allLinesArray[0].split(",")[j + 1];
            select.appendChild(opt);
          }
          console.log(rowData[0])
          if(isNaN(rowData[0])) {
            dataSet[j].push({
              label: rowData[0] != "CALLUUID" ? rowData[0] : 0,
              y: parseInt(rowData[j + 1])
            });
          }
        }
      }
    }
  })).then(function( data, textStatus, jqXHR ) {
    chart.options.data[0].dataPoints = dataSet[0];
    chart.render();
  });
}
var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Line Chart with Data from External CSV",
  },
  axisX: {
    labelFontSize: 10
  },
  data: [{
    type: "line", 
    dataPoints: []
  }]
});

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

select.addEventListener('change', function() {
  chart.options.data[0].dataPoints = dataSet[this.value - 1];
  chart.render();
});