JSFiddle - React, Tailwind, and code Playground

by Anjali Jain

HTML

<script src="canvasjs.min.js"></script>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>

JavaScript

$(document).ready(function () {
          
          $.ajax({
            type: "GET",
            url: "data.csv",
            dataType: "text",
            success: function(data) {processData(data);}
          });
          
          function processData(allText) {
            var allLinesArray = allText.split('\n');
            if(allLinesArray.length>0){
              var dataPoints = [];
              for (var i = 1; i <= allLinesArray.length-1; i++) {
                var rowData = allLinesArray[i].split(',');
                dataPoints.push({label:rowData[0],y:parseInt(rowData[1])});
              }
              drawChart(dataPoints);
            }
          }

          function drawChart( dataPoints) {
            var chart = new CanvasJS.Chart("chartContainer", {
              theme: "theme2",//theme1
              title:{
                  text: "Basic Column Chart - CanvasJS"              
             },
              data: [              
              {
// Change type to "bar", "splineArea", "area", "spline", "pie",etc.
                  type: "column",
                  dataPoints: dataPoints
              }
              ]
           });

          chart.render();
          } 
    });