HTML Presentation Object: Gantt chart

The following query contains example data for the gantt chart. Add it to a HTML presentation object's dataset with name "exampleData". Note that this example needs QPR Reporting Expression datasource installed. To use the gantt charts for a real purpose, replace the example query with a query that access the data.

data=CreateDataset(Array('TaskName', 'StartDate', 'EndDate', 'PlannedStartDate', 'PlannedEndDate', 'Progress'))
data=AddDatasetRow([data], 'Project Task 1', NewDatetime(2017,1,1), NewDatetime(2017,2,15), NewDatetime(2017,1,10), NewDatetime(2017,2,20), 35)
data=AddDatasetRow([data], 'Project Task 2', NewDatetime(2017,2,1), NewDatetime(2017,4,1), NewDatetime(2017,2,1), NewDatetime(2017,3,15), 90)
data=AddDatasetRow([data], 'Project Task 3', NewDatetime(2017,4,1), NewDatetime(2017,6,1), NewDatetime(2017,4,5), NewDatetime(2017,6,15), 15)
data=AddDatasetRow([data], 'Project Task 4', NewDatetime(2017,4,10), NewDatetime(2017,7,31), NewDatetime(2017,4,10), NewDatetime(2017,7,31), 10)
data=AddDatasetRow([data], 'Project Task 5', NewDatetime(2017,5,1), NewDatetime(2017,8,1), NewDatetime(2017,5,10), NewDatetime(2017,7,16), 100)
data=AddDatasetRow([data], 'Project Task 6', NewDatetime(2017,7,1), NewDatetime(2017,7,31), NewDatetime(2017,6,20), NewDatetime(2017,7,20), 0)
data=AddDatasetRow([data], 'Project Task 7', NewDatetime(2017,8,1), NewDatetime(2017,10,15), NewDatetime(2017,7,15), NewDatetime(2017,9,30), 50)
data=AddDatasetRow([data], 'Project Task 8', NewDatetime(2017,8,1), NewDatetime(2017,10,1), NewDatetime(2017,8,10), NewDatetime(2017,10,1), 30)
data=AddDatasetRow([data], 'Project Task 9', NewDatetime(2017,9,1), NewDatetime(2017,11,1), NewDatetime(2017,8,20), NewDatetime(2017,10,20), 5)

Set the Horizontal scrollbar and Vertical scrollbar to Hidden.

Use the HTML code below. Column names can be changed using the javascript variable in the beginning of the code. In the example, the "current date" is fixed to Date.UTC(2017, 7,15), change it to Date.now().

<div id="container<#uniqueId>"></div>

<script>
var taskNameColumn = "TaskName";
var startDateColumn = "StartDate";
var endDateColumn = "EndDate";
var plannedStartDateColumn = "PlannedStartDate";
var plannedEndDateColumn = "PlannedEndDate";
var progressColumn = "Progress";
var poData<#uniqueId>;
var width<#uniqueId>;
var height<#uniqueId>;

function <#datasetChangeFunction>(datasetIdentifier, datasetChangeCallbackFunction) {
  if (datasetIdentifier == "exampleData") {
    datasetChangeCallbackFunction(myDatasetAvailable<#uniqueId>);
  }
}
 
function myDatasetAvailable<#uniqueId>(datasetData) {
  if (datasetData == null || datasetData.sheets == null || datasetData.sheets.length == 0 || datasetData.sheets[0] == null || datasetData.sheets[0].values == null || datasetData.sheets[0].values.length == 0) return;
  datasetData.getDatasetAsObjectArray = getDatasetAsObjectArray;
  datasetData.formatDataset = formatDataset;
  poData<#uniqueId> = datasetData.getDatasetAsObjectArray();
  for (var i = 0; i < poData<#uniqueId>.length; i++) { 
    poData<#uniqueId>[i][startDateColumn] = parseInt(poData<#uniqueId>[i][startDateColumn].replace("/Date(", "").replace(")/", ""));
    poData<#uniqueId>[i][endDateColumn] = parseInt(poData<#uniqueId>[i][endDateColumn].replace("/Date(", "").replace(")/", ""));
    poData<#uniqueId>[i][plannedStartDateColumn] = parseInt(poData<#uniqueId>[i][plannedStartDateColumn].replace("/Date(", "").replace(")/", ""));
    poData<#uniqueId>[i][plannedEndDateColumn] = parseInt(poData<#uniqueId>[i][plannedEndDateColumn].replace("/Date(", "").replace(")/", ""));
    poData<#uniqueId>[i]["ProgressPoint"] = (new Date(poData<#uniqueId>[i][startDateColumn] + (poData<#uniqueId>[i][endDateColumn] - poData<#uniqueId>[i][startDateColumn]) * poData<#uniqueId>[i][progressColumn] / 100)).getTime();
  }
  drawPO<#uniqueId>();
}
 
function <#resizeFunction>(newWidth, newHeight) {
  width<#uniqueId> = newWidth;
  height<#uniqueId> = newHeight;
  $("#container<#uniqueId>").width(newWidth);
  $("#container<#uniqueId>").height(newHeight);
  drawPO<#uniqueId>();
}

