Difference between revisions of "HTML Presentation Object: Gantt chart"

Revision as of 18:33, 17 December 2017

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.

data0=CreateDataset(Array('TaskName', 'StartDate', 'EndDate', 'PlannedStartDate', 'PlannedEndDate', 'Progress'))
data1=AddDatasetRow([data0], 'Project Task 1', NewDatetime(2017,1,1), NewDatetime(2017,2,15), NewDatetime(2017,1,10), NewDatetime(2017,2,20), 35)
data2=AddDatasetRow([data1], 'Project Task 2', NewDatetime(2017,2,1), NewDatetime(2017,4,1), NewDatetime(2017,2,1), NewDatetime(2017,3,15), 90)
data3=AddDatasetRow([data2], 'Project Task 3', NewDatetime(2017,4,1), NewDatetime(2017,6,1), NewDatetime(2017,4,5), NewDatetime(2017,6,15), 15)
data4=AddDatasetRow([data3], 'Project Task 4', NewDatetime(2017,4,10), NewDatetime(2017,7,31), NewDatetime(2017,4,10), NewDatetime(2017,7,31), 10)
data5=AddDatasetRow([data4], 'Project Task 5', NewDatetime(2017,5,1), NewDatetime(2017,8,1), NewDatetime(2017,5,10), NewDatetime(2017,7,16), 100)
data6=AddDatasetRow([data5], 'Project Task 6', NewDatetime(2017,7,1), NewDatetime(2017,7,31), NewDatetime(2017,6,20), NewDatetime(2017,7,20), 0)
data7=AddDatasetRow([data6], 'Project Task 7', NewDatetime(2017,8,1), NewDatetime(2017,10,15), NewDatetime(2017,7,15), NewDatetime(2017,9,30), 50)
data8=AddDatasetRow([data7], 'Project Task 8', NewDatetime(2017,8,1), NewDatetime(2017,10,1), NewDatetime(2017,8,10), NewDatetime(2017,10,1), 30)
data9=AddDatasetRow([data8], '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() {
  var datasetAsObjectArray = [];
  for (var row = 1; row < this.sheets[0].values[0].length; row++) {
    var rowObject = {};
    for (var column = 0; column < this.sheets[0].values.length; column++) {
      rowObject[this.sheets[0].values[column][0].attribute] = this.sheets[0].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>

Difference between revisions of "HTML Presentation Object: Gantt chart"

Revision as of 18:33, 17 December 2017

Navigation menu

Search