Gantt charts for Angular
As the publication name suggests, at DlhSoft we have been building Gantt chart libraries for software development since a very long time ago. On the Web too, allowing you to create a full range of timeline based applications, from project management to any type of resource scheduler and more.
With pure JavaScript (and ASP .NET server side) first, soon after with built-in support for AngularJS, and lately with modern Angular wrappers as well.
To add a Gantt chart in one of your Angular app views, you’d simply need to add the DlhSoft scripts into your solution (core JavaScript code, TypeScript definitions, and Angular components, all available in our public package), and then instantiate it in HTML as a <ganttchartview> element and set its data and configuration values up in code behind without any hassle at all.
The package linked above can be obtained with npm as well, but you’d still need to manually decide which scripts you need (and copy them) into your app’s src folder — we don’t want to force anything in your project, not even automatic updates (indeed, this time we go against the flow):
npm install http://DlhSoft.com/Packages/DlhSoft.GanttChartHyperLibrary.tar As indicated above, to instantiate a Gantt chart view, simply add an element into your HTML container, like this:
<ganttchartview [items]="items" [settings]="settings"
[change]="onItemChanged"
style="min-height: 388px">
…
</ganttchartview>items, and settings are classic Angular component properties, and change function will be called whenever any bar is changed inside the chart. To initialize them, you can write simple TypeScript, of course:
this.items = <GanttChartItem[]>[…];
this.settings = { … };
this.onItemChanged = (item, propertyName, isDirect, isFinal) => {
console.log(propertyName + ' changed for ' + item.content);
}Items are defined by start and finish times (being represented as horizontal bars mapped to the timeline of the Gantt chart, of course), but can also be organized into hierarchies (using indentation levels), have completion percents, assignments and so on.
The chart is fully customizable, from specifying the calendars to be used in your project to all kinds of appearance settings including but not limited to colors and sizes.
You can even define custom SVG content to replace (or in addition to) standard bars and polygons using custom code.
While these features are actually provided by the JavaScript components that the wrappers cover up, you can surely use them in an Angular app too, with ease. (Demo here; sample code on GitHub as well.)
Besides simple Gantt charts, you can also set up Schedule charts — where each row represents a resource and can have multiple task bars attached — , resource load charts, and PERT-based network diagrams as well:
