Community Tip - Visit the PTCooler (the community lounge) to get to know your fellow community members and check out some of Dale's Friday Humor posts! X
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); }; } ());
Solved! Go to Solution.
Hello,
The solution is you must have trigger event for data service assigned to Gantt Chart.
Thank you.
Hi @ras.
This extension has been tested and certified by ThingWorx to successfully work with the ThingWorx platform, however it is not currently supported by ThingWorx. The good news is that other people in the Community may have some experience with this extension and may be able to share their insights. Or you may be able to make modifications to accommodate your specific needs.
We are curious to hear other member's experiences regarding this extension.
Regards.
--Sharon
Thanks for your response.
Hello,
The solution is you must have trigger event for data service assigned to Gantt Chart.
Thank you.