cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Need to share some code when posting a question or reply? Make sure to use the "Insert code sample" menu option. Learn more! X

Gantt Chart error as "TypeError: Cannot read property 'ActualDataRows' of undefined"

ras
10-Marble
10-Marble

Gantt Chart error as "TypeError: Cannot read property 'ActualDataRows' of undefined"

Hello,

         I am using Gantt Chart extension from PTC Marketplace. When I configured and run the mashup it's giving error as "TypeError: Cannot read property 'ActualDataRows' of undefined at resize". (Please refer the below code and the attached image file)

        Could you please help me for the same as I am working on the custom widget and following the same code as Gantt Chart extension from PTC Marketplace.

Thanks.

 

 

 

(function () {

	TW.Runtime.Widgets.ganttChart = function () {
        var thisWidget = this; 
		var currentlySelectedRow = undefined;
		
		this.runtimeProperties = function () {
			return {
				'needsDataLoadingAndError': true,
				'supportsAutoResize': true,
			'propertyAttributes': {
				}
			};
		};

		this.renderHtml = function () {
		if (this.properties.ResponsiveLayout === true ) {
			widgetWidth = '100%';
			widgetHeight = '100%';
		} else {
			widgetWidth = this.getProperty("Width");
			widgetHeight = this.getProperty("Height");
		}
			var html = '<div class="widget-content widget-ganttChart"><div id = "chart_div" width=' + widgetWidth + ' height=' + widgetHeight + '> </div></div>';
			return html;
		};
		
		
		this.loadChart = function (rows, taskId, taskName, startDate, endDate, resource, relationships, duration, percentage) {
			 google.charts.load('current', {'packages':['gantt']});
			 google.charts.setOnLoadCallback(drawChart);
             
			 function drawChart() {
			var data = new google.visualization.DataTable();
			 data.addColumn('string', 'Task ID');
			 data.addColumn('string', 'Task Name');
			 data.addColumn('string', 'Resource');
			 data.addColumn('date', 'Start Date');
			 data.addColumn('date', 'End Date');
			 data.addColumn('number', 'Duration');
			 data.addColumn('number', 'Percent Complete');
			 data.addColumn('string', 'Dependencies');
			
		     var trackStyle = TW.getStyleFromStyleDefinition(thisWidget.getProperty('TrackStyle', 'DefaultGanttTrackStyle'));
			 var altTrackStyle = TW.getStyleFromStyleDefinition(thisWidget.getProperty('AlternativeTrackStyle', 'DefaultAlternativeGanttTrackStyle'));
			 var arrowStyle = TW.getStyleFromStyleDefinition(thisWidget.getProperty('ArrowStyle', 'DefaultGanttArrowStyle'));
			 
			 var trackFill = trackStyle.backgroundColor; 
			 var altTrackFill = altTrackStyle.backgroundColor;
			 var arrowColor = arrowStyle.lineColor; 
			 var arrowWidth = arrowStyle.lineThickness;
			 
			 for (var i = 0; i < rows.length; i++) {
				 var row = rows[i];

				  data.addRows([
					[row[taskId], row[taskName], row[resource],
					new Date(row[startDate]), new Date(row[endDate]), row[duration], row[percentage], row[relationships]]
				  ]);
			 }
			 var barHeight = thisWidget.getProperty('ItemHeight');
			 var chartHeight = rows.length *  barHeight + 50; 
			 var itemHeight = barHeight - 5;
			 var cornerRadius = thisWidget.getProperty('BarCornerRadius');
			 var percentEnabled = thisWidget.getProperty('ShowPercentCompletion');
			 var arrowRadius = thisWidget.getProperty('ArrowRadius');
			 var arrowAngle = thisWidget.getProperty('ArrowAngle');
			  var options = {
				  width: "100%",
				  height: chartHeight,
				  gantt: {
				       barHeight: itemHeight,
					   trackHeight: barHeight, 
					   barCornerRadius: cornerRadius,
					   arrow: { angle:arrowAngle, length: 5, spaceAfter: 5, radius: arrowRadius, color: arrowColor, width: arrowWidth},
					   innerGridTrack: {fill: trackFill },
					   innerGridDarkTrack: {fill: altTrackFill},
                       percentEnabled : percentEnabled					   
					}
				};

				var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

				chart.draw(data, options);
 
				google.visualization.events.addListener(chart, 'select', function(e) {
					var selection = chart.getSelection(); 
					if (selection[0] != undefined && selection[0] != null) 
						thisWidget.handleRowSelection (selection[0].row);
				});
	
			 }
		};

		this.afterRender = function () { };


		this.handleSelectionUpdate = function (propertyName, selectedRows, selectedRowIndices) {
			var domElementId = this.jqElementId;
			var widgetElement = this.jqElement;
			var widgetProperties = this.properties;

			if (propertyName == "Data") {
				var widgetProperties = this.properties;

				var idField = widgetProperties['TaskID'];

				thisWidget.ignoreSelectionEvent = true;

				var nSelectedRows = selectedRows.length;

				if (nSelectedRows > 0) {
					for (var x = 0; x < nSelectedRows; x++) {
						if (selectedRows[x]._isSelected === true) {
							thisWidget.handleRowSelection(selectedRows[x]["_row_"]);
							thisWidget.ignoreSelectionEvent = false;
							break;
						}
					}
				} else
					thisWidget.handleRowSelection(undefined);

				thisWidget.ignoreSelectionEvent = false;
			}

		};

		this.handleRowSelection = function (selectedRowNo) {
			if (selectedRowNo !== undefined) {
				var selectedRows = [selectedRowNo];

				if (!thisWidget.ignoreSelectionEvent) {
					thisWidget.updateSelection('Data', selectedRows);
				}
			}

			thisWidget.currentlySelectedRow = selectedRowNo;
		};
		
	  this.handleItemClick = function (d) {
			thisWidget.handleRowSelection(d["_row_"]);
		};
		
	  this.assignRowNumbers = function (rows) {
			var rowid;

			for (rowid in rows) {
				var row = rows[rowid];
				row["_row_"] = rowid;
			}
		};

		this.updateProperty = function (updatePropertyInfo) {
			var widgetProperties = this.properties;

			if (updatePropertyInfo.TargetProperty === "Data") {
				thisWidget.lastData = updatePropertyInfo;

				var rows = updatePropertyInfo.ActualDataRows;

				this.assignRowNumbers(rows);
	
				var taskName = widgetProperties['TaskName'];
				var taskId = widgetProperties['TaskID'];
				var startDate = widgetProperties['StartDate'];
				var endDate = widgetProperties['EndDate'];
				var resource = widgetProperties['Resource'];
				var relationships = widgetProperties['Relationships'];
				var duration = widgetProperties['Duration'];
				var percentage = widgetProperties['Percentage'];
 
				this.loadChart(rows, taskId, taskName, startDate, endDate, resource, relationships, duration, percentage);

				var selectedRowIndices = updatePropertyInfo.SelectedRowIndices;

				if (selectedRowIndices !== undefined) {
					if (selectedRowIndices.length > 0) {
						var selectedRows = new Array();
						selectedRows.push(rows[selectedRowIndices[0]]);
						setTimeout(function () {
							thisWidget.handleSelectionUpdate("Data", selectedRows, selectedRowIndices);
						}, 100);
					} else {
						setTimeout(function () {
							thisWidget.handleSelectionUpdate("Data", [], []);
						}, 100);
					}
				} else {
					setTimeout(function () {
						thisWidget.handleSelectionUpdate("Data", [], []);
					}, 100);
				}

				if (this.SelectedValuePending !== undefined) {
					this.selectItem(this.SelectedValuePending);
					this.SelectedValuePending = undefined;
				}

			} else if (updatePropertyInfo.TargetProperty === "SelectedValue") {
				var selectedItem = updatePropertyInfo.SinglePropertyValue;

				var dataPropertyInfo = thisWidget.lastData;

				if (dataPropertyInfo != undefined) {
					this.selectItem(selectedItem);
				} else {
					this.SelectedValuePending = selectedItem;
				}
			}
		};

		this.beforeDestroy = function () {

		};
		this.resize =  function () {

			var taskName = thisWidget.getProperty('TaskName');
			var taskId = thisWidget.getProperty('TaskID');
			var startDate = thisWidget.getProperty('StartDate');
			var endDate = thisWidget.getProperty('EndDate');
			var resource = thisWidget.getProperty('Resource');
			var relationships = thisWidget.getProperty('Relationships');
			var duration = thisWidget.getProperty('Duration');
		    var itemHeight = thisWidget.getProperty("ItemHeight");
			var percentage = thisWidget.getProperty("Percentage");
var rows = thisWidget.lastData.ActualDataRows; //here throwing error thisWidget.loadChart(rows, taskId, taskName, startDate, endDate, resource, relationships, duration, percentage); }; window.addEventListener("resize", this.resize); }; } ());

 

 

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
ras
10-Marble
10-Marble
(To:ras)

I have figured out this issue, this error caused because data service not having a triggering event.

Thanks.

View solution in original post

4 REPLIES 4
ras
10-Marble
10-Marble
(To:ras)

Hello,

        Your response is highly appreciated.

Thank you.

ras
10-Marble
10-Marble
(To:ras)

Hello, is anybody there?

slangley
23-Emerald II
(To:ras)

Hi @ras.

 

We apologize that your post failed to receive a response.  However, since there were follow-ups posted to the original question, it appeared that it was responded to and was unfortunately overlooked.

 

If you have found a solution to your issue, we would love for you to post it here for the benefit of others who may be struggling with similar issues.  We appreciate your use of the Community.

 

Regards.

 

--Sharon

ras
10-Marble
10-Marble
(To:ras)

I have figured out this issue, this error caused because data service not having a triggering event.

Thanks.

Top Tags