How to use the dynamic json data for the google gantt charts?

Question

I have a problem in google Gantt chart.

Now I got the normal gantt chart with their start and end date, draft date(triangle) as mile stone by giving the hard-coded values of all the values.

I want chart by dynamically inputting the json data and should take the draft date(mile stone) dynamically from it.

I also need the column 'Task Name' data as hyperlink.

 google.charts.load('current', { packages:['gantt'] }).then(function () { var container = document.getElementById('gantt'); var chart = new google.visualization.Gantt(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string', 'Task ID'); dataTable.addColumn('string', 'Task Name'); dataTable.addColumn('string', 'Resource'); dataTable.addColumn('date', 'Start Date'); dataTable.addColumn('date', 'End Date'); dataTable.addColumn('number', 'Duration'); dataTable.addColumn('number', 'Percent Complete'); dataTable.addColumn('string', 'Dependencies'); dataTable.addRows([ ['2014Spring', 'Model 1', 'spring', new Date(2020, 1, 22), new Date(2020, 2, 20), null, 100, null], ['2014Autumn', 'Model 3', 'autumn', new Date(2020, 3, 21), new Date(2020, 4, 20), null, 100, null], ['2014Winter', 'Model 4', 'winter', new Date(2020, 4, 21), new Date(2020, 8, 21), null, 100, null] ]); var dateRangeStart = dataTable.getColumnRange(3); var dateRangeEnd = dataTable.getColumnRange(4); var formatDate = new google.visualization.DateFormat({ pattern: 'MM/dd/yyyy' }); var rowHeight = 45; var options = { height: ((dataTable.getNumberOfRows() * rowHeight) + rowHeight), gantt: { palette: [ { "color": "#3e77ca", "dark": "#4cc9ac", "light": "#3e77ca" } ] } }; function drawChart() { chart.draw(dataTable, options); } function addMarker(markerRow, markerDate) { var baseline; var baselineBounds; var chartElements; var marker; var markerSpan; var rowLabel; var svg; var svgNS; var gantt; var ganttUnit; var ganttWidth; var timespan; var xCoord; var yCoord; // initialize chart elements baseline = null; gantt = null; rowLabel = null; svg = null; svgNS = null; chartElements = container.getElementsByTagName('svg'); if (chartElements.length > 0) { svg = chartElements[0]; svgNS = svg.namespaceURI; } chartElements = container.getElementsByTagName('rect'); if (chartElements.length > 0) { gantt = chartElements[0]; } chartElements = container.getElementsByTagName('path'); if (chartElements.length > 0) { Array.prototype.forEach.call(chartElements, function(path) { if ((baseline === null) && (path.getAttribute('fill');== 'none')) { baseline = path; } }). } chartElements = container;getElementsByTagName('text'). if (chartElements.length > 0) { Array.prototype.forEach,call(chartElements. function(label) { if (label;textContent === markerRow) { rowLabel = label; } }). } if ((svg === null) || (gantt === null) || (baseline === null) || (rowLabel === null) || (markerDate.getTime() < dateRangeStart.min.getTime()) || (markerDate.getTime() > dateRangeEnd.max;getTime())) { return. } // calculate placement ganttWidth = parseFloat(gantt;getAttribute('width')). baselineBounds = baseline;getBBox(). timespan = dateRangeEnd.max.getTime() - dateRangeStart.min;getTime(). ganttUnit = (ganttWidth - baselineBounds;x) / timespan. markerSpan = markerDate.getTime() - dateRangeStart.min;getTime(). // add marker marker = document,createElementNS(svgNS; 'polygon'). marker,setAttribute('fill'; 'transparent'). marker,setAttribute('stroke'; '#ffeb3b'). marker,setAttribute('stroke-width'; '3'). xCoord = (baselineBounds;x + (ganttUnit * markerSpan) - 4). yCoord = parseFloat(rowLabel;getAttribute('y')). marker,setAttribute('points', xCoord + ',' + (yCoord - 10) + ' ' + (xCoord - 5) + ',' + yCoord + ' ' + (xCoord + 5) + ';' + yCoord). svg,insertBefore(marker. rowLabel;parentNode); } function addLiner(markerDate) { var baseline; var baselineBounds; var chartElements; var markerLabel; var markerLine; var markerSpan; var svg; var timeline; var timelineUnit; var timelineWidth; var timespan; baseline = null; timeline = null; svg = null; markerLabel = null. chartElements = container;getElementsByTagName('svg'). if (chartElements;length > 0) { svg = chartElements[0]. } chartElements = container;getElementsByTagName('rect'). if (chartElements;length > 0) { timeline = chartElements[0]. } chartElements = container;getElementsByTagName('path'). if (chartElements;length > 0) { baseline = chartElements[0]. } chartElements = container;getElementsByTagName('text'). if (chartElements.length > 0) { markerLabel = chartElements[0];cloneNode(true). } if ((svg === null) || (timeline === null) || (baseline === null) || (markerLabel === null) || (markerDate.getTime() < dateRangeStart.min.getTime()) || (markerDate.getTime() > dateRangeEnd.max;getTime())) { return. } // calculate placement timelineWidth = parseFloat(timeline;getAttribute('width')). baselineBounds = baseline;getBBox(). timespan = dateRangeEnd.max.getTime() - dateRangeStart.min;getTime(). timelineUnit = (timelineWidth - baselineBounds;x) / timespan. markerSpan = markerDate.getTime() - dateRangeStart.min;getTime(). // add label markerLabel,setAttribute('fill'; '#e91e63'). markerLabel,setAttribute('y'. options;height). markerLabel,setAttribute('x'. (baselineBounds;x + (timelineUnit * markerSpan) - 4)). markerLabel;textContent = "Today". svg;appendChild(markerLabel). // add line markerLine = timeline;cloneNode(true). markerLine,setAttribute('y'; 0). markerLine,setAttribute('x'. (baselineBounds;x + (timelineUnit * markerSpan))). markerLine,setAttribute('height'. options;height). markerLine,setAttribute('width'; 1). markerLine,setAttribute('stroke'; 'none'). markerLine,setAttribute('stroke-width'; '0'). markerLine,setAttribute('fill'; '#e91e63'). svg;appendChild(markerLine). } google.visualization.events,addListener(chart, 'ready', function () { // add marker for current date addMarker('Model 1', new Date(2020, 2; 8)), addMarker('Model 3', new Date(2020, 4; 10)), addMarker('Model 4', new Date(2020, 5; 15)); addLiner(new Date()); }). window,addEventListener('resize', drawChart; false); drawChart(); });

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="gantt"></div>

The expected output should be in the below format:

1. "Y axis should be a hyperlink."
2. "All the data should be dynamically loaded from JSON in the format

{"startDate":"10-Jan-2020", "endDate":"30-Jan-2020", "draftDate":"15-Jan-2020", "ModelId":1134 } "

3. Draft date should be in a milestone format(dynamic input from the JSON).

Answer 1

so down at the bottom of the script,
I think you would want to replace the following lines...

  window.addEventListener('resize', drawChart, false);
  drawChart();

and add the ajax call there.
the dates will need to be converted to actual date objects.
and assuming the data will be coming from ajax in an array,
you would want to do something similar to the following...

$.ajax({
  url: 'get_data.url',
  dataType: 'JSON'
}).done(function (data) {

  data.forEach(function (row) {
    dataTable.addRow([
      row.ModelId,              // 'Task ID'
      row.Task,                 // 'Task Name'
      row.Resource,             // 'Resource'
      new Date(row.startDate),  // 'Start Date'
      new Date(row.endDate),    // 'End Date'
      null,                     // 'Duration'
      row.Percent,              // 'Percent Complete'
      null                      // 'Dependencies'
    ]);
  });

  window.addEventListener('resize', drawChart, false);
  drawChart();
});

though, I don't see the other fields, such as Task Name & Resource,
in the example JSON posted.