/GanttChartWidgetWidgetTWX

Display Gantt Charts within thingworx

Primary LanguageJavaScriptISC LicenseISC

Gantt chart extension

Based on initial work from Costin Badici, rewritten using typescript.

Two implementation are available, using different underlying libraries.

  • Google charts version (master branch): uses google charts gannt. It has a fixed set of capabilites, only works online, but has features like displaying the critical path.
  • Frappe-Gantt (frappe branch): uses [Gantt Frappe]. Much more lightweight, works offline, has the capability to display the current date, different view modes, and display baselines.

The Frappe-Gantt version is much more developed and is considered to be the best version.

Example

Usage

An example of usage, as well as sample data is available here for import directly into thingworx.

Here are some of the most important properties to keep in mind when using the widget:

  • Data: The widget expects a dataset with information about the tasks. While most of the fields that can be configured are self-explanatory here are the important ones:
    • TaskID: The id of the task. It's also used in the Relationships property.
    • Completed: 0 -> infinity value indicating the completednes ratio. If the value is greater that 100, we assume the Start and End parameters represent the planned value, and the Completed value the actual value.
    • Start and End: the planned timestamps of the task.
    • CustomClass: the custom class for the task. Here's an example of custom colors:
      .taskclass1 .bar {
      fill: blue;
  }
  .taskclass1 .bar-progress {
      fill: red;
  }

Developing

Building and publishing

The following commands allow you to build and compile your widget:

  • npm run build: builds the production version of the widget. Creates a new extension zip file under the zip folder. The production version is optimized for sharing and using in production enviroments.
  • npm run upload: creates a build, and uploads the extension zip to the thingworx server configured in package.json. The build is created for developement, with source-maps enabled.
  • npm run watch: watches the source files, and whenever they change, do a build.

#This Extension is provided as-is and without warranty or support. It is not part of the PTC product suite. This project is licensed under the terms of the MIT license