Google Charts Timetable dates as variable-CodePudding

I am currently working on a simple timetable project with Google Charts, although I have encountered a problem that it seems I don't know a way to fix.

I want the dates to change through user input. I've tried something but I don't know how to continue.

Here is the jsfiddle link:

I tried adding form and variables but when I put the variable in the date it doesn't recognize it.

Here is the code:

google.charts.load("current", {
  packages: ["timeline"]
});
G2start = parseInt(document.getElementById('G2startvar').value);
G2end = parseInt(document.getElementById('G2endvar').value);
G3start = parseInt(document.getElementById('G3startvar').value);
G3end = parseInt(document.getElementById('G3endvar').value);

google.charts.setOnLoadCallback(drawChart);

function drawChart() {


  var container = document.getElementById('timechart');

  //1st is (G4.5), 2nd is (G2), 3rd is, (G3), 4th is (G3.1), 5th is (G3.2)
  var options = {
    colors: ['#113477', '#C0C0C0', '#adc6e5', '#72aae4', '#518cc2', '#4A7FB0'],
    timeline: {
      rowLabelStyle: {
        fontName: 'Arial',
        fontSize: 25,
        color: '#0000'
      },
      barLabelStyle: {
        fontName: 'Times New Roman',
        fontSize: 32
      }
    },

    'width': 3950,
    'height': 5200,
    avoidOverlappingGridLines: false
  };
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({
    type: 'string',
    id: 'Position'
  });
  dataTable.addColumn({
    type: 'string',
    id: 'Name'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });
  dataTable.addRows([
    [Date(), 'Now', new Date(), new Date()],
    ['Project #1', 'G2', new Date(2022, 11, 15), new Date(2022, 11, 30)],
    ['Project #1', 'G3', new Date(2022, 11, 30), new Date(2023, 5, 17)],


  ]);
  chart.draw(dataTable, options);


}

h1 {
  color: #3e74ab;
  text-shadow: 1px 1px;
  font-family: "Times New Roman", Times, serif;
  text-align: center;
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<h1>Project Timetable</h1>


<body>
  <p>Please input your project dates</p>
  <form id="form1" onsubmit="drawChart(); return false">
    <label for="G2startvar">G1 Start Date: </label><input type="date" id="G2startvar"><br>
    <label for="G2endvar">G1 End Date: </label><input type="date" id="G2endvar"><br>
    <label for="G3startvar">G2 Start date: </label><input type="DATE" id="G3startvar"><br>
    <label for="G3endvar">G2 End Date : </label><input type="date" id="G3endvar"><br>

    <button type="submit" value="Submit">Submit</button>

  </form>



  <div id="timechart" style="height: 1000px;"></div>

CodePudding user response：

I figured out this one using event listeners, here, the chart gets redraw everytime the input is updated using the "change" event, and detecting if the date is valid.

Check this out:

<head>
  <h1>Project Timetable</h1>
  <style>
    h1 {
      color: #3e74ab;
      text-shadow: 1px 1px;
      font-family: "Times New Roman", Times, serif;
      text-align: center;
    }

  </style>
</head>

<body>
  <p>Please input your project dates</p>
  G1 start
  <input type="date" id="g1s"><br>
  G1 end
  <input type="date" id="g1e"><br>
  G2 start
  <input type="date" id="g2s"><br>
  G2 end
  <input type="date" id="g2e"><br>

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {
      packages: ["timeline"]
    });
    google.charts.setOnLoadCallback(drawChart);
    
    const g1Dates = {start: undefined, end: undefined};
    const g2Dates = {start: undefined, end: undefined};
    
    function setDateAndRedraw(datesObj, isStart, dateString) {
      const datesArray = dateString.split("-").map(Number);
      datesArray[1]--; // Month number to month index
      datesObj[isStart ? "start" : "end"] = new Date(...datesArray);
      if (datesObj.start && datesObj.end && datesArray[0] > 1990) drawChart(); // Redraw if date has a start and an end, and year is > 1990
    }
    
    document.getElementById("g1s").addEventListener("change", e => setDateAndRedraw(g1Dates, true, e.target.value));
    document.getElementById("g1e").addEventListener("change", e => setDateAndRedraw(g1Dates, false, e.target.value));
    document.getElementById("g2s").addEventListener("change", e => setDateAndRedraw(g2Dates, true, e.target.value));
    document.getElementById("g2e").addEventListener("change", e => setDateAndRedraw(g2Dates, false, e.target.value));


    function drawChart() {


      var container = document.getElementById('timechart');

      //1st is (G4.5), 2nd is (G2), 3rd is, (G3), 4th is (G3.1), 5th is (G3.2)
      var options = {
        colors: ['#113477', '#C0C0C0', '#adc6e5', '#72aae4', '#518cc2', '#4A7FB0'],
        timeline: {
          rowLabelStyle: {
            fontName: 'Arial',
            fontSize: 25,
            color: '#0000'
          },
          barLabelStyle: {
            fontName: 'Times New Roman',
            fontSize: 32
          }
        },

        'width': 3950,
        'height': 5200,
        avoidOverlappingGridLines: false
      };
      var chart = new google.visualization.Timeline(container);
      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn({
        type: 'string',
        id: 'Position'
      });
      dataTable.addColumn({
        type: 'string',
        id: 'Name'
      });
      dataTable.addColumn({
        type: 'date',
        id: 'Start'
      });
      dataTable.addColumn({
        type: 'date',
        id: 'End'
      });
      dataTable.addRows([
        [Date(), 'Now', new Date(), new Date()],
        ['Project #1', 'G2', new Date(2022, 11, 15), new Date(2022, 11, 30)],
        ['Project #1', 'G3', new Date(2022, 11, 30), new Date(2023, 5, 17)],
      ]);
      if (g1Dates.start && g1Dates.end) {
        dataTable.addRows([['Project #1', 'G1', g1Dates.start, g1Dates.end]]);
      }
      if (g2Dates.start && g2Dates.end) {
        dataTable.addRows([['Project #1', 'G2', g2Dates.start, g2Dates.end]]);
      }
      chart.draw(dataTable, options);
    }

  </script>

  <div id="timechart" style="height: 1000px;"></div>