HTML Presentation Object: Gantt chart - Revision history

Ollvihe at 06:57, 11 April 2018

2018-04-11T06:57:08Z

Ollvihe: Ollvihe moved page Gantt chart using HTML Presentation Object to HTML Presentation Object: Gantt chart without leaving a redirect

2018-02-06T16:46:41Z

Ollvihe moved page Gantt chart using HTML Presentation Object to HTML Presentation Object: Gantt chart without leaving a redirect

Ollvihe at 18:37, 17 December 2017

2017-12-17T18:37:44Z

Ollvihe at 18:33, 17 December 2017

2017-12-17T18:33:38Z

Ollvihe at 19:40, 16 December 2017

2017-12-16T19:40:29Z

Ollvihe at 19:38, 16 December 2017

2017-12-16T19:38:52Z

Ollvihe at 19:27, 16 December 2017

2017-12-16T19:27:05Z

Ollvihe at 19:26, 16 December 2017

2017-12-16T19:26:31Z

Ollvihe at 19:11, 16 December 2017

2017-12-16T19:11:21Z

Ollvihe at 19:00, 16 December 2017

2017-12-16T19:00:20Z

@@ Line 2: / Line 2: @@
 <pre>
-data0=CreateDataset(Array('TaskName', 'StartDate', 'EndDate', 'PlannedStartDate', 'PlannedEndDate', 'Progress'))
+data=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)
+data=AddDatasetRow([data], '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)
+data=AddDatasetRow([data], '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)
+data=AddDatasetRow([data], '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)
+data=AddDatasetRow([data], '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)
+data=AddDatasetRow([data], '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)
+data=AddDatasetRow([data], '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)
+data=AddDatasetRow([data], '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)
+data=AddDatasetRow([data], '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)
+data=AddDatasetRow([data], 'Project Task 9', NewDatetime(2017,9,1), NewDatetime(2017,11,1), NewDatetime(2017,8,20), NewDatetime(2017,10,20), 5)
 </pre>

@@ Line 171: / Line 171: @@
+}
-function getDatasetAsObjectArray() {
+function getDatasetAsObjectArray(sheetIndex = 0) {
    var datasetAsObjectArray = [];
-   for (var row = 1; row < this.sheets[0].values[0].length; row++) {
+   for (var row = 1; row < this.sheets[sheetIndex].values[0].length; row++) {
      var rowObject = {};
-     for (var column = 0; column < this.sheets[0].values.length; column++) {
+     for (var column = 0; column < this.sheets[sheetIndex].values.length; column++) {
-       rowObject[this.sheets[0].values[column][0].attribute] = this.sheets[0].values[column][row].value;
+       rowObject[this.sheets[sheetIndex].values[column][0].attribute] = this.sheets[sheetIndex].values[column][row].value;
+     }
      datasetAsObjectArray.push(rowObject);

@@ Line 37: / Line 37: @@
+   }
+}
-−
 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;
-   poData<#uniqueId> = [];
+   datasetData.getDatasetAsObjectArray = getDatasetAsObjectArray;
-  for (var row = 1; row < datasetData.sheets[0].values[0].length; row++) {
+  datasetData.formatDataset = formatDataset;
-    var rowObject = {};
+  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(")/", ""));
@@ Line 176: / Line 171: @@
+}
-function formatDataset(inputData, mappings, groupColumn, groupAttribute, innerArrayAttribute, keepAlreadyMappedColumns = false) {
+function getDatasetAsObjectArray() {
    var mappedData = [];
    var namesToMap = Object.getOwnPropertyNames(mappings);
-   for (var i = 0; i < inputData.length; i++) {
+   for (var i = 0; i < datasetAsObjectArray.length; i++) {
      var row = {};
      var mappedColumns = [];
      for (var j = 0; j < namesToMap.length; j++) {
-       row[namesToMap[j]] = inputData[i][mappings[namesToMap[j]]];
+       row[namesToMap[j]] = datasetAsObjectArray[i][mappings[namesToMap[j]]];
        mappedColumns.push(mappings[namesToMap[j]]);
+     }
-     var dataColumns = Object.getOwnPropertyNames(inputData[i]);
+     var dataColumns = Object.getOwnPropertyNames(datasetAsObjectArray[i]);
      for (j = 0; j < dataColumns.length; j++) {
        if (keepAlreadyMappedColumns || mappedColumns.indexOf(dataColumns[j]) == -1) {
-         row[dataColumns[j]] = inputData[i][dataColumns[j]];
+         row[dataColumns[j]] = datasetAsObjectArray[i][dataColumns[j]];
+       }
+     }

@@ Line 76: / Line 76: @@
      },
      title: {
-     text: 'Gantt charts' },
+     text: 'Gantt chart' },
      xAxis: {
        type: "category",

@@ Line 97: / Line 97: @@
          color: '#D00D20',
          width: 2,
-         value: Date.UTC(2017, 7,15) // Real current date: Date.now()
+         value: Date.UTC(2017, 7,15) // Real currentdate: Date.now()
      }],
        labels: {
@@ Line 108: / Line 108: @@
        useHTML: true,
        formatter: function () {
-         return  "<span style='font-weight: bold;font-size:125%;'>" + this.point.name + "</span></br>Actual: <b>" +
+         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.EndDate)).toLocaleDateString() + "</b></br>" +
+           (new Date(this.point[startDateColumn])).toLocaleDateString() + "</b> - <b>" + (new Date(this.point[endDateColumn])).toLocaleDateString() + "</b></br>" +
-           "Planned: <b>" + (new Date(this.point.PlannedStartDate)).toLocaleDateString() + "</b> - <b>" +
+           "Planned: <b>" + (new Date(this.point[plannedStartDateColumn])).toLocaleDateString() + "</b> - <b>" +
-           (new Date(this.point.PlannedEndDate)).toLocaleDateString() + "</b></br>" +
+           (new Date(this.point[plannedEndDateColumn])).toLocaleDateString() + "</b></br>" +
-           "Progress: <b>" + this.point.progress + " %</b>";
+           "Progress: <b>" + this.point[progressColumn] + " %</b>";
+       }
      },
@@ Line 123: / Line 123: @@
        borderRadius: 0,
        borderWidth: 0,
-       data: formatDataset(poData<#uniqueId>, {"low": startDateColumn, "StartDate": startDateColumn, "high": "ProgressPoint", "progress": progressColumn, "name": taskNameColumn}),
+       data: formatDataset(poData<#uniqueId>, {"low": startDateColumn, "high": "ProgressPoint", "name": taskNameColumn}, null, null, null, true),
         dataLabels: {
           enabled: true,
@@ Line 129: / Line 129: @@
           inside: true,
           verticalAlign:"middle",
-          format: '{point.progress} %',
+          formatter: function () {
           style: {
             fontSize: '13px'
@@ Line 142: / Line 144: @@
        borderRadius: 0,
        borderWidth: 0,
-       data: formatDataset(poData<#uniqueId>, {"low": "ProgressPoint", "high": endDateColumn, "EndDate": endDateColumn, "progress": progressColumn, "name": taskNameColumn}),
+       data: formatDataset(poData<#uniqueId>, {"low": "ProgressPoint", "high": endDateColumn, "name": taskNameColumn}, null, null, null, true),
        dataLabels: {
          enabled: true,
@@ Line 159: / Line 161: @@
        borderRadius: 0,
        borderWidth: 0,
-       data: formatDataset(poData<#uniqueId>, {"low": plannedStartDateColumn, "PlannedStartDate": plannedStartDateColumn, "high": plannedEndDateColumn, "PlannedEndDate": plannedEndDateColumn, "progress": progressColumn, "name": taskNameColumn}),
+       data: formatDataset(poData<#uniqueId>, {"low": plannedStartDateColumn, "high": plannedEndDateColumn, "name": taskNameColumn}, null, null, null, true),
       dataLabels: {
         enabled: true,
@@ Line 174: / Line 176: @@
+}
-function formatDataset(inputData, mappings, groupColumn, groupAttribute, innerArrayAttribute) {
+function formatDataset(inputData, mappings, groupColumn, groupAttribute, innerArrayAttribute, keepAlreadyMappedColumns = false) {
    var mappedData = [];
    var namesToMap = Object.getOwnPropertyNames(mappings);
@@ Line 186: / Line 188: @@
      var dataColumns = Object.getOwnPropertyNames(inputData[i]);
      for (j = 0; j < dataColumns.length; j++) {
-       if (mappedColumns.indexOf(dataColumns[j]) == -1) {
+       if (keepAlreadyMappedColumns || mappedColumns.indexOf(dataColumns[j]) == -1) {
          row[dataColumns[j]] = inputData[i][dataColumns[j]];
+       }

← Older revision	Revision as of 16:46, 6 February 2018
(No difference)

@@ Line 16: / Line 16: @@
 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()'''.
+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()'''.
 <pre>

@@ Line 14: / Line 14: @@
 </pre>
-Set the '''Horizontal scrollbar''' and '''Vertical scrollbar'''  to '''Hidden'''. Use the following HTML code:
+Set the '''Horizontal scrollbar''' and '''Vertical scrollbar'''  to '''Hidden'''.
 <pre>
 <div id="container<#uniqueId>"></div>
@@ Line 73: / Line 76: @@
      },
      title: {
-     text: 'Gantt chart' },
+     text: 'Gantt charts' },
      xAxis: {
        type: "category",
@@ Line 91: / Line 94: @@
        },
        title: "",
        labels: {
          style: {
@@ Line 207: / Line 215: @@
+}
 </script>
 </pre>
 [[Category: QPR UI]]

@@ Line 1: / Line 1: @@
-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.
+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.
 <pre>
@@ Line 19: / Line 19: @@
 <script>
 var poData<#uniqueId>;
 var width<#uniqueId>;
@@ Line 40: / Line 46: @@
+   }
    for (var i = 0; i < poData<#uniqueId>.length; i++) {
-     poData<#uniqueId>[i]["StartDate"] = parseInt(poData<#uniqueId>[i]["StartDate"].replace("/Date(", "").replace(")/", ""));
+     poData<#uniqueId>[i][startDateColumn] = parseInt(poData<#uniqueId>[i][startDateColumn].replace("/Date(", "").replace(")/", ""));
-     poData<#uniqueId>[i]["EndDate"] = parseInt(poData<#uniqueId>[i]["EndDate"].replace("/Date(", "").replace(")/", ""));
+     poData<#uniqueId>[i][endDateColumn] = parseInt(poData<#uniqueId>[i][endDateColumn].replace("/Date(", "").replace(")/", ""));
-     poData<#uniqueId>[i]["PlannedStartDate"] = parseInt(poData<#uniqueId>[i]["PlannedStartDate"].replace("/Date(", "").replace(")/", ""));
+     poData<#uniqueId>[i][plannedStartDateColumn] = parseInt(poData<#uniqueId>[i][plannedStartDateColumn].replace("/Date(", "").replace(")/", ""));
-     poData<#uniqueId>[i]["PlannedEndDate"] = parseInt(poData<#uniqueId>[i]["PlannedEndDate"].replace("/Date(", "").replace(")/", ""));
+     poData<#uniqueId>[i][plannedEndDateColumn] = parseInt(poData<#uniqueId>[i][plannedEndDateColumn].replace("/Date(", "").replace(")/", ""));
-     poData<#uniqueId>[i]["ProgressPoint"] = (new Date(poData<#uniqueId>[i]["StartDate"] + (poData<#uniqueId>[i]["EndDate"] - poData<#uniqueId>[i]["StartDate"]) * poData<#uniqueId>[i]["Progress"] / 100)).getTime();
+     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>();
@@ Line 95: / Line 101: @@
        formatter: function () {
          return  "<span style='font-weight: bold;font-size:125%;'>" + this.point.name + "</span></br>Actual: <b>" +
-           (new Date(this.point.StartDate)).toLocaleDateString() + "</b> - <b>" + (new Date(this.point.EndDate)).toLocaleDateString() + "</b></br>" +
+           (new Date(this.point[startDateColumn])).toLocaleDateString() + "</b> - <b>" + (new Date(this.point.EndDate)).toLocaleDateString() + "</b></br>" +
            "Planned: <b>" + (new Date(this.point.PlannedStartDate)).toLocaleDateString() + "</b> - <b>" +
            (new Date(this.point.PlannedEndDate)).toLocaleDateString() + "</b></br>" +
@@ Line 109: / Line 115: @@
        borderRadius: 0,
        borderWidth: 0,
-       data: formatDataset(poData<#uniqueId>, {"low": "StartDate", "StartDate": "StartDate", "high": "ProgressPoint", "progress": "Progress", "name": "TaskName"}),
+       data: formatDataset(poData<#uniqueId>, {"low": startDateColumn, "StartDate": startDateColumn, "high": "ProgressPoint", "progress": progressColumn, "name": taskNameColumn}),
         dataLabels: {
           enabled: true,
@@ Line 128: / Line 134: @@
        borderRadius: 0,
        borderWidth: 0,
-       data: formatDataset(poData<#uniqueId>, {"low": "ProgressPoint", "high": "EndDate", "EndDate": "EndDate", "progress": "Progress", "name": "TaskName"}),
+       data: formatDataset(poData<#uniqueId>, {"low": "ProgressPoint", "high": endDateColumn, "EndDate": endDateColumn, "progress": progressColumn, "name": taskNameColumn}),
        dataLabels: {
          enabled: true,
@@ Line 145: / Line 151: @@
        borderRadius: 0,
        borderWidth: 0,
-       data: formatDataset(poData<#uniqueId>, {"low": "PlannedStartDate", "PlannedStartDate": "PlannedStartDate", "high": "PlannedEndDate", "PlannedEndDate": "PlannedEndDate", "progress": "Progress", "name": "TaskName"}),
+       data: formatDataset(poData<#uniqueId>, {"low": plannedStartDateColumn, "PlannedStartDate": plannedStartDateColumn, "high": plannedEndDateColumn, "PlannedEndDate": plannedEndDateColumn, "progress": progressColumn, "name": taskNameColumn}),
       dataLabels: {
         enabled: true,
@@ Line 201: / Line 207: @@
+}
 </script>
 </pre>
 [[Category: QPR UI]]