productgannt.html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Gantt</title>

<body>
  <p>Select local CSV File:</p>
  <input id="csv" type="file">

  <output id="out">
    Contents of CSV will appear here for debugging.
  </output>

  <div id="gantt" style="height: 600px;"></div>

  <script>
    var globalJSON = null; // contains the JSON data obtained from reading CSV file
    const fileInput = document.getElementById("csv"),

      readFile = function () {
        const reader = new FileReader();
        reader.onload = function () {
          document.getElementById('out').innerHTML = reader.result;
          console.log(reader.result)

          globalJSON = csvJSON(reader.result)

          google.charts.load('current', { 'packages': ['corechart', 'gantt'] });
          google.charts.setOnLoadCallback(drawChart);

        };

        // start reading the file. When it is done, calls the onload event defined above.
        reader.readAsBinaryString(fileInput.files[0]);
      };

    fileInput.addEventListener('change', readFile);

  </script>

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
    function drawChart() {
      const data = new google.visualization.DataTable();

      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      globalJSON.length = Object.keys(globalJSON).length - 1;
      console.log(globalJSON.length)

      for (var i = 0; i < globalJSON.length; i++) {
        const formattedValues = Object.values(globalJSON[i]).map((value, i) => {
          let x = value;

          // first three values must be strings
          if (i === 0 || i === 1 || i ===2) {
            x = String(value)
          }

          // fourth and fifth values must be dates
          if (i === 3 || i === 4) {
            x = new Date(value)
          }

          // sixth values in their example are null https://developers.google.com/chart/interactive/docs/gallery/ganttchart
          if (i === 5) {
            x = null;
          }

          // seventh values in their examples are numbers
          if (i === 6) {
            x = Number(value)
          }

          // eighth values in their examples are null
          if (i === 7) {
            x = String(value).replace(/(\r\n|\n|\r)/gm, "")
          }
          return x;
        })

        console.log(formattedValues)
        data.addRow(formattedValues)

      }

      const options = { 'title': 'Gantt' };
      chart = new google.visualization.Gantt(document.getElementById('gantt'))

      // listen for errors
      google.visualization.events.addListener(chart, 'error', function (err) {
        console.log(err.id, err.message);
      });

      chart.draw(data, options)
    }


    // source https://stackoverflow.com/questions/27979002/convert-csv-data-into-json-format-using-javascript
    function csvJSON(csv) {
      // csv is the CSV file with headers

      var lines = csv.split("\n");

      var result = [];

      var headers = lines[0].split(",");

      for (var i = 1; i < lines.length; i++) {

        var obj = {};
        var currentline = lines[i].split(",");

        for (var j = 0; j < headers.length; j++) {
          obj[headers[j]] = currentline[j];
        }

        result.push(obj);

      }

      return result; //JavaScript object
      // return JSON.stringify(result); //JSON
    }
  </script>
</body>

</html>