function drawPO<#uniqueId>() {
  if (poData<#uniqueId> == null || width<#uniqueId> == null) return;
  $("#container<#uniqueId>").empty();
  Highcharts.chart("container<#uniqueId>", {
    chart: {
      type: 'columnrange',
      inverted: true,
      zoomType: 'y'
    },
    title: {
    text: 'Gantt chart' },
    xAxis: {
      type: "category", 
      labels: {
        style: {
          fontSize: '13px'
        }
      }
    },
    credits: { enabled: false },
    yAxis: {
      type: 'datetime',
      opposite: true,
      tickPixelInterval: 90,
      dateTimeLabelFormats: {
        day: '%d/%m', week: '%d/%m', month: '%m/%Y', year: '%Y'
      },
      title: "",
      plotLines: [{
        color: '#D00D20',
        width: 2,
        value: Date.UTC(2017, 7,15) // Real currentdate: Date.now()
    }],
      labels: {
        style: {
          fontSize: '13px'
        }
      }
    },
    tooltip: {
      useHTML: true,
      formatter: function () {
        return  "<span style='font-weight: bold;font-size:125%;'>" + this.point[taskNameColumn] + "</span></br>Actual: <b>" +
          (new Date(this.point[startDateColumn])).toLocaleDateString() + "</b> - <b>" + (new Date(this.point[endDateColumn])).toLocaleDateString() + "</b></br>" +
          "Planned: <b>" + (new Date(this.point[plannedStartDateColumn])).toLocaleDateString() + "</b> - <b>" +
          (new Date(this.point[plannedEndDateColumn])).toLocaleDateString() + "</b></br>" + 
          "Progress: <b>" + this.point[progressColumn] + " %</b>";
      }
    },
    legend: { enabled: false },
    series: [{
      color: "#195283",
      stacking: "normal",
      pointPadding: 0,
      groupPadding: 0,
      borderRadius: 0,
      borderWidth: 0,
      data: formatDataset(poData<#uniqueId>, {"low": startDateColumn, "high": "ProgressPoint", "name": taskNameColumn}, null, null, null, true),
       dataLabels: {
         enabled: true,
         align: 'center',
         inside: true,
         verticalAlign:"middle",
         formatter: function () {
           return this.point[progressColumn] + "%";
         },
         style: {
           fontSize: '13px'
         }
      }
    },
    {
      color: "#3277b2",
      stacking:"normal",
      pointPadding: 0,
      groupPadding: 0,
      borderRadius: 0,
      borderWidth: 0,
      data: formatDataset(poData<#uniqueId>, {"low": "ProgressPoint", "high": endDateColumn, "name": taskNameColumn}, null, null, null, true),
      dataLabels: {
        enabled: true,
        align: 'center',
        inside: true,
        format: '',
        style: {
          fontSize: '13px'
        }
      }
    },
    {
      color: "#fba41c",
      pointPadding: 0,
      groupPadding: 0.4,
      borderRadius: 0,
      borderWidth: 0,
      data: formatDataset(poData<#uniqueId>, {"low": plannedStartDateColumn, "high": plannedEndDateColumn, "name": taskNameColumn}, null, null, null, true),
     dataLabels: {
       enabled: true,
       align: 'center',
       inside: true,
       format: '',
       style: {
         fontSize: '13px'
       }
     }
    }
  ]
  });
}

function getDatasetAsObjectArray(sheetIndex = 0) {
  if (this.sheets[sheetIndex].values.length == 0) throw "Dataset contains no columns.";
  var datasetAsObjectArray = [];
  for (var row = 1; row < this.sheets[sheetIndex].values[0].length; row++) {
    var rowObject = {};
    for (var column = 0; column < this.sheets[sheetIndex].values.length; column++) {
      rowObject[this.sheets[sheetIndex].values[column][0].attribute] = this.sheets[sheetIndex].values[column][row].value;
    }
    datasetAsObjectArray.push(rowObject);
  }
  return datasetAsObjectArray;
}

function formatDataset(inputData, mappings = {}, groupColumn = null, groupAttribute = null, innerArrayAttribute = null, keepAlreadyMappedColumns = false) {
  var datasetAsObjectArray = inputData;
  if (datasetAsObjectArray == null) datasetAsObjectArray = this.getDatasetAsObjectArray();
  var mappedData = [];
  var namesToMap = Object.getOwnPropertyNames(mappings);
  for (var i = 0; i < datasetAsObjectArray.length; i++) {
    var row = {};
    var mappedColumns = [];
    for (var j = 0; j < namesToMap.length; j++) {
      row[namesToMap[j]] = datasetAsObjectArray[i][mappings[namesToMap[j]]];
      mappedColumns.push(mappings[namesToMap[j]]);
    }
    var dataColumns = Object.getOwnPropertyNames(datasetAsObjectArray[i]);
    for (j = 0; j < dataColumns.length; j++) {
      if (keepAlreadyMappedColumns || mappedColumns.indexOf(dataColumns[j]) == -1) {
        row[dataColumns[j]] = datasetAsObjectArray[i][dataColumns[j]];
      }
    }
    mappedData.push(row);
  }

  if (groupColumn == null) {
    return mappedData;
  } else {
    var groups = {};
    for (var i = 0; i < mappedData.length; i++) {
      var groupName = mappedData[i][groupColumn];
      if (groups[groupName] == null) groups[groupName] = [];
      groups[groupName].push(mappedData[i]);
      delete mappedData[i][groupColumn];
    }
    var groupedData = [];
    var groupNames = Object.getOwnPropertyNames(groups);
    for (var i = 0; i < groupNames.length; i++) {
      var group = {};
      group[groupAttribute] = groupNames[i];
      group[innerArrayAttribute] = groups[groupNames[i]];
      groupedData.push(group);
    }
    return groupedData;
  }
}
</script>