Google Charts Timetable dates as variable

Question

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>

score 1 · Accepted Answer · answered Nov 17 '22 at 09:08

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>

Thanks a lot it, works altough i try to add more bars (such as g3, g3.1) but i can not — m3meg0d, Nov 17 '22 at 12:52
This code is just a hint, you can do a more generic version of this just by getting dates from an input (or whatever) and adding rows with the `.addRows` method. You could have a higer order Map mapping bar names like `G1, G2, GX.X` to a start date and an end date and use `Map.forEach(({key,v})=>.addRows([v.proj,key,v.start,v.end]))` to add all bars at once as the new bar name and the project it is attached to are given when adding the row. — Thomas Zimmermann, Nov 17 '22 at 12:59

Google Charts Timetable dates as variable

1 Answers